Sådan distribueres en React-applikation til Netlify

Jeg vil lære dig, hvordan du implementerer og hoster din React-app med Netlify.

Netlify er en tjeneste, der automatiserer builds, implementeringer og administrerer dine websteder. Det er en af ​​de hurtigste og nemmeste implementeringsløsninger i disse dage.

Netlify tilbyder en gratis plan. Så først logger vi ind på Netlify ved hjælp af en af ​​mulighederne (Github, Gitlab, Bitbucket, Email), der er angivet på login-siden.

Vi starter med at oprette en build af vores applikation ved at køre denne kommando:

npm run build

Så nu bliver vores buildmappe genereret, som indeholder alle de produktionsklare filer.

Nu er der to måder at implementere vores applikation på Netlify på.

Drag Drop

Netifly har gjort det så let, at vi bare skal trække og slippe vores build-mappe i deres online-app (højre billed ovenfor), og vores applikation bliver distribueret til en live URL.

Bemærk: Netlify online app er det skærmbillede, der vises, når du er logget ind på din netlify-konto.

Netlify CLI

Netifly leverer også en kommandolinjegrænseflade, der lader dig implementere din app lige fra kommandolinjen. Det er hvad vi vil gøre nu.

Så først installerer vi CLI ved hjælp af følgende kommando:

npm install netlify-cli -g

Nu er vi klar til at implementere det. For at implementere applikationen skal vi sørge for, at vi er i projektmappen, og så kører vi denne kommando:

netlify deploy

Vi får muligvis et pop op-vindue, der beder os om at logge ind med Netlify og give adgang til Netlify CLI .

Nu klikker vi på Godkend. Nu hvor vi er autoriserede, kan vi følge kommandolinjens beder om at implementere appen.

Kommandolinjeanmodninger

  1. I konsollen står det, at “ Denne mappe er endnu ikke linket til et websted. Hvad vil du gerne lave?" Det vil vide, om vi vil linke denne mappe til et eksisterende sted eller oprette og konfigurere et nyt sted. Da dette er et nyt sted, vælger vi Opret & konfigurer et nyt sted.

2. Det giver os mulighed for at give vores websted et navn. Jeg skriver portefølje på netlify (Du kan skrive et hvilket som helst tilgængeligt navn, som du kan lide).

3. Nu vil den bede om den Netlify-konto, som du vil bruge, så jeg vælger min konto (Abhishek Jakhar) , du kan vælge din.

4. Nu, som implementeringssti, er vi nødt til at specificere vores projekts build-mappe, der indeholder aktiverne til implementering. Så vi skriver build der og trykker på enter.

5. Nu bliver vores websted oprettet og vil først blive distribueret til en kladde URL, som vi kan se ved at kopiere og indsætte URL'en i browseren.

Nu, tilbage i konsollen, står der "Hvis alt ser godt ud på din URL-udkast, tag det med til at leve med --prod-flagget" .

Så for at gøre vores app live kører vi kommandoen, der vises på kommandolinjen

netlify deploy --prod

Det vil bede os endnu en gang om at angive distributionsstien til live build, som igen er vores build-mappe.

Nu i konsoludgangen får vi to URL'er. En unik URL til implementering, der repræsenterer den unikke URL for hver enkelt implementering, og en Live URL, der altid viser din seneste implementering.

Så hver gang du opdaterer dit websted og distribuerer det, får du en unik URL til denne implementering. Dybest set, hvis vi implementerer flere gange, har vi flere unikke webadresser, så du kan pege brugere på en bestemt version af din applikation. Men live URL viser altid dine seneste ændringer på den samme URL.

Bemærk: Netlify sikrer automatisk dit websted i løbet af HTTPS til fri .

Fejl ved siden blev ikke fundet

Hvis du udgiver en app, der bruger en router som React Router, skal du konfigurere omdirigeringer og omskrive regler til dine URL'er. For når vi klikker på et navigationselement for at ændre siden (rute) og opdatere browseren, får vi en 404-fejlside.

Så det gør Netlify det nemt at konfigurere omdirigeringer og omskrive regler til dine URL'er. Vi bliver nødt til at tilføje en fil inde i buildmappen i vores app med navnet _redirects. Inde i filen skal vi medtage følgende omskrivningsregel.

/* /index.html 200

Denne omskrivningsregel vil tjene index.html-fil i stedet for at give en 404, uanset hvilken URL browseren anmoder om.

Så nu, for at se de seneste ændringer i den levende URL, er vi nødt til at implementere med netlify deploy. Igen specificerer vi build som implementeringsstien. Når vi nu ser den levende URL og opdaterer appen efter at have ændret ruten, ser vi ikke længere 404-fejlsiden.

Det er alt der er ved det. På netlify.com kan du se dine webstedsindstillinger. Der kan du gøre ting som at oprette et brugerdefineret domæne eller forbinde webstedet til et GitHub-arkiv.

Netlify: Alt-i-en-platform til automatisering af moderne webprojekter

Implementere moderne statiske websteder med Netlify. Få CDN, kontinuerlig implementering, 1-klik HTTPS og alle de tjenester, du ... www.netlify.com

Jeg håber, du har fundet dette indlæg informativt og nyttigt. Jeg vil meget gerne høre din feedback!

Tak fordi du læste!