Deploy Create React App con Surge

D

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:

  1. 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
  2. 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.

 

A proposito di me

Dario Frongillo

Software architect con un forte background in Java, Architettura REST, framework Spring , Database Design,progettazione e sviluppo di SPA e RIA Web application con framework Javascript. Attualmente mi occupo di sviluppo soluzioni software in ambito Banking e Finance: in particolare progettazione e sviluppo di applicativi web based per la realizzazione di sistemi di trading, interfacce con i mercati finanziari e di servizi real time.

Di Dario Frongillo

Gli articoli più letti

Articoli recenti

Commenti recenti