de Ashish Nandan Singh

Cum să implementați o aplicație React cu un server Express pe Heroku

Cum sa implementati o aplicatie React cu un server

Salut Lume! Recent, a trebuit să implementez un site web pe Heroku pentru una dintre lucrările independente pe care le făceam. Cred că acest proces poate fi oarecum dificil și un tutorial detaliat sau un articol despre cum să faceți acest lucru ar trebui să vă ajute. Deci, acesta va fi foarte simplu și, sperăm, foarte scurt.

Vom începe prin a crea o aplicație Express, care va acționa ca serverul nostru. Odată ce serverul este finalizat, vom crea o aplicație simplă create-react-app, vom conecta serverul cu frontend-ul și, în cele din urmă, vom implementa totul pe o platformă de găzduire precum Heroku.

Înainte de a merge mai departe, vreau să înțelegeți că în lumea dezvoltării web aproape totul depinde de preferința cuiva. Unii dintre voi s-ar putea să nu fie de acord cu anumite lucruri, s-ar putea să continuați modul în care doriți să faceți lucrurile, și este complet bine. Până la momentul în care rupem aplicația, consider că totul este în regulă.

Să începem.

Creați o aplicație Node / Express

Începeți prin crearea unui folder pentru proiectul general. Acest dosar va conține aplicația din partea clientului – aplicația noastră React în acest caz. Navigați la directorul din terminalul dvs. și tastați comenzile de mai jos.

$ touch server.js$ npm init

Ultima comandă din fragmentul de mai sus vă va parcurge câțiva pași și vă va inițializa proiectul cu un package.json fişier. Dacă sunteți complet nou în acest sens, puteți considera acest fișier ca fiind un registru în care păstrați evidența tuturor dependențelor pe care le veți utiliza în procesul de compilare al aplicației dvs.

Mai departe, acum că avem package.json fișier gata, putem începe prin adăugarea dependenței noastre pentru proiect.

Adăugarea Express:

$ npm i -g express --save

Aceasta va adăuga Express ca dependență la package.json. Acum că avem acest lucru, tot ce ne trebuie este încă o dependență și este pentru reîncărcarea la cald a aplicației ori de câte ori modificăm codul:

$ npm i -g nodemon --save --dev

Aceasta va adăuga nodemon aplicației. Dacă doriți să citiți mai multe despre nodemon, puteți verifica acest link pentru mai multe informații.

Acum că le-am adăugat, suntem pregătiți să creăm serverul nostru cel mai de bază în Express. Să vedem cum se face asta.

const express = require('express');const app = express();const port = process.env.PORT || 5000;
//Route setupapp.get('/', (req, res) => {    res.send('root route');
})
//Start serverapp.listen(port, (req, res) => {
console.log(`server listening on port: ${port}`)
 });

Asta e. Navigați la terminal, asigurați-vă că vă aflați în directorul rădăcină al proiectului și tastați:

$ nodemon <name-of-the-file> (index.js/server.js)

În cazul nostru de când l-am numit server.js ar fi nodemon server.js . Aceasta va porni serverul la portul 5000 al computerului dvs. local. Dacă mergeți, vizitați browserul și deschideți https: // localhost: 5000 / veți vedea textul „traseu rădăcină”, ceea ce înseamnă că serverul a pornit. În cazul în care vă confruntați cu probleme, nu ezitați să le adăugați în comentariile de mai jos.

Acum, că serverul este configurat și funcționează, să trecem la configurarea aplicației React.

Aplicația React

$ npm i -g create-react-app$ create-react-app <name-of-the-app>

În scopul acestui tutorial, vom denumi aplicația „client”, astfel încât comanda noastră va arăta astfel create-react-app client.

Odată ce acest lucru este făcut, configurarea va dura ceva timp și va crea un mic dosar drăguț în aplicația principală cu numele „client”.

Deocamdată nu vom face modificări majore în aplicația generală React – care nu intră în sfera acestui tutorial.

Acum provocarea este că trebuie să apelăm și să ne conectăm cu serverul nostru care rulează pe localhost. Pentru a face acest lucru, trebuie să facem un apel API.

Adăugarea unui proxy

React ne oferă posibilitatea de a face acest lucru prin adăugarea unei valori proxy la package.json fişier. Navigați la package.json în directorul dvs. și adăugați codul de mai jos.

"proxy": "http://localhost:5000",

În cazul nostru, serverul rulează la portul 5000, deci 5000 în valoarea proxy. Valoarea poate varia dacă utilizați cu totul un alt port.

Acum trebuie să apelăm punctele finale definite Express sau punctele finale API din componentele noastre React. Ceea ce înseamnă cu adevărat este că acum putem apela pur și simplu „api / utilizatori / toți” din partea clientului nostru, care apoi va transmite solicitarea noastră și va arăta astfel „https: // localhost: 5000 / api / users / all” . Aceasta ne scutește de a face o solicitare de origine încrucișată, pe care majoritatea browserelor moderne nu o acceptă din motive de securitate.

În continuare vom face câteva modificări la src/app.js fişier.

import React, { Component } from 'react';import './App.css';import Navbar from './Components/Layout/Navbar';import { BrowserRouter as Router, Route } from 'react-router-dom';import Footer from './Components/Layout/Footer';import Home from './Components/Layout/Home';import Social from './Components/social/Social';
class App extends Component {  constructor(props) {    super(props);    this.state = {}    this.connecToServer = this.connecToServer.bind(this);  }
  connecToServer() {    fetch('/');  }
  componentDidMount() {    this.connecToServer();  }
  render() {    return (      <Router>      <div className="container">         <Navbar />         <Route exact path="/" component={Home} />         <Route exact path="/social" component={Social} />         <Footer />      </div>      </Router>    );  }}
export default App;

Ceea ce am făcut a fost să creăm un constructor și să legăm valoarea acestuia în funcția noastră care va efectua apelul API de preluare. Apoi apelăm funcția imediat ce componenta este montată. Apoi avem funcția de redare care are marcajul general pentru aplicație. Deci, aceasta a fost ultima modificare pe care o vom face în React sau în aplicația noastră frontend.

Ta package.json fișierul ar trebui să arate ca fragmentul de cod de mai jos.

{  "name": "project-name",  "version": "0.1.0",  "private": true,  "dependencies": {    "react": "^16.6.3",    "react-dom": "^16.6.3",    "react-scripts": "2.1.1",    "react-router-dom": "^4.3.1"  },
  "scripts": {    "start": "react-scripts start",    "build": "react-scripts build",    "test": "react-scripts test",    "eject": "react-scripts eject"  },
  "eslintConfig": {    "extends": "react-app"  },
  "proxy": "http://localhost:5000",
  "browserslist": [    ">0.2%",    "not dead",    "not ie <= 11",    "not op_mini all"  ]}

Acum să ne oprim un minut și să ne gândim la ce trebuie să facem în continuare … vreun gând?

Unii dintre voi au dreptate crezând că trebuie să ne asigurăm că fișierele noastre React sunt difuzate de serverul nostru Express. Să facem câteva modificări la server.js pentru a vă asigura că fișierele React sunt servite de serverul Express.

Schimbare fișier server

const express = require('express');const app = express();const path = require('path');const port = process.env.PORT || 5000;
//Static file declarationapp.use(express.static(path.join(__dirname, 'client/build')));
//production modeif(process.env.NODE_ENV === 'production') {  app.use(express.static(path.join(__dirname, 'client/build')));  //  app.get('*', (req, res) => {    res.sendfile(path.join(__dirname="client/build/index.html"));  })}
//build modeapp.get('*', (req, res) => {  res.sendFile(path.join(__dirname+'/client/public/index.html'));})
//start serverapp.listen(port, (req, res) => {  console.log( `server listening on port: ${port}`);})

În fragmentul de cod de mai sus, mai întâi trebuie să utilizați modulul de cale încorporat în nod și să declarați folderul static pe care doriți să îl utilizați în acest server Express.

Apoi verificați dacă procesul este producția, care va fi odată ce aplicația este implementată pe Heroku. În această condiție ați dori să serviți index.html fișier din folderul de construire si nu dosarul public.

Daca este nu modul de producție, și testați unele caracteristici și serverul dvs. rulează pe localhost, doriți index.html din folderul public de servit.

Acum trebuie să ne asigurăm că mai întâi pornim serverul Express și apoi pornim serverul React. Acum există o mulțime de modalități de a face acest lucru și, pentru simplitatea acestui tutorial, vom folosi un modul numit concurrently pentru a rula ambele servere cu o singură comandă.

Asigurați-vă că vă aflați în directorul rădăcină și apoi executați comanda de mai jos de la terminal.

npm i concurrently --save

După ce ați făcut acest lucru, să facem câteva modificări la scripturile pe care le avem în serverul nostru Express package.json fișiere.

"scripts": {    "client-install": "npm install --prefix client",    "start": "node index.js",    "server": "nodemon index.js",    "client": "npm start --prefix client",    "dev": "concurrently "npm run server" "npm run client"",
}
  • npm run client-install va instala toate dependențele pentru aplicația React
  • npm start va porni serverul și nu se va reîncărca după detectarea oricărei modificări
  • npm run server va porni serverul, va asculta orice modificare a codului și va reîncărca rapid pagina din browser pentru a reflecta modificarea.
  • npm run client va rula aplicația React fără a porni serverul
  • npm run dev va rula simultan serverul și apoi va rula clientul pe browserul dvs.

Configurare Heroku

Asigurați-vă că aveți un cont pe Heroku. Dacă nu, puteți face una folosind acreditările dvs. GitHub foarte repede.

Apoi vom instala Heroku CLI, care ne va ajuta să implementăm aplicația chiar de la terminalul nostru. Click aici pentru a obține instrucțiuni de instalare atât pe macOS, cât și pe Windows.

$ heroku login

Introduceți datele de conectare pentru Herkou și apoi:

$ heroku create

Aceasta va crea o aplicație pentru dvs. Dacă vizitați tabloul de bord Heroku acum, va avea aplicația acolo.

Acum trebuie să ne asigurăm că avem un folder de construcție în proiectul nostru înainte de a împinge proiectul către depozitul Heroku. Adăugați scriptul de mai jos în package.json fişier.

"scripts": {    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently "npm run server" "npm run client"",
    "heroku-postbuild":      "NPM_CONFIG_PRODUCTION=false npm install --prefix client        && npm run build --prefix client"  },

După ce faceți acest lucru, salvați fișierul și împingeți întregul depozit de proiect în ramura aplicației Heroku.

//add remote
$ heroku git:remote -a application-name
$ git add .
$ git commit -am 'prepare to deploy'
$ git push heroku master

Și asta ar trebui să fie.

Odată ce toate acestea vor fi făcute, veți obține o adresă URL pentru proiectul găzduit live. Distribuiți și prezentați ce puteți construi folosind aceste tehnologii.

Dacă aveți întrebări sau comentarii, nu ezitați să adăugați comentariul sau să vă conectați direct.

Github: https://github.com/ashishcodes4

Stare de nervozitate: https://twitter.com/ashishnandansin

LinkedIn: https://www.linkedin.com/in/ashish-nandan-singh-490987130/