Naučit ću vas kako postaviti i realizirati svoju aplikaciju React s Netlifyom.
Netlify je usluga koja automatizira izradu, postavljanje i upravljanje vašim web mjestima. To je jedno od najbržih i najlakših rješenja za implementaciju danas.
Netlify nudi besplatni paket. Dakle, prvo ćemo se prijaviti na Netlify koristeći bilo koju od opcija (Github, Gitlab, Bitbucket, Email) danih na stranici za prijavu.
Započet ćemo stvaranjem gradnje naše aplikacije pokretanjem ove naredbe:
npm run buildDakle, sada će se generirati naša mapa za izgradnju koja će sadržavati sve datoteke spremne za proizvodnju.
Postoje dva načina za postavljanje naše aplikacije na Netlify.
Povucite i ispustite
Netifly je to napravio tako lako da se moramo samo povucite i ispustite našu graditi mape u svoje on-line aplikacije (rightmost slika gore), a naš program će se rasporediti na live URL.
Napomena: mrežna aplikacija Netlify zaslon je koji se pojavljuje nakon što se prijavite na svoj račun Netlify.
Netlify CLI
Netifly također nudi sučelje naredbenog retka koje vam omogućuje implementaciju aplikacije izravno iz naredbenog retka. To ćemo sada učiniti.
Dakle, prvo ćemo instalirati CLI pomoću sljedeće naredbe:
npm install netlify-cli -gSada smo spremni za implementaciju. Da bismo rasporedili aplikaciju, moramo biti sigurni da se nalazimo u mapi projekta, a zatim ćemo pokrenuti ovu naredbu:
netlify deployMogli bismo dobiti skočni prozor koji će tražiti od nas da se prijavimo s Netlifyem i odobrimo pristup Netlify CLI .
Sada ćemo kliknuti Autoriziraj. Sad kad smo ovlašteni, možemo slijediti upute naredbenog retka za postavljanje aplikacije.
Upiti naredbenog retka
- U konzoli stoji „ Ova mapa još nije povezana s web mjestom. Što biste željeli učiniti? " Želi znati želimo li povezati ovaj direktorij s postojećom web lokacijom ili stvoriti i konfigurirati novu stranicu. Budući da je ovo novo mjesto, odabrat ćemo Stvori i konfiguriraj novo mjesto.
2. Daje nam mogućnost da našoj web lokaciji damo ime. Utipkat ću portfelj na netlify (možete upisati bilo koje dostupno ime koje želite).
3. Sada će zatražiti Netlify račun koji želite koristiti, pa ću ja odabrati svoj račun (Abhishek Jakhar) , a vi možete odabrati svoj.
4. Sada, kao put implementacije, moramo navesti direktorij gradnje našeg projekta koji sadrži sredstva za implementaciju. Dakle, tamo ćemo upisati build i pritisnuti enter.
5. Sada će se naša web stranica stvoriti i prvo će se rasporediti na skicu URL-a, koju možemo pregledati kopiranjem i lijepljenjem URL-a u preglednik.
Sada, natrag u konzoli, stoji "Ako na vašem nacrtu URL-a sve izgleda dobro, podignite ga da živi s --prod zastavom" .
Da bismo pokrenuli našu aplikaciju, pokrenut ćemo naredbu prikazanu na naredbenom retku
netlify deploy --prodJoš jednom ćemo zatražiti da odredimo put postavljanja za live build koji je opet naša mapa build.
Sada u izlazu konzole dobivamo dva URL-a. Jedinstvena uputiti URL, koji predstavlja jedinstveni URL za svaku pojedinu implementacije i kamere URL koji uvijek prikazuje najnoviji implementacije.
Dakle, svaki put kada ažurirate svoje web mjesto i implementirate ga, dobit ćete jedinstveni URL za to postavljanje. U osnovi, ako postavimo više puta, imat ćemo više jedinstvenih URL-ova tako da možete korisnike usmjeriti na određenu verziju vaše aplikacije. Ali aktivni URL uvijek prikazuje vaše najnovije promjene na istom URL-u.
Napomena: Netlify automatski zaštićuje Vaše stranice preko HTTPS za besplatno .Stranica nije pronađena Pogreška
Ako objavljujete aplikaciju koja koristi usmjerivač poput React Routera, morat ćete konfigurirati preusmjeravanja i prepisati pravila za svoje URL-ove. Jer kada kliknemo bilo koju navigacijsku stavku za promjenu stranice (rute) i osvježavanje preglednika, dobit ćemo stranicu s pogreškom 404.
Dakle, Netlify čini konfiguriranje preusmjeravanja i prepisivanja pravila za vaše URL-ove zaista jednostavnim. Trebat ćemo dodati datoteku unutar mape za izgradnju naše aplikacije pod nazivom _redirects. Unutar datoteke moramo uključiti sljedeće pravilo prepisivanja.
/* /index.html 200Ovo pravilo prepisivanja služit će datoteci index.html umjesto da daje 404, bez obzira na to koji URL traži preglednik.
Dakle, sada, da bismo vidjeli najnovije promjene u aktivnom URL-u, moramo se implementirati sa netlify deploy. Opet ćemo odrediti gradnju kao put postavljanja. Sada, kad vidimo URL uživo i osvježimo aplikaciju nakon promjene rute, više nećemo vidjeti stranicu s pogreškom 404.
To je sve. Na netlify.com možete vidjeti postavke svoje web lokacije. Tamo možete raditi stvari poput postavljanja prilagođene domene ili povezati web mjesto s GitHub spremištem.
Netlify: cjelovita platforma za automatizaciju modernih web projekata
Postavite moderne statične web stranice s Netlifyom. Nabavite CDN, kontinuirano postavljanje, HTTPS jednim klikom i sve usluge koje… www.netlify.com
Nadam se da vam je ovaj post bio informativan i koristan. Volio bih čuti vaše povratne informacije!
Hvala na čitanju!