Ciao a tutti coders,
nell’articolo di oggi vi mosterò come deployare un applicazione react sviluppata con create react app in 30 secondi.
Hai appena sviluppato il tuo frontend e hai bisogno che la tua applicazione vada live nel minor tempo possibile per poter fare una demo ad un tuo collega o cliente? Configurare una VPS con relativi servizi o immagine docker può far perdere tempo e soldi e tutto questo per una demo non è necessario. Surge SH è la tua soluzione:
- è gratis;
- impieghi 30 secondi per far andare live la tua wep app;
Surge sh è un servizio che ti permette di pubblicare il tuo frontend gratis e velocemente. Gli step da seguire sono i seguenti:
Installa Surge
npm install -g surge
Lancia il build della tua app
cd your-react-project npm run build
Una volta lanciati i comandi di build, nella root del tuo progetto verrà creata la cartella build contenente il build della tua Single Page Application.
Pubblica la tua app con il servizio Surge sh
A questo punto ci siamo, basterà posizionarsi all’interno della cartella di build
cd build
e lanciare da shell il seguente comando adibito alla pubblicazione della tua webapp
surge
Se è la prima volta che utilizzi surge dovrai creare un account da prompt: aggiungi una mail e password e conferma la registrazione.
Project Path
Surge ti presenterà da prompt il path corrente poichè assume che il path da cui stai lanciando il comando sia la directory che vuoi pubblicare. Se hai lanciato il comando surge dalla directory /build conferma il path di default.
Dominio
Dopo che hai confermato il path Surge sh ti proporrà un dominio random per la tua web, Se il dominio proposto non è di tuo gradimento potrai proporre al servizio un dominio che termina con .surge.sh.
A questo punto il servizio confermerà l’avvenuto deploy della tua web app riportando l’url!
Dominio Custom
Surge sh gestisce in maniera eccezionali anche la pubblicazione di web app utilizzando il proprio dominio. Tutto questo in pochissimi step:
- Dopo aver lanciato il comando surge e confermato il path, occorre cancellare il dominio random proposto digitando il proprio dominio come ad esempio marcorossi.com . A questo punto Surge sh ti confermerà che ha appena pubblicato la tua web app all’url marcorossi.com
- A questo punto occorrerà configurare il tuo DNS accedendo alla sezione di gestione DNS che offre ogni provider aggiungendo il record CNAME al tuo dominio per @ e www con hostname na-west1.surge.sh .
NB: Alcuni provider non supportano CNAME con apex domain; in questi casi anzichè configurare il DNS come riassunto nello step 2, si può procedere configurando il DNS con record di tipo A con hostname 45.55.110.124 . Una volta configurato il DNS aspetta qualche secondo e la tua app sarà live sotto il tuo dominio.
Eccezionale! In meno di un minuto la tua wep app è online.
Github Pages vs Surge
Un accanito fan di Github potrebbe dire: perche’utilizzare Surge invece di Github pages?
Inanzitutto introduciamo GitHub Pages per chi non lo conosce, con questo servizio di github e’ possibile deployare un sito web a partire da un repository github. Molte organizzazioni usano questo servizio per l’hosting di documentazioni e demo. Create React App e’ perfettamente integrato con github pages: per chi fosse interessato riporto il LINK alla documentazione ufficiale.
Github Pages si presenta perfetto per chi usa come repository github dove con pochi sforzi riesci a configurare la Continuos integration del tuo repository per auto-deployare la tua web app ad ogni commit sul repository.
Il motivo che mi ha spinto ad utilizzare Surge sono sostanzialmente due:
- Indipendenza dal servizio di hosting e versioning: Per i progetti di lavoro non utilizzo github ma bitbucket e quindi ho dovuto scartare a priori github. E’ un vincolo troppo forte obbligare ad avere il tuo repository su github per utilizzare questo servizio. Surge e’ indipendente dal repository: addirittura puoi anche non averlo e ad esempio deployare web app versionate con svn.
- Velocitá: Entrambi i servizi sono molto semplici ma sicuramente Surge in termini di operazioni per configurare e deployare il sito e’ molto piu veloce e immediato. Per farvi un idea di confronto vi consiglio di leggere il seguente LINK dove vengono contati gli step necessari per il deploy con Githib Pages e Surge: ben 44 step per Github e 5 step per Surge.
