Cum se implementează aplicația Frontend pe Netlify?

Implementarea aplicațiilor frontend nu este un lucru mare astăzi. Putem implementa un site în câteva minute cu tehnologii moderne și platforme de găzduire. Există multe platforme de găzduire acolo. Dar, suntem interesați de Netlify pentru acest articol.

Să implementăm aplicația noastră frontală în Netlify .

Aplicații Frontend

Există diferite tipuri de biblioteci și cadre frontale, cum ar fi React, Vue, Angular etc., iar vestea bună este că toate acestea folosesc același pachet de pachet. Implementarea pentru toate aplicațiile frontend construite cu biblioteci și cadre diferite este similară. Deci, suntem bine să mergem cu oricare dintre aceste biblioteci și cadre.

De asemenea, putem crea aplicații frontend fără biblioteci sau cadre. Acesta este modul tradițional de a construi aplicații frontend pe vremuri. Dar acum se schimbă mult. Deci, putem construi aplicații frontend în moduri diferite. Deși, procesul de implementare este același pentru toate aceste tipuri diferite de aplicații frontend.

Vom vedea implementarea unei aplicații front-end construită cu o bibliotecă și a unei alte fără bibliotecă sau cadru. Să construim aplicații frontend minime pentru implementare folosind React și Plain JavaScript .

Înființat

Vom crea aplicații simple React și JavaScript pentru demonstrația de implementare. Ii creezi si tu pentru a le urmari. Sau, dacă ați avut deja aplicații frontend, atunci treceți la secțiunea de implementare.

Trebuie să ne amintim că punctul de intrare al oricărei aplicații frontend ar trebui să fie index.html în timpul implementării în Netlify .

Dacă am creat aplicații folosind orice bibliotecă sau cadru, nu trebuie să ne facem griji. În mod implicit, bibliotecile și cadrele creează fișierul index.html în procesul de construire pentru noi. Dar, când avem aplicații JavaScript simple, trebuie să creăm un fișier index.html ca intrare pentru aplicația noastră.

Aplicația React

Rulați următoarea comandă pentru a crea o aplicație React.

 npx create-react-app demo

Puteți actualiza aplicația după cum doriți înainte de implementare. Tocmai am actualizat o linie de text pe pagina de pornire. Nu conteaza insa :).

Aplicație JavaScript simplă

Urmați pașii de mai jos pentru a crea o aplicație JavaScript simplă.

• Creați un folder numit demo .
• Creați trei fișiere numite index.html , styles.css și script. js .
• Aici, index.html este punctul de intrare pentru aplicația noastră.

Scoateți-vă creativitatea și actualizați aplicația. Doar adaug lucruri simple în aplicație.

Desfășurare

Venind la implementarea aplicațiilor frontend în Netlify, avem două opțiuni. Putem implementa direct aplicații din GitHub, GitLab, BitBucket, etc., către Netlify. Sau putem implementa folosind Netlify CLI (interfață de linie de comandă) . Nu este obligatoriu să cunoaștem fiecare pentru a implementa aplicațiile noastre. Dar, este bine despre diferitele opțiuni pe care le avem pentru implementare.

Să le explorăm pe fiecare pe rând.

GitHub

Folosim GitHub pentru a găzdui codul nostru. Nu trebuie să îl folosiți, deoarece nu este obligatoriu. Puteți folosi alte platforme după cum doriți.

Există două tipuri de aplicații pe care să le implementăm. Dar, procesul arată similar pentru ambii. Chiar dacă vă voi arăta pe amândoi. Există în principal doi pași în ea. Sunt

• Împingeți codul în GitHub.
• Implementați aplicația din GitHub folosind Netlify.

Prima parte este comună atât pentru aplicațiile React, cât și pentru JavaScript . Să începem procesul de implementare cu primul pas.

Presupunem că nu ați avut codul dvs. pe GitHub. Dacă aveți codul pe GitHub, atunci puteți sări peste partea codului de împingere. Ai nevoie de instrumentul git . Dacă nu aveți git instalat pe mașina dvs., atunci ar trebui să îl instalați înainte de a continua.

#1. Impingerea codului în GitHub

• Accesați contul dvs. GitHub și creați un depozit numit demo .

• Puteți vedea repo-ul după cum urmează după ce a fost creat.

Acum, trebuie să împingem codul nostru în depozitul pe care l-am creat mai sus. Pentru a împinge codul, puteți urma comenzile date în repo sau comenzile de mai jos.

• Deschideți terminalul sau cmd.
• Accesați directorul de proiect.
• Inițializați git cu git init
• Adăugați modificările la local git git add .
• Commiteți modificările cu un mesaj git commit -m 'Completed application'
• Conectați depozitul de la distanță cu depozitul nostru local git remote add origin 'your_repo_path' . Înlocuiți your_repo_path cu depozitul dvs. de la distanță. Îl puteți găsi în depozit, în mod similar al meu [email protected]:hafeezulkareem/demo.git
• Acum, apăsați codul git push -u origin main
• Asta e; am împins codul nostru în GitHub.

Puteți vedea codul după cum urmează în depozitul dvs.

Am terminat cu primul pas de a trimite codul nostru în GitHub. Dacă implementați o aplicație JavaScript simplă, atunci codul dvs. poate arăta după cum urmează.

Să trecem la pasul următor și să implementăm aplicația noastră pe Netlify.

#2. Implementarea codului GitHub pe Netlify

Dacă nu aveți un cont în Netlify, creați unul.

• Accesați site-ul Netlify.
• Conecteaza-te la contul tau.
• Puteți vedea un buton numit Site nou din Git, așa cum se arată mai jos.

• Faceți clic pe butonul pentru a începe implementarea.
• Veți naviga la pagina de implementare care arată după cum urmează.

• Puteți găsi diferite platforme de găzduire a codurilor pe pagină. Folosim GitHub. Deci, faceți clic pe el.
• Se va deschide o fereastră nouă pentru a vă conecta la contul nostru GitHub, după cum urmează.

• Conectați-vă la contul dvs. GitHub pentru autorizarea Netlify.
• Odată ce vă conectați la contul GitHub, fereastra se va închide spunând Autorizat .
• Acum, căutați numele depozitului dvs. din bara de căutare dată.

• Când căutați depozitul, acesta nu va apărea, deoarece nu am acordat depozitului nostru acces la Netlify. Veți vedea un buton numit Configurați Netlify pe GitHub .

• Faceți clic pe butonul și introduceți parola contului dvs. GitHub pentru a confirma accesul.

• Veți naviga la o pagină de acces care arată după cum urmează.

• Derulați în jos și veți vedea o secțiune numită Acces la depozit .

• Există două opțiuni. Putem acorda acces la toate depozitele noastre sau la unele dintre ele care necesită acest lucru. Este mai bine să acordăm acces la depozitele pe care le implementăm și nu la toate.
• Selectați opțiunea Selectați doar depozitele după cum urmează.

• Faceți clic pe meniul derulant de mai jos și căutați depozitul pe care doriți să îl implementați. Selectați-l.

• Faceți clic pe butonul Salvare .
• Va redirecționa către pagina de implementare Netlify . Și puteți vedea noul depozit.

• Faceți clic pe depozit.
• Va afișa diferite detalii precum o ramură de implementat, o comandă pentru a instala pachete etc.,

• Dacă aveți cod complet pe o altă ramură, alta decât master , actualizați-l selectând ramura din meniul drop-down.
• În cele din urmă, faceți clic pe butonul Implementați site-ul . Vă va redirecționa către tabloul de bord.
• Va dura ceva timp pentru a implementa site-ul.

• Veți vedea site-ul publicat odată ce acesta este implementat.

Asta e.

Am implementat cu succes site-ul nostru pe Netlify. Puteți face clic pe adresa URL a site-ului pentru a-l vedea live.

Putem actualiza setările site-ului și domeniului după cum dorim. Dar, nu o vom acoperi aici, deoarece face un alt subiect complet despre care să vorbim. Mai jos este aplicația JavaScript simplă după implementare.

Nu există nicio diferență în procesul de implementare. Dar nu uitați să nu uitați de punctul de intrare al aplicației, adică index.html .

Acum, este timpul să aflăm despre o altă metodă de implementare a aplicației noastre frontend.

#3. Implementarea codului utilizând Netlify CLI

Netlify CLI este o interfață de linie de comandă pentru a implementa aplicații frontend de pe terminal sau linia de comandă. Este util atunci când nu vrei să treci prin niște pași suplimentari (metoda de mai sus). La fel ca metoda de mai sus, putem implementa aplicații React (orice bibliotecă sau cadru) sau JavaScript .

Puteți obține documentația completă a Netlify CLI aici. Dar, nu este necesar să implementați o aplicație. Vă puteți referi la el atunci când mergeți la nivelul avansat.

Să vedem cum să implementăm folosind Netlify CLI.

În primul rând, trebuie să-l instalăm pe mașina noastră. Este disponibil ca pachet de noduri. Deci, îl putem instala folosind npm . Să-l instalăm folosind următoarea comandă.

 npm install netlify-cli -g

Indicatorul -g este să instalăm pachetul la nivel global, astfel încât să-l putem accesa oriunde. Veți vedea ceva similar cu imaginea următoare.

Să vedem pașii pentru implementarea aplicațiilor React și simple JavaScript folosind Netlify CLI.

• Rulați comanda de compilare a aplicației React (sau a oricărei alte biblioteci sau cadru). Nu trebuie să rulăm nicio comandă în cazul unei aplicații JavaScript simple.

 npm run build

• Comanda de compilare poate varia în funcție de biblioteca sau cadrul pe care îl utilizați.
• Veți vedea un folder de compilare după cum urmează.

• Schimbați-vă directorul pentru a construi folderul în cazul aplicației React sau folderul proiectului în cazul aplicației JavaScript.

• Înainte de a trece la următorii pași, trebuie să ne creăm un cont Netlify . Accesați Netlify și creați un cont și treceți la pașii următori.
• Acum, trebuie să ne conectăm folosind CLI. Să rulăm următoarea comandă pentru a vă autentifica.

 netlify login

• Comanda de mai sus va deschide o filă nouă în browserul implicit pentru a vă conecta la contul Netlify. Vă va duce la site-ul Netlify.
• Introduceți acreditările și conectați-vă. După ce v-ați conectat, veți cere să autorizați CLI.

• Faceți clic pe Autorizare pentru a vă autentifica. Veți vedea un mesaj de succes după el.

• Acum, este timpul să implementăm aplicația noastră. Rulați următoarea comandă de implementare.

 netlify deploy

• Vă va cere să alegeți site-ul existent sau să creați unul nou. Alegeți (utilizați săgețile în sus și în jos) Creați și configurați un site nou și apăsați Enter .

• Apoi va arăta echipelor să aleagă, folosiți săgețile pentru a selecta și apăsați Enter .

• Acum, puteți introduce subdomeniul pentru site-ul dvs. Nu este obligatoriu, insa. Netlify va alege unul aleatoriu pentru noi dacă îl lăsăm. O putem schimba mai târziu dacă vrem. Îl las necompletat deocamdată.

• Ne va cere să intrăm în directorul pe care vrem să-l implementăm. Am navigat deja la directorul de destinație. Să apăsăm Enter . Puteți introduce și alte directoare. Dar nu este simplu. Deci, este mai bine să navigați mai întâi la directorul de destinație și apoi să implementați.

• Acesta va implementa site-ul nostru pentru o schiță de adresă URL, după cum urmează.

• Vă puteți verifica site-ul pe adresa URL nefinalizată și vă puteți asigura că totul este corect.
• După verificarea site-ului, îl putem implementa în producție folosind următoarea comandă.

 netlify deploy --prod

• Va cere doar directorul. Intră în director. Dacă ne aflăm în același director, atunci apăsați Enter .
• Asta e. Implementarea site-ului nostru este finalizată. Puteți vizita site-ul pentru a-l verifica.

• Și, iată rezultatul.

Am terminat cu implementarea site-ului nostru pe Netlify folosind Netlify CLI . Puteți actualiza setările site-ului în tabloul de bord Netly.

Concluzie

Pf! Este una lungă. Nu aveți nevoie de niciun alt ghid pentru a vă implementa aplicația frontend pe Netlify după ce ați citit complet acest lucru.

Există două metode de a implementa aplicația noastră pe Netlify. Pe care să-l urmezi? Există un mic avantaj de a folosi prima metodă. Netlify va actualiza versiunea ori de câte ori introducem cod nou în depozitul site-ului nostru. Dar, în cazul metodei CLI, trebuie să o facem manual.

Întotdeauna adoptăm o metodă în detrimentul celorlalte, în funcție de situațiile în care ne aflăm. Oricum, cunoașteți ambele metode de implementare. Deci, nu trebuie să ne îngrijorăm cu privire la metodă. Alegeți-l pe cel care vi se potrivește cel mai bine.

Notă: este posibil ca site-urile demonstrative afișate în articol să nu fie disponibile public după ceva timp.

Ai nevoie de o alternativă la Netlify? Consultați aceste cele mai bune platforme statice de găzduire a site-urilor.

Desfăşurare fericită