În acest tutorial vom realiza o aplicație de bază React + Node implementată pe Heroku.

Există o mulțime de tutoriale care fac acest lucru numai folosind linia de comandă, așa că, pentru a schimba puțin lucrurile, o voi face complet fără linia de comandă.

Pentru lucruri precum generarea aplicațiilor React și Express, nu avem de ales decât să folosim linia de comandă. Pentru orice altceva vom folosi un GUI.

Presupun, de asemenea, că aveți un cont Github și Heroku. Amândoi sunt liberi, deci nu vă faceți griji cu privire la înscriere.

eșantion de proiect:
https://github.com/iqbal125/react-express-probă

React și Express Setup

În primul rând, să începem prin crearea a două directoare numite Server și Client.

Cum sa implementati o aplicatie React Node pe Heroku

Directorul Client va conține conținutul fișierului create-react-app , iar Server va păstra conținutul fișierului express comanda. Această bibliotecă creează automat o aplicație simplă Express pentru noi, similară cu create-react-app. Trebuie instalat la nivel global, lucru pe care îl puteți face cu comanda:

npm install -g express-generator

După aceasta, pur și simplu rulați aceste comenzi în fiecare dintre directoarele respective pentru a instala proiectele de pornire:

npx create-react-app app1 în Client director

express în Server director

Treceți la app1 director generat de create-react-app și fugi:

npm run build

Aceasta va genera o versiune de producție a proiectului care este optimizată pentru o implementare de producție, cu lucruri precum codul de gestionare a erorilor și spațiul alb eliminat.

Notă: Într-o construcție de dezvoltare ați folosi un proxy pentru http: // localhost: 5000 pentru a comunica de la aplicația React la serverul dvs. Express, dar aici aplicația React și serverul Express sunt doar un proiect. Serverul Express servește fișierele React.

Apoi, tăiați și lipiți întregul construi în directorul Server director. Structura proiectului dvs. ar trebui să arate astfel:

1611624724 773 Cum sa implementati o aplicatie React Node pe Heroku

Acum putem adăuga un anumit cod pentru a informa serverul nostru Express pentru a ne servi proiectul React .:

....

app.use(express.static(path.join(__dirname, 'build')));


app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

....

Prima linie de cod servește toate fișierele noastre statice din construi director.

Cea de-a doua bucată de cod este să menținem funcțional direcționarea către partea clientului. Acest cod servește în esență index.html fișier pe orice rute necunoscute. În caz contrar, ar trebui să rescriem întreaga noastră rutare pentru a lucra cu această configurare a serverului Express.

Pentru a testa aplicația, rulați npm start în Server director și accesați http: // localhost 3000 în browser. Apoi, ar trebui să vedeți aplicația React care rulează.

Acum suntem gata să încărcăm acest proiect pe GitHub.

GitHub

În loc să folosim linia de comandă pentru a încărca pe GitHub, vom face acest lucru cu GUI. Mai întâi, accesați pagina de pornire GitHub și creați un nou depozit. Denumiți-l oricum doriți, dar asigurați-vă că Inițializați acest depozit cu un README opțiune bifată:

1611624724 895 Cum sa implementati o aplicatie React Node pe Heroku

Apoi încărcați toate fișierele proiectului fără nod_module director.

1611624724 880 Cum sa implementati o aplicatie React Node pe Heroku

Faceți clic pe commit și am terminat. Fișierele de proiect încărcate vor apărea pe GitHub astfel:

1611624724 785 Cum sa implementati o aplicatie React Node pe Heroku

Acum putem trece la configurarea Heroku.

Heroku

Accesați tabloul de bord Heroku, creați o aplicație nouă și denumiți-o oricum doriți.

Apoi, accesați fila Implementare și selectați GitHub sub Metoda de implementare:

1611624724 826 Cum sa implementati o aplicatie React Node pe Heroku

Dacă nu v-ați conectat încă contul GitHub la contul Heroku, vi se va solicita prin fluxul GitHub Auth.

După aceasta, căutați proiectul dvs. pe GitHub și conectați-vă la acesta:

1611624724 950 Cum sa implementati o aplicatie React Node pe Heroku

În cele din urmă, putem doar să ne implementăm aplicația făcând clic pe butonul Deploy Branch:

1611624724 767 Cum sa implementati o aplicatie React Node pe Heroku

Heroku va instala automat toate modulele Node. Puteți vizualiza proiectul dvs. făcând clic pe butonul Vizualizare.

Și atât, am terminat! Mulțumesc pentru lectură.

Conectați-vă cu mine pe Twitter pentru mai multe actualizări despre viitoarele tutoriale: https://twitter.com/iqbal125sf