3 måter å distribuere en React-applikasjon på Netlify

React er et populært JavaScript-bibliotek for å bygge funksjonelle brukergrensesnitt i dynamiske webapplikasjoner. Kanskje du har brukt mange lange timer på å feilsøke React-kode i et forsøk på å bygge neste Instagram eller Airbnb.

Uansett hva du bygger, er sluttmålet alltid å vise frem arbeidet ditt for verden. Det er her hosting-plattformer som Netlify kommer godt med. De tilbyr en rekke verktøy som effektiviserer distribusjonsprosessen.

Følg med for å lære hvordan du distribuerer React-applikasjonene dine ved hjelp av Netlifys brukervennlige distribusjonsverktøy.

Hva er Netlify?

Netlify er en skybasert utviklingsplattform med funksjoner som gjør hosting og distribusjon av applikasjoner på nettet mye enklere. Enkelt sagt gir den en rekke verktøy og tjenester som effektiviserer og forenkler prosessen, slik at du kan distribuere og være vert for en nettapplikasjon i løpet av sekunder.

Netlifys hovedfunksjoner

Netlify har en rekke funksjoner som forenkler distribusjonsprosessen.

• Den gir viktige tilgangs- og versjonskontrollfunksjoner for å gjøre det mulig for utviklingsteam å samarbeide effektivt om prosjekter.
• Den tilbyr sikre hostingtjenester som du kan justere for å passe dine behov. I tillegg gir den automatiserte sikkerhetskopier i tilfelle tap av data.
• Den integreres sømløst med populære skyutviklingstjenester som GitHub, GitLab og Bitbucket.
• Den har funksjoner som gjør det enkelt å sette opp og konfigurere en egendefinert domene-URL og et SSL-sertifikat for applikasjonen din.

Opprett en Demo React-applikasjon

1. For å komme i gang må du først lag en demo React-applikasjon som du til slutt vil distribuere på Netlify. Kjør kommandoen nedenfor på terminalen din for å lage en React-applikasjon:

   npx create-react-app demo-react-netlify-app

2. Kjør deretter denne terminalkommandoen for å spinne opp utviklingsserveren:

   npm start

   Gå videre og se resultatene i nettleseren din på http://localhost: 3000.
3. Til slutt, kjør denne kommandoen for å lage en produksjonsklar versjon av applikasjonen din:

   npm kjøre bygge

   Denne kommandoen genererer de nødvendige produksjonsfilene og ressursene i en ny mappe i rotkatalogen kalt build. Byggmappen fanger opp en minifisert versjon av hele applikasjonen, som inneholder alt som kreves for å distribuere applikasjonen.

Distribuer React-applikasjonen på Netlify

Netlify tilbyr tre metoder du kan bruke for å distribuere React-applikasjonen din. Du kan:

• Importer prosjektet ditt fra en Git-depotvert som GitHub.
• Bruk dra og slipp-funksjonen.
• Bruk kommandolinjeverktøyet, Netlifys CLI.

Distribuer ved hjelp av GitHub-importfunksjonen

1. Start med opprette et depot på GitHub for å huse dine React-applikasjonsprosjektfiler. Alternativt kan du også være vert for prosjektfilene dine på en hvilken som helst annen støttet Git-leverandør som GitLab, Bitbucket eller Azure DevOps.
2. Deretter registrerer du deg for en konto på Netlify. Når du har registrert deg, naviger til kontooversikten og velg Nettsteder fanen.
3. Klikk på Importer fra Git knapp.
4. Velg din foretrukne Git-leverandørplattform. Netlify vil be deg om å autentisere med Git-leverandøren din for å gi den tilgang til kontoen din og depotene dine.
5. Når du har gjort dette, vil Netlify vise en liste over depoter på Git-leverandøren din. Velg React-prosjektlageret du først sendte til Git-leverandøren din.
6. Etter å ha valgt depotet, må du spesifisere hvordan Netlify skal håndtere distribusjonsprosessen. Vanligvis, for statiske nettsteder, trenger du ikke å gjøre noen endringer, men for dynamiske nettsteder som React-applikasjoner, må du angi byggeinnstillingene. Heldigvis oppdager Netlify som standard automatisk rammeverket som brukes til å bygge applikasjonen og fyller ut feltene med de nødvendige byggeinnstillingene.
7. Klikk til slutt Distribuer nettstedet for å fullføre prosessen.

Klikk på den angitte URL-adressen for å se applikasjonen i nettleseren din. Hvis du har en egendefinert domene-URL, kan du instruere Netlify om å bruke den med nettstedet ditt ved å oppdatere URL-en fra nettstedets innstillinger.

Distribuer ved hjelp av dra og slipp-funksjonen

Dette er den enkleste metoden for å distribuere React-applikasjonen din på Netlify. Du trenger bare å dra og slippe byggmappen inn i Netlifys dra-og-slipp-brukergrensesnitt.

1. På Netlifys dashbord velger du Nettstedet fanen. Klikk deretter på Legg til nytt nettsted og velg deretter Distribuer manuelt fra rullegardinmenyen.
2. På dra-og-slipp-funksjonssiden velger du mappen som inneholder React-byggfilene og slipper den inn i dette brukergrensesnittet. Prosjektet vil umiddelbart distribueres på Netlify. Alternativt kan du klikke på Bla gjennom for å laste opp for å velge byggemappen fra filsystemet.

Distribuer ved hjelp av Netlifys kommandolinjegrensesnitt

Ved å bruke Netlifys kommandolinjegrensesnitt (CLI), kan du distribuere React-applikasjonen din direkte fra en terminal. I tillegg lar Netlifys CLI deg konfigurere kontinuerlig distribusjon slik at når du forplikter og pusher nye oppdateringer til Git-depotet ditt, distribueres de automatisk.

1. Kjør kommandoen nedenfor på terminalen din for å installere Netlifys CLI:

   npm installere netify-cli -g

2. Kjør nå kommandoen nedenfor for å distribuere applikasjonen din. Sørg for at du er i prosjektets arbeidskatalog før du distribuerer.

   netlify distribuere

   Netlifys CLI vil be deg om å la den gjøre endringer i kontoen din. Etter at du har gitt tillatelsen, oppgi navnet på teamkontoen du ga da du registrerte deg, Velg deretter om du vil koble appens katalog til et eksisterende nettsted eller å opprette og konfigurere et nytt en. Avslutt ved å oppgi et tilpasset nettstedsnavn og navnet på byggemappen din.
3. CLI vil distribuere en utkastversjon av applikasjonen din. Sjekk at alt fungerer som forventet.
4. Til slutt, kjør kommandoen nedenfor for å distribuere applikasjonen din til produksjon.

   netlify distribuere --prod

Sammenligning av de tre distribusjonsmetodene

GitHub-importmetoden er den mest effektive for å distribuere produksjonsapper siden den lar deg koble til Git-depotet ditt direkte til Netlify og hold koden din synkronisert med deres live-nettside eller applikasjon. Når du forplikter og pusher endringer i Git-depotet ditt, vil Netlify automatisk oppdatere nettstedet.

Dra-og-slipp-metoden er enklere for å distribuere statiske nettsteder, siden den ikke krever noen koding eller oppsett. Det tillater imidlertid ikke automatiske oppdateringer når du gjør endringer i depotet ditt.

CLI-metoden er den mest omfattende, siden den gir deg full kontroll over distribusjonsprosessen og tillater tilpassede konfigurasjoner. Denne metoden er best egnet hvis du allerede har en sterk forståelse av Netlify og er komfortabel med å jobbe med kommandolinjen.

Alle tre metodene er nyttige for å distribuere apper til Netlify. Til syvende og sist vil valget av hvilken som skal brukes avhenge av behovene til hvert enkelt prosjekt.

Bruke Netlify til å distribuere andre applikasjoner

Netlify er et kraftig og allsidig verktøy som du kan bruke til å distribuere andre applikasjoner enn bare React. Du kan bruke den til å distribuere og være vert for statiske nettsteder og dynamiske applikasjoner bygget med forskjellige rammeverk som Angular.

Det brukervennlige grensesnittet gjør det enkelt å konfigurere, administrere og distribuere API-ene dine.