Ciao 🙂

In questo articolo ti spiego come fare il deploy della tua prima applicazione ReactJS con Heroku e come configurare Git su Eclipse.

Il processo è identico per qualsiasi altro linguaggio e progetto di partenza, quindi non focalizzarti troppo sul fatto che io userò il progetto di partenza per applicazioni ReactJS 🙂

Primo passo

Ti consiglio di crearti una cartella nel punto dove ti rimane più comodo in modo tale da non perderti. Mi raccomando per app ReactJS, AngularJS, ecc. assicurati di avere installato NodeJS e NPM.

La prima cosa che ti chiedo è se hai già letto l’articolo Come Registrarsi e Come Iniziare con Heroku. Dopo aver letto e visto il video di questo articolo infatti dovresti avere la giusta manualità.

Dunque se hai seguito l’articolo precedente sai come fare il login ad Heroku e sei pronto per seguire questa guida messa a disposizione da Heroku: vai all’indirizzo.

Come puoi vedere il procedimento è davvero semplice. Puoi ripeterlo con AngularJS o qualsiasi altra cosa. Per Java, Python, ecc. trovi la configurazione già pronta in Heroku (guarda la guida di Heroku per Java: clicca quì).

Prova l’applicazione

Bene, ora hai la tua applicazione. Nel mio caso ho utilizzato come già detto ReactJS con “create-react-app”. Per vedere la tua applicazione funzionante esegui questi passi:

1. Apri il terminale
2. Posizionati nella cartella dove hai messo il progetto
3. Scrivi “heroku login”
4. Inserisci la mail
5. Inserisci la password
6. Scrivi “heroku open”

A questo punto dovrebbe aprirsi in automatico la finestra del browser rimandandoti all’indirizzo del tuo spazio su Heroku e facendoti visualizzare il sito.

Modifica in locale

Ora utilizza un editor di testo, io utilizzo Sublime Text, e fai qualche modifica alla tua applicazione (magari cambia una scritta nel file App.js).

Dunque per vedere le modifiche in locale scrivi nel terminale:

1. npm install
2. heroku local (va bene anche npm run start)

Avendo prima fatto il login ad Heroku da terminale in automatico sono state salvate le chiavi per l’accesso a Git. Quindi da terminale dovresti riuscire senza problemi a fare queste operazioni:

1. git add .
2. git commit -am “Commit di prova”
3. git push (o git push heroku master)

Se hai il terminale impegnato per eseguire l’applicazione apri un altro terminale, posizionati nella cartella del progetto, lancia un “heroku login” ed esegui questi ultimi comandi Git in questa nuova finestra.

Controlla la Dashboard Heroku

Una volta fatto ciò controlla con “heroku open” se vedi le modifiche che hai pushato, nel caso in cui non le vedi entra nella dashboard di Heroku a questo link e osserva le ultime attività.

La Dashboard sarà sempre utile per monitorare le applicazioni, di conseguenza tienila sempre aperta.

Configurazione Eclipse con Git

Se fino a quì è andato tutto bene apri Eclipse. Dunque utilizza il plugin del marketplace per l’integrazione con Git che preferisci ed inserisci l’url di Git del tuo progetto. L’url la puoi trovare nella dashboard di Heroku sotto al tab “Settings”.

Ora devi inserire user e password. Per come funziona Heroku lo user puoi lasciarlo o vuoto o scrivere qualche lettera casuale. Come password devi inserire la tua API Key personale che puoi trovare nel tuo account, passa da questo indirizzo.

Ogni volta che vorrai fare un push, pull, ecc. e ti verrà richiesto user e password dovrai inserire come password questa API Key. Puoi scegliere di impostare GIT per non chiedere lo user obbligatoriamente, altrimenti inserisci sempre come user qualcosa di casuale e vai avanti. L’importante è che la password sia l’API Key.

Conclusioni

La cosa più importante inizialmente è imparare a fare il setup e riuscire a fare commit, pull e push anche da terminale. Dopo di che ricordati questo piccolo inganno dello user mentre utilizzi Git da Eclipse con Heroku. Molte persone all’inizio non capiscono perché non riescono ad autenticarsi.

Nei prossimi articoli costruirò parti di applicazioni ReactJS e parlerò della costruzione di gestionali sfruttando anche Java e database PostgreSQL.

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