Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Nov 10
build e rilascio in produzione con Express ReactJS

ReactJS: build e rilascio in produzione con Express

  • 10/11/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • express, react, reactjs, web app

Hai sviluppato il tuo progetto con ReactJS ed ora vuoi avere un codice ottimizzato per produzione. La fase di build e rilascio in produzione non è una cosa da sottovalutare. In questo articolo ti farò vedere qual’è il passo successivo che devi attuare per avere un codice ottimizzato e performante.

Se ancora non ti senti a tuo agio con ReactJS potresti dare un’occhiata alla guida su come imparare ReactJS.

Build e rilascio in produzione con Express

In questa guida darò per scontato che conosci ReactJS a pieno e che hai iniziato il tuo progetto o da zero o sfruttando create-react-app.

Il punto focale sta nel fatto che, chi come me utilizza Heroku per pubblicare le web app, senza una configurazione starà eseguendo sia in locale che sulla piattaforma sempre il comando “npm run start”.

Questo comando, che spesso va a richiamare lo script “react-scripts start”, non fa altro che creare una build di development corredata da source maps e tira su un WebpackDevServer.

Quello che vogliamo fare noi è creare una build ottimizzata per produzione e capire come funziona Express.

Development Category (English)728x90

Da dove parte tutto?

Il motivo reale per cui ho creato questa guida sta nel fatto che moltissime persone ancora non capiscono bene come rilasciare il proprio codice, non sanno nemmeno che viene creata una build, e non comprendono l’importanza della fase di build e rilascio in produzione.

Inoltre mi chiedono come devono fare per eliminare i source maps generati dalla build della web app.

I source maps sono molto comodi per attività di debug ed assistenza, ma senza entrare nel merito di quale sia la migliore strada da intraprendere, in questa guida voglio farti vedere come puoi gestire tutte queste logiche.

Deep Learning Specialization on Coursera

Il bello di create-react-app infatti è che è un progetto totalmente indipendente dalla piattaforma sulla quale andremo a fare il rilascio o del modo in cui lo facciamo.

Vediamo insieme quindi cos’è Express e capiamo come migliorare la fase di build e rilascio in produzione di una web app.

Cos’è Express?

Express è un framework per applicazioni web su NodeJS che oltre a fornire tante funzioni avanzate lasciando intaccato Node, è in grado specialmente di gestire le chiamate che vengono fatte da un client al nostro server Node.

Il risultato che vogliamo ottenere è creare un server Express che risponda a tutte le chiamate alla nostra applicazione lasciando integrate le routes e fornendo una build ottimizzata per produzione.

Cosa utilizziamo?

Per prima cosa questa guida darà per scontato che utilizzi react-scripts per generare la build, per far partire Node, per far girare i tests, ecc.

Di conseguenza, se non lo hai già, puoi installare react-scripts:


npm install --save react-scripts

Questo passaggio non devi farlo se hai creato la tua applicazione ReactJS con create-react-app.

Detto ciò ora è necessario installare Express:


npm install --save express

Dunque installeremo anche Path e Compression:


npm install --save path

npm install --save compression

Cos’è Path?

Path ci permette tramite il metodo join di creare un path verso i file che ci interessano preoccupandosi lui dei separatori specifici a seconda della piattaforma su cui eseguiamo la web app.

Cos’è Compression?

Compression ci permette di eseguire il deflate e la compressione GZIP dei nostri file tanto amata da Google.

Build e Rilascio in Produzione

A questo punto devi creare nella root del tuo progetto un file denominato server.js.

Una volta creato questo file al suo interno andremo a scrivere il seguente codice che ti spiego in seguito:

const express = require('express');
const path = require("path");
var compression = require('compression');

const server = express();

server.use(compression());

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

server.get('*', (req, res) => {


	if (req.url.indexOf("/external/") === 0 || req.url.indexOf("/css/") === 0 || req.url.indexOf("/media/") === 0 
		|| req.url.indexOf("/js/") === 0 || req.url.indexOf(".js") === 0 || req.url.indexOf(".css") === 0
		|| req.url.indexOf(".map") === 0) {
		res.setHeader("Cache-Control", "public, max-age=2592000");
		res.setHeader("Expires", new Date(Date.now() + 2592000000).toUTCString());
	}

	res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

server.listen(process.env.PORT || 9443);

console.log("Server running on port:", process.env.PORT || 9443);

Quello che stiamo facendo, in ordine, è:

  • Importare express
  • Importare path
  • Infine importare compression
  • Dunque creiamo il server
  • Diciamo al server di utilizzare la compressione
  • Dunque diciamo di prendere staticamente i file contenuti nella cartella “build”
  • Quindi per ogni richiesta che arriva al server (per ogni url chiamato)
  • Per prima cosa controlliamo se abbiamo un file con un url per la quale vogliamo impostare Cache-Control ed Expires
  • Infine inviamo come risposta al client il file index.html presente nella cartella “build”
  • Per concludere impostiamo la porta sulla quale rimane in ascolto Express scegliendo tra la porta definita nell’environment di Node o la porta 9443
    Solitamente la seconda scelta è quella che viene effettuata durante l’esecuzione in locale

Il file package.json

Adesso dobbiamo mettere mano al file package.json.

Dobbiamo creare uno script che vada ad eseguire il nostro server.

Come avrai notato il nostro server richiede che la build sia già presente quindi il nostro script dovrà creare la build e poi, in maniera sequenziale, far partire il server.

Lo script che utilizzo spesso è il seguente:


"production": "react-scripts build && node server.js"

Le due & servono ad indicare che dovrà essere eseguita prima la build e solo dopo dovrà andare in esecuzione il server.

Come elimino le source maps?

Per eliminare le source maps ci sono due modi.

Il primo consiste nel chiamare lo script di build con una variabile di ambiente:


"build-no-sourcemaps": "GENERATE_SOURCEMAP=false react-scripts build"

Un altro modo consiste nel creare uno script di questo tipo:


"delete-map-files": "find ./build/static/js -name '*.map' -delete"

Utilizzi Heroku e hai l’errore R14?

L’errore R14 può presentarsi nei piani Free ed Hobby visto il limite di RAM.

Questo vuol dire che puoi creare uno script di questo tipo:


"delete-map-files": "find ./build/static/js -name '*.map' -delete",
"production": "npm run delete-map-files && node server.js"

Poi devi creare un file chiamato “Procfile” senza estensione nella root del progetto contenente:


web: npm run production

Questo sarà il “goal” che Heroku chiamerà.

L’unica pecca è che dovrai eseguire il push anche della cartella “build” che dovrai generarti in locale.

Heroku infatti esegue lo script “production”. In questo caso eliminerà (ma è facoltativo) i source maps e poi farà partire il server. Il server si aspetta che già la cartella di build sia presente.

Conclusioni

Come avrai capito i react-scripts creano un server che risponde alle chiamate fatte dai client.

Noi stiamo facendo la stessa cosa, utilizzando Express al posto di WebpackDevServer, ed andiamo ad abilitare la compressione.

Ora sai come fare la build e rilascio in produzione con Express!

Inoltre sappiamo impostare la cache del browser e, tanto di guadagnato, abbiamo scoperto anche due modi per eliminare i source maps (che sia questo sbagliato o meno).

Se vuoi approfondire ReactJS con dei libri ti consiglio questo articolo.

Vuoi scoprire anche altro sulla programmazione? Guarda questo articolo.

Se vuoi iscriviti alla newsletter e non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy ? .

Per dubbi o domande scrivimi nei commenti ? .

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).

Prossimi 2 articoli della guida: Come scrivere i test in JavaScript e ReactJS: come testare i componenti React con Enzyme e Jest

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

    Fammi sapere cosa ne pensi :) Annulla risposta

    Impara ReactJS imparare react
    I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
    Newsletter

    Seguimi su Facebook :)

    Facebook Pagelike Widget
    Impara React Native imparare react native
    10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
    Impara a Creare un Tema Wordpress imparare creare tema wordpress
    Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
    UX: Perché la User Experience è Importante UX importante e cos'è
    Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
    Libri per Imparare JavaScript Imparare JavaScript libri

    Articoli recenti

    • I principali engine utilizzati per lo sviluppo di videogiochi
    • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
    • 8 consigli per migliorare la tua SEO Locale

    Categorie

    • CSS
    • Interviste
    • Java
    • Lavoro
    • Normative
    • Personale
    • Programmazione
    • Strategia & Marketing
    • Tech
    • Web Design
    • Wordpress
    Paolo Dell'Aguzzo
    Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
    P. IVA: IT02758450429
    Mail: info@paolodellaguzzo.com
    Via Litoranea, 284/C - Marotta (PU)
    Privacy Policy
    Cookie Policy
    In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
    Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
    Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku