U ovom uputstvu radit ćemo osnovnu implementaciju React + Node aplikacije na Heroku.
Postoji mnogo tutorijala koji to rade samo pomoću naredbenog retka, pa ću malo promijeniti stvari, učinit ću to potpuno bez naredbenog retka.
Za stvari poput generiranja React i Express aplikacija ne preostaje nam drugo nego koristiti naredbeni redak. Za sve ostalo koristit ćemo GUI.
Također pretpostavljam da imate račun za Github i Heroku. Oboje su besplatni, tako da nema brige oko prijave.
ogledni projekt:
//github.com/iqbal125/react-express-sample
Reagirajte i ekspresno postavite
Prvo, krenimo s izradom dva direktorija nazvanih Server i Client.
Klijentski direktorij sadržavat će sadržaj create-react-appnaredbe, a Poslužitelj sadržaj expressnaredbe. Ova knjižnica samo nam automatski stvara jednostavnu Express aplikaciju, slično kao create-react-app. Treba ga instalirati globalno, što možete učiniti naredbom:
npm install -g express-generator
Nakon toga jednostavno pokrenite ove naredbe u svaki od odgovarajućih direktorija da biste instalirali početne projekte:
npx create-react-app app1u direktoriju klijenta
expressu direktoriju Poslužitelj
Promijeni na App1 imenik generira create-react-appi pokrenuti:
npm run build
Ovo će generirati verziju projekta za produkcijsku izgradnju koja je optimizirana za produkcijsku implementaciju, s uklonjenim stvarima poput koda za rukovanje pogreškama i praznog prostora.
Napomena: U razvojnoj gradnji koristili biste proxy za // localhost: 5000 za komunikaciju iz vaše aplikacije React na Express poslužitelj, ali ovdje su aplikacija React i Express poslužitelj samo jedan projekt. Express poslužitelj služi datotekama React.
Zatim izrežite i zalijepite cijeli direktorij gradnje u direktorij Server . Struktura vašeg projekta trebala bi izgledati ovako:
Sada možemo dodati neki kod da bismo našem Express poslužitelju znali da služi našem React projektu:
.... app.use(express.static(path.join(__dirname, 'build'))); app.get('/*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); .... Prvi redak koda služi svim našim statičkim datotekama iz direktorija gradnje .
Drugi dio koda je održavanje usmjeravanja na strani klijenta funkcionalnim. Ovaj kôd u osnovi služi index.htmldatoteci na bilo kojim nepoznatim rutama. U suprotnom, trebali bismo prepisati cijelo svoje usmjeravanje kako bismo radili s ovom postavkom Express poslužitelja.
Da biste testirali svoju aplikaciju, jednostavno pokrenite npm startu direktoriju Server i idite na // localhost 3000 u pregledniku. Tada biste trebali vidjeti svoju pokrenutu React aplikaciju.
Sada smo spremni za prijenos ovog projekta na GitHub.
GitHub
Umjesto da koristimo naredbeni redak za prijenos na GitHub, to ćemo učiniti s GUI-jem. Prvo idite na početnu stranicu GitHub i stvorite novo spremište. Dajte mu ime kako god želite, ali obavezno inicijalizirajte ovo spremište s potvrđenom opcijom README :
Sljedeće prenesite sve datoteke projekta bez direktorija node_modules .
Kliknite predaj i gotovi smo. Vaše prenesene datoteke projekta pojavit će se na GitHubu tako:
Sada možemo prijeći na postavljanje Herokua.
Heroku
Idite na nadzornu ploču Heroku, izradite novu aplikaciju i dajte joj ime kako god želite.
Zatim idite na karticu Deploy i odaberite GitHub pod Metoda postavljanja:
Ako još niste povezali svoj GitHub račun sa svojim Heroku računom, bit ćete upitani kroz tijek GitHub Auth.
Nakon toga potražite svoj projekt na GitHubu i povežite se s njim:
Konačno, možemo samo implementirati našu aplikaciju klikom na gumb Raspostavi granu:
Heroku će automatski instalirati sve module Node za vas. Svoj projekt možete pogledati klikom na gumb Pogled.
I to je to, gotovi smo! Hvala na čitanju.
Povežite se sa mnom na Twitteru za više novosti o budućim vodičima: //twitter.com/iqbal125sf