3 moduri de a implementa o aplicație React pe Netlify

React este o bibliotecă JavaScript populară pentru construirea de interfețe de utilizator funcționale în aplicații web dinamice. Poate ați petrecut multe ore lungi, depanând codul React în încercarea de a construi următorul Instagram sau Airbnb.

Indiferent de ceea ce construiți, scopul final este întotdeauna să vă prezentați munca în lume. Aici sunt utile platformele de găzduire precum Netlify. Ele oferă o suită de instrumente care simplifică procesul de implementare.

Urmăriți-vă pentru a afla cum să vă implementați aplicațiile React folosind instrumentele de implementare ușor de utilizat Netlify.

Ce este Netlify?

Netlify este o platformă de dezvoltare bazată pe cloud, cu caracteristici care fac găzduirea și implementarea aplicațiilor pe web mult mai ușoară. Mai simplu spus, oferă o gamă de instrumente și servicii care simplifică și simplifică procesul, permițându-vă să implementați și să găzduiți o aplicație web în câteva secunde.

Caracteristicile principale ale Netlify

Netlify are o serie de caracteristici care simplifică procesul de implementare.

• Oferă funcții esențiale de acces și control al versiunilor pentru a permite echipelor de dezvoltare să colaboreze eficient și eficient la proiecte.
• Oferă servicii de găzduire securizate pe care le puteți ajusta în funcție de nevoile dvs. În plus, oferă copii de rezervă automate în caz de pierdere a datelor.
• Se integrează perfect cu serviciile populare de dezvoltare cloud, cum ar fi GitHub, GitLab și Bitbucket.
• Oferă caracteristici care facilitează configurarea unei adrese URL de domeniu personalizate și a unui certificat SSL pentru aplicația dvs.

Creați o aplicație Demo React

1. Pentru a începe, mai întâi va trebui creați o aplicație demonstrativă React pe care le veți implementa în cele din urmă pe Netlify. Rulați comanda de mai jos pe terminalul dvs. pentru a crea o aplicație React:

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

2. Apoi, rulați această comandă de terminal pentru a porni serverul de dezvoltare:

   npm start

   Continuați și vizualizați rezultatele în browser la adresa http://localhost: 3000.
3. În cele din urmă, rulați această comandă pentru a crea o versiune pregătită pentru producție a aplicației dvs.:

   npm run build

   Această comandă generează fișierele de producție și activele necesare într-un folder nou în directorul rădăcină numit build. Dosarul de compilare captează o versiune redusă a întregii aplicații, care conține tot ceea ce este necesar pentru implementarea aplicației.

Implementați aplicația React pe Netlify

Netlify oferă trei metode pe care le puteți folosi pentru a vă implementa aplicația React. Puteți:

• Importați-vă proiectul dintr-o gazdă de depozit Git, cum ar fi GitHub.
• Utilizați funcția de glisare și plasare.
• Utilizați instrumentul de linie de comandă, CLI-ul Netlify.

Implementați folosind funcția de import GitHub

1. Începe prin crearea unui depozit pe GitHub pentru a găzdui fișierele de proiect ale aplicației React. De asemenea, puteți găzdui fișierele de proiect pe orice alt furnizor Git acceptat, cum ar fi GitLab, Bitbucket sau Azure DevOps.
2. Apoi, creați un cont pe Netlify. După ce v-ați înscris, navigați la tabloul de bord al contului și selectați Site-uri fila.
3. Faceți clic pe Importă din Git buton.
4. Selectați platforma dvs. de furnizor Git preferat. Netlify vă va solicita să vă autentificați la furnizorul dvs. Git pentru a-i acorda acces la contul și depozitele dvs.
5. Odată ce ați făcut acest lucru, Netlify va afișa o listă de depozite pe furnizorul dvs. Git. Selectați depozitul de proiect React pe care l-ați introdus inițial către furnizorul dvs. Git.
6. După selectarea depozitului, trebuie să specificați modul în care Netlify ar trebui să gestioneze procesul de implementare. De obicei, pentru site-urile web statice, nu trebuie să faceți nicio modificare, cu toate acestea, pentru site-urile web dinamice, cum ar fi aplicațiile React, va trebui să setați setările de compilare. Din fericire, Netlify detectează automat în mod implicit cadrul folosit pentru a construi aplicația și populează câmpurile cu setările de compilare necesare.
7. În cele din urmă, faceți clic Implementează site-ul pentru a finaliza procesul.

Faceți clic pe adresa URL furnizată pentru a vizualiza aplicația în browser. Dacă aveți o adresă URL de domeniu personalizată, puteți solicita Netlify să o folosească cu site-ul dvs., actualizând adresa URL din setările site-ului.

Implementați folosind funcția de glisare și plasare

Aceasta este cea mai simplă metodă de a vă implementa aplicația React pe Netlify. Trebuie doar să glisați și să plasați folderul de compilare în interfața de utilizator Netlify.

1. Pe tabloul de bord Netlify, selectați Site fila. Apoi, faceți clic pe Adăugați site nou și apoi selectați Implementați manual din opțiunile meniului derulant.
2. În pagina cu funcția de glisare și plasare, selectați folderul care conține fișierele de compilare React și plasați-l în această interfață cu utilizatorul. Proiectul se va implementa instantaneu pe Netlify. Alternativ, puteți da clic pe Răsfoiți pentru a încărca pentru a selecta folderul de compilare din sistemul de fișiere.

Implementați folosind interfața de linie de comandă a Netlify

Folosind interfața de linie de comandă (CLI) a Netlify, vă puteți implementa aplicația React direct de pe un terminal. În plus, CLI-ul Netlify vă permite să configurați implementarea continuă, astfel încât atunci când comiteți și trimiteți noi actualizări în depozitul dvs. Git, acestea să fie implementate automat.

1. Rulați comanda de mai jos pe terminalul dvs. pentru a instala CLI-ul Netlify:

   npm instalare netlify-cli -g

2. Acum, rulați comanda de mai jos pentru a vă implementa aplicația. Asigurați-vă că vă aflați în directorul de lucru al proiectului înainte de implementare.

   netlify deploy

   CLI-ul Netlify vă va solicita să îi permiteți să facă modificări în contul dvs. După ce acordați permisiunea, furnizați numele contului de echipă pe care l-ați dat la înscriere, apoi alegeți dacă să conectați directorul aplicației la un site web existent sau să creați și să configurați unul nou unu. Terminați furnizând un nume de site web personalizat și numele folderului dvs. de compilare.
3. CLI va implementa o versiune nefinalizată a aplicației dvs. Verificați dacă totul funcționează conform așteptărilor.
4. În cele din urmă, rulați comanda de mai jos pentru a vă implementa aplicația în producție.

   netlify deploy --prod

Compararea celor trei metode de implementare

Metoda de import GitHub este cea mai eficientă pentru implementarea aplicațiilor de producție, deoarece vă permite să conectați depozitul tău Git direct către Netlify și păstrează codul sincronizat cu site-ul sau aplicația lor live. Când comiteți și împingeți modificări în depozitul dvs. Git, Netlify va actualiza automat site-ul web.

Metoda drag-and-drop este mai simplă pentru implementarea site-urilor statice, deoarece nu necesită codare sau configurare. Cu toate acestea, nu permite actualizări automate atunci când faceți modificări în depozit.

Metoda CLI este cea mai cuprinzătoare, deoarece vă oferă control deplin asupra procesului de implementare și permite configurații personalizate. Această metodă este cea mai potrivită dacă aveți deja o înțelegere puternică a Netlify și sunteți confortabil să lucrați cu linia de comandă.

Toate cele trei metode sunt utile pentru implementarea aplicațiilor în Netlify. În cele din urmă, alegerea pe care să o folosiți va depinde de nevoile fiecărui proiect individual.

Utilizarea Netlify pentru a implementa alte aplicații

Netlify este un instrument puternic și versatil pe care îl puteți folosi pentru a implementa alte aplicații care doar React. Îl puteți folosi pentru a implementa și găzdui site-uri web statice și aplicații dinamice construite cu diferite cadre precum Angular.

Interfața ușor de utilizat facilitează configurarea, gestionarea și implementarea API-urilor dvs.