Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

React je popularna JavaScript biblioteka za izgradnju funkcionalnih korisničkih sučelja u dinamičkim web aplikacijama. Možda ste proveli puno sat vremena ispravljajući React kod u pokušaju da izgradite sljedeći Instagram ili Airbnb.

Bez obzira na to što gradite, krajnji cilj uvijek je pokazati svoj rad svijetu. Ovdje dobro dolaze platforme za hosting kao što je Netlify. Oni pružaju skup alata koji pojednostavljuju proces implementacije.

Pratite kako biste naučili kako implementirati svoje React aplikacije pomoću Netlifyjevih alata za implementaciju koji su jednostavni za korištenje.

Što je Netlify?

Netlify je razvojna platforma temeljena na oblaku sa značajkama koje uvelike olakšavaju hosting i implementaciju aplikacija na webu. Jednostavno rečeno, pruža niz alata i usluga koji usmjeravaju i pojednostavljuju proces omogućujući vam da implementirate i ugostite web aplikaciju u roku od nekoliko sekundi.

instagram viewer

Glavne značajke Netlifyja

Netlify ima niz značajki koje pojednostavljuju proces implementacije.

  • Omogućuje bitne značajke pristupa i kontrole verzija kako bi razvojnim timovima omogućio učinkovitu i djelotvornu suradnju na projektima.
  • Nudi sigurne usluge hostinga koje možete prilagoditi svojim potrebama. Osim toga, omogućuje automatizirano sigurnosno kopiranje u slučaju gubitka podataka.
  • Besprijekorno se integrira s popularnim uslugama za razvoj oblaka kao što su GitHub, GitLab i Bitbucket.
  • Pruža značajke koje olakšavaju postavljanje i konfiguraciju prilagođenog URL-a domene i SSL certifikata za vašu aplikaciju.

Napravite Demo React aplikaciju

  1. Da biste započeli, prvo ćete morati izraditi demo React aplikaciju koje ćete na kraju implementirati na Netlify. Pokrenite naredbu ispod na svom terminalu da biste kreirali React aplikaciju: 
    npx create-react-app demo-react-netlify-app
  2. Zatim pokrenite ovu terminalsku naredbu da pokrenete razvojni poslužitelj: 
    npm početak
    Samo naprijed i pogledajte rezultate u svom pregledniku na http://localhost: 3000.
  3. Na kraju, pokrenite ovu naredbu za izradu verzije vaše aplikacije spremne za proizvodnju: 
    npm pokrenuti izgradnju
    Ova naredba generira potrebne proizvodne datoteke i sredstva unutar nove mape u korijenskom direktoriju pod nazivom build. Mapa za izradu bilježi umanjenu verziju cijele aplikacije koja sadrži sve što je potrebno za implementaciju aplikacije.

Postavite aplikaciju React na Netlify

Netlify nudi tri metode koje možete koristiti za implementaciju svoje React aplikacije. Možeš:

  • Uvezite svoj projekt s hosta Git repozitorija kao što je GitHub.
  • Koristite značajku Povuci i ispusti.
  • Koristite alat naredbenog retka, Netlifyjev CLI.

Implementacija pomoću značajke uvoza GitHub

  1. Počni od stvaranje repozitorija na GitHubu za smještaj projektnih datoteka vaše aplikacije React. Alternativno, također možete ugostiti svoje projektne datoteke na bilo kojem drugom podržanom Git pružatelju kao što su GitLab, Bitbucket ili Azure DevOps.
  2. Zatim se prijavite za račun na Netlify. Nakon što se prijavite, idite na nadzornu ploču svog računa i odaberite Stranice tab.
  3. Klikni na Uvoz iz Gita dugme.
  4. Odaberite željenu platformu pružatelja Git usluga. Netlify će od vas tražiti da se autentifikujete kod svog Git pružatelja usluga kako biste mu odobrili pristup vašem računu i spremištima.
  5. Nakon što to učinite, Netlify će prikazati popis repozitorija na vašem Git provideru. Odaberite repozitorij React projekta koji ste inicijalno gurnuli svom Git davatelju.
  6. Nakon odabira repozitorija, morate odrediti kako bi Netlify trebao upravljati procesom postavljanja. Obično, za statične web stranice, ne morate napraviti nikakve promjene, međutim, za dinamičke web stranice kao što su React aplikacije, morat ćete postaviti postavke izgradnje. Srećom, Netlify prema zadanim postavkama automatski otkriva okvir koji se koristi za izradu aplikacije i popunjava polja sa potrebnim postavkama izgradnje.
  7. Na kraju kliknite Postavite mjesto završiti proces.

Kliknite navedeni URL za prikaz aplikacije u vašem pregledniku. Ako imate prilagođeni URL domene, možete uputiti Netlify da ga koristi s vašim web mjestom ažuriranjem URL-a iz postavki web mjesta.

Postavite korištenjem značajke povuci i ispusti

Ovo je najjednostavnija metoda za implementaciju vaše React aplikacije na Netlify. Trebate samo povući i ispustiti mapu za izradu u Netlifyjevo povuci i ispusti korisničko sučelje.

  1. Na nadzornoj ploči Netlifyja odaberite stranica tab. Zatim kliknite na Dodaj novu stranicu a zatim odaberite Postavite ručno iz opcija padajućeg izbornika.
  2. Na stranici značajke povuci i ispusti, odaberite mapu koja sadrži datoteke za izgradnju Reacta i ispustite je u ovo korisničko sučelje. Projekt će se odmah implementirati na Netlify. Alternativno, možete kliknuti na Pregledajte za prijenos da biste odabrali svoju mapu za izgradnju iz datotečnog sustava.

Implementirajte pomoću Netlifyjevog sučelja naredbenog retka

Koristeći Netlifyjevo sučelje naredbenog retka (CLI), možete implementirati svoju React aplikaciju izravno s terminala. Dodatno, Netlifyjev CLI omogućuje vam da konfigurirate kontinuiranu implementaciju tako da kada izvršite i gurnete nova ažuriranja u svoje Git spremište, ona se automatski implementiraju.

  1. Pokrenite naredbu u nastavku na svom terminalu da instalirate Netlifyjev CLI: 
    npm instalirati netlify-cli -g
  2. Sada pokrenite naredbu u nastavku da biste implementirali svoju aplikaciju. Provjerite jeste li u radnom direktoriju projekta prije implementacije. 
    netlify implementirati
    Netlifyjev CLI zatražit će od vas da mu dopustite izmjene na vašem računu. Nakon što date dopuštenje, navedite naziv timskog računa koji ste dali prilikom prijave, zatim odaberite želite li povezati imenik aplikacije s postojećom web stranicom ili izraditi i konfigurirati novu jedan. Završite unosom prilagođenog naziva web-mjesta i naziva mape za izradu.
  3. CLI će implementirati nacrt verzije vaše aplikacije. Provjerite radi li sve prema očekivanjima.
  4. Na kraju, pokrenite naredbu u nastavku za implementaciju vaše aplikacije u produkciju. 
    netlify implementirati --proizvod

Usporedba triju metoda implementacije

GitHub metoda uvoza je najučinkovitija za implementaciju produkcijskih aplikacija budući da vam omogućuje povezivanje svoje Git spremište izravno na Netlify i održavajte svoj kod sinkroniziranim s njihovim živim web mjestom ili aplikacijom. Kada izvršite izmjene i gurnete ih u Git repozitorij, Netlify će automatski ažurirati web stranicu.

Metoda povuci i ispusti jednostavnija je za postavljanje statičnih web stranica jer ne zahtijeva kodiranje ili postavljanje. Međutim, ne dopušta automatsko ažuriranje kada napravite promjene u svom repozitoriju.

CLI metoda je najopsežnija jer vam daje potpunu kontrolu nad procesom postavljanja i omogućuje prilagođene konfiguracije. Ova je metoda najprikladnija ako već dobro razumijete Netlify i ugodno vam je raditi s naredbenim redkom.

Sve tri metode korisne su za postavljanje aplikacija na Netlify. U konačnici, odabir kojeg ćete koristiti ovisit će o potrebama svakog pojedinog projekta.

Korištenje Netlifyja za postavljanje drugih aplikacija

Netlify je moćan i svestran alat koji možete koristiti za implementaciju aplikacija koje nisu samo React. Možete ga koristiti za implementaciju i hostiranje statičkih web stranica i dinamičkih aplikacija izgrađenih s različitim okvirima kao što je Angular.

Sučelje prilagođeno korisniku olakšava konfiguriranje, upravljanje i implementaciju vaših API-ja.