Articolo originale: https://www.freecodecamp.org/news/how-to-create-a-react-app-with-a-node-backend-the-complete-guide/

Un front end React collegato a un back end Node è una combinazione solida per realizzare qualsiasi applicazione.

Questa guida è stata pensata per aiutarti a creare progetti full-stack con React nel modo più semplice possibile.

Vediamo come impostare da zero un intero progetto con React e Node e come distribuirlo sul web.

Strumenti necessari

  1. Assicurati che Node e NPM siano installati sul tuo computer. Puoi scaricarli entrambi da nodejs.org (NPM è incluso nell'installazione di Node)
  2. Utilizza un editor di codice di tua scelta. Io sto usando e personalmente consiglio di usare VSCode. È possibile scaricare VSCode all'indirizzo code.visualstudio.com.
  3. Assicurati di avere Git installato sul computer. Questo è necessario per distribuire la nostra applicazione con Heroku. È possibile ottenerlo all'indirizzo git-scm.com
  4. Un account su heroku.com. Utilizzeremo Heroku per pubblicare la nostra applicazione sul web in modo completamente gratuito.

Nota: dal 28 Novembre 2022 il servizio gratuito di Heroku non sarà più disponibile.

Passo 1: Creare il back end Node (Express)

Per prima cosa, crea una cartella per il progetto chiamata react-node-app (per esempio).

Quindi, trascina la cartella nell'editor di codice.

Per creare il nostro progetto Node, esegui il seguente comando nel terminale:

npm init -y

Questo creerà un file package.json che ci permetterà di tenere traccia di tutti gli script dell'applicazione e di gestire le dipendenze di cui l'applicazione Node ha bisogno.

Il nostro codice server si troverà in una cartella con lo stesso nome: server. Creiamo questa cartella.

Al suo interno, collocheremo un singolo file, dal quale faremo partire il nostro server: index.js.

Utilizzeremo il framework Express per creare un semplice web server, che verrà eseguito sulla porta 3001 se non specificato alcun valore per la variabile d'ambiente PORT (Heroku imposterà questo valore quando distribuiremo la nostra applicazione).

// server/index.js

const express = require("express");

const PORT = process.env.PORT || 3001;

const app = express();

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Successivamente, installeremo Express come dipendenza eseguendo nel nostro terminale:

npm i express

Dopodiché, creeremo uno script in package.json che avvierà il nostro server web quando eseguiremo il comando npm start:

// server/package.json

...
"scripts": {
  "start": "node server/index.js"
},
...

Finalmente possiamo eseguire la nostra applicazione utilizzando questo script eseguendo npm start nel nostro terminale e dovremmo vedere che è in esecuzione sulla porta 3001:

npm start

> node server/index.js

Server listening on 3001
Clip 1

Passo 2: Creare un endpoint API

Vogliamo utilizzare il nostro server Node con Express come un'API, in modo che possa fornire dati alla nostra applicazione React, modificarli o eseguire altre operazioni che solo un server può fare.

Nel nostro caso, invieremo semplicemente un messaggio alla nostra applicazione React che dice "Hello from server!" in un oggetto JSON.

Il codice sottostante crea un endpoint per la rotta /api.

Se la nostra applicazione React effettua una richiesta GET a tale rotta, risponderemo (usando res, che sta per response) con il nostro dato in formato JSON:

// server/index.js
...

app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Nota: assicurati di posizionare questa funzione al di sopra della funzione app.listen.

Poiché abbiamo apportato delle modifiche al codice Node, dobbiamo riavviare il nostro server.

Per farlo, devi terminare lo script di avvio nel terminale premendo Command/Ctrl + C. Quindi devi riavviare eseguendo nuovamente npm start.

Per verificarlo, possiamo semplicemente visitare http://localhost:3001/api nel nostro browser e visualizzare il nostro messaggio:

Clip 2

Passo 3: Creare il front end React

Dopo aver creato il back end, passiamo al front end.

Apriamo un'altra scheda di terminale e usiamo create-react-app per creare un nuovo progetto React con il nome client:

npx create-react-app client

Dopo di che, avremo un'applicazione React con tutte le sue dipendenze installate.

L'unica modifica da fare è aggiungere una proprietà chiamata proxy al nostro file package.json.

Questo ci permetterà di fare richieste al nostro server Node senza dover fornire l'origine su cui è in esecuzione (http://localhost:3001) ogni volta che facciamo una richiesta di rete:

// client/package.json

...
"proxy": "http://localhost:3001",
...

Quindi possiamo avviare la nostra applicazione React eseguendo il suo script di avvio, che è lo stesso del nostro server Node. Per prima cosa assicuriamoci di fare un cd nella cartella client appena creata.

Dopodiché, si avvierà su localhost:3000:

cd client
npm start

Compiled successfully!

You can now view client in the browser.

Local:            http://localhost:3000
Clip 3

Passo 4: Effettuare richieste HTTP da React a Node

Ora che abbiamo un'applicazione React funzionante, vogliamo usarla per interagire con la nostra API.

Vediamo come recuperare i dati dall'endpoint /api che abbiamo creato in precedenza.

Per farlo, possiamo andare dal nostro componente App.js nella cartella src e fare una richiesta HTTP usando useEffect.

Faremo una semplice richiesta GET, utilizzando l'API Fetch, al nostro back end e ci verranno restituiti i dati in formato JSON.

Una volta che i dati ci saranno restituiti, otterremo la proprietà message (per avere il saluto che abbiamo inviato dal server) e la metteremo in una variabile di stato chiamata data.

Questo ci consentirà di visualizzare il messaggio nella nostra pagina, se presente. Utilizziamo una condizione nel JSX per dire che se i nostri dati non sono ancora presenti, deve essere mostrato il testo "Loading...".

// client/src/App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}

export default App;
Clip 5

Passo 5: Distribuire la app sul web utilizzando Heroku

Infine, distribuiremo la nostra applicazione sul web.

Per prima cosa, all'interno della nostra cartella client, assicuriamoci di rimuovere il repository Git che viene inizializzato automaticamente da create-react-app.

Questo è essenziale per distribuire la nostra applicazione, perché inizializzeremo un repository Git nella cartella principale del nostro progetto (react-node-app), non nel client:

cd client
rm -rf .git

Al momento del deployment, sia il back end Node che il front end React saranno serviti sullo stesso dominio (cioè mycoolapp.herokuapp.com).

Vediamo come saranno gestite le nostre richieste  dall'API di Node. Il nostro scopo è quello di visualizzare l'applicazione React quando viene richiesta dall'utente (per esempio, quando si va alla home page della nostra applicazione).

Possiamo farlo aggiungendo al file server/index.js il seguente codice:

// server/index.js
const path = require('path');
const express = require('express');

...

// Chiede a Node di servire i file per la nostra applicazione React
app.use(express.static(path.resolve(__dirname, '../client/build')));

// gestisce richieste GET per la rotta /api
app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

// Tutte le altre richieste di tipo GET non gestite dal metodo precedente, restituiranno l'applicazione REACT
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

Questo codice permetterà a Node di accedere al nostro progetto React di cui si è effettuato precedentemente un build, utilizzando la funzione express.static per i file statici.

Se arriva una richiesta GET che non è gestita dalla rotta /api route, il server risponderà con la nostra applicazione React.

Questo codice consente alle nostre applicazioni React e Node di essere distribuite insieme sullo stesso dominio.

Possiamo comunicare alla nostra applicazione Node come farlo aggiungendo uno script di compilazione build al file package.json del server, che costruisce la nostra applicazione React per la produzione:

// server/package.json

...
"scripts": {
    "start": "node server/index.js",
    "build": "cd client && npm install && npm run build"
  },
...

Consiglio anche di aggiungere un ulteriore campo chiamato "engines", in cui specificare la versione di Node che stiamo usando per costruire il progetto. Questa sarà usata per la distribuzione.

È possibile ottenere la versione di Node eseguendo node -v e inserire il risultato in "engines". (ad esempio 14.15.4):

// server/package.json

"engines": {
  "node": "la-tua-versione-di-node"
}

Dopo di che, siamo pronti a eseguire il deployment utilizzando Heroku. Assicuriamoci di avere un account su Heroku.com.

Una volta effettuato l'accesso e visualizzata la dashboard, dovremo selezionare New > Create New App e fornire un nome univoco all'applicazione.

Una volta fatto ciò, dovremo installare la Heroku CLI sul nostro computer, in modo da poter distribuire l'applicazione ogni volta che apportiamo modifiche utilizzando Git. È possibile installare la CLI eseguendo:

npm i -g heroku

Una volta installata, dobbiamo accedere a Heroku tramite la CLI utilizzando il comando heroku login:

heroku login

Press any key to login to Heroku

Una volta effettuato l'accesso, è sufficiente seguire le istruzioni di distribuzione per l'applicazione creata nella scheda "Deploy".

Con i quattro comandi seguenti, inizializzeremo un nuovo repository Git per il nostro progetto, vi aggiungeremo dei file, ne faremo il commit e inseriremo una destinazione remota Git per Heroku.

git init
heroku git:remote -a insert-your-app-name-here
git add .
git commit -am "Deploy app to Heroku"

L'ultimo passo consiste nel pubblicare la nostra applicazione, effettuando il push del commit sul Git di Heroku appena aggiunto:

git push heroku master

Congratulazioni! La nostra applicazione full-stack React e Node è in funzione! 🎉

Clip 5

Quando desideri apportare modifiche all'applicazione (e distribuirle), è sufficiente utilizzare Git per aggiungere i file, eseguire il commit e quindi eseguire il push sul nostro sito Heroku:

git add .
git commit -m "my commit message"
git push heroku master

Grazie per aver letto questo articolo!

Buona programmazione.