Servire un'app React con Node.js ed ExpressJS

  • Node.js
  • Gabriele Romanato

In questo articolo vedremo come riuscire a servire un'app React usando ExpressJS. Si tratta di una soluzione che si adatta allo scenario in cui abbiamo l'app e le API sotto lo stesso dominio.

Per prima cosa creiamo una directory all'interno del progetto in ExpressJS:

cd api-project
mkdir app

Ora compiliamo l'app React per avere le asset statiche all'interno della directory dist.

npm run build

Quindi copiamo le asset dalla directory dist nella directory app creata in precedenza.

cp -r react-app/dist/* api-project/app

Dobbiamo modificare il codice dell'app in ExpressJS in modo che la directory venga riconosciuta e che le richieste all'URL principale del dominio servano il file index.html contenuto nella directory stessa.

'use strict';

const path = require('path');
const express = require('express');
const apiRoutes = require('./routes');
const app = express();
const PORT = process.env.PORT || 3000;

app.disable('x-powered-by');
app.use(express.static(path.join(__dirname, 'app')));
app.use('/api', apiRoutes);

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

app.listen(PORT);

Tramite il metodo use() andiamo a definire i percorsi delle asset statiche e quelli delle API (queste ultime sotto il percorso base /api).

Invece quando ci si collega alla home page, indicata dal percorso /, verrà servito il file index.html della nostra app React, separando così l'app dalle API su cui è basata e mantenendo entrambe sotto lo stesso dominio.

Conclusione

Quando un'app React e le sue API devono risiedere sullo stesso dominio, la tecnica mostrata sopra si rivela essere estremamente utile anche perché si possono creare script che automatizzano la sincronizzazione dei file dopo il build in React.

Torna su