Creare web app su Hosting Node JS con Heroku
Se stai leggendo questa guida sicuramente è perché sei attratto dall’informatica e dalla programmazione. Di conseguenza, se segui ciò che scrivo, avrai già letto in qualche altro mio post, che non mi piace molto trascurare i principi cardine di un argomento all’intuizione o a pareri personali. Quindi, anche se rischio di essere un tantino noioso e scontato, cercherò di riprendere l’argomento su Node JS definendo, da subito, un aspetto molto importante, che riguarda lo sviluppo di web application, e cioè, il significato del termine “deploy” che analizzerò nel dettaglio spiegandoti come sia possibile sviluppare e creare web app su Hosting Node JS con un servizio formidabile come Heroku.
Indice del Post...
1. Cos’è Node JS
Negli ultimi anni, Node JS è risultato essere il linguaggio più adatto per sviluppare applicazioni web, e questo per una buona ragione. Node JS ti permetterà di eseguire Javascript lato server cosa, questa, non da poco.
Dopo averlo usato per un pò, capirai anche il perché. Non solo è costantemente aggiornato e in linea con gli ultimi aggiornamenti e progressi di JavaScript, ma il suo sistema di esecuzione asincrona del codice gli consente di elaborare rapidamente grandi quantità di informazioni senza l’uso di thread che, solitamente, rendono il codice più complesso da gestire. Alcuni hanno già creato applicazioni con Node JS e se lo hai fatto anche tu, ti sarai sicuramente posto questa domanda: “Cosa devo fare per distribuire la mia applicazione Node JS”? Tranquillo, non è una domanda banale.
Se cerchi su Google, ti renderai subito conto che esistono molte opinioni e approcci diversi a riguardo, ma ognuno sembra essere più complicato dell’altro. A questa domanda c’è una sola risposta: “Heroku”. Ma adesso cerchiamo di capire cos’è Heroku e come può aiutarti a distribuire e a sviluppare web app con Node JS.
Leggi anche: Javascript Local Storage: Il browser come datastore
2. Cos’è e a cosa serve Heroku
Se ami Node JS e cerchi una piattaforma di hosting semplice da usare, flessibile e senza limiti per sviluppare un’applicazione, devi assolutamente conoscere Heroku. Heroku è un PaaS (Platform as a Service) che ti consente di sviluppare e di concentrarti solo sugli aspetti importanti dello sviluppo. Insomma, ti permetterà di concentrarti solo sulla creazione dell’applicazione stessa invece di passare il tempo a preoccuparti della configurazione del server o di problemi legati alla scalabilità e quant’altro. Ma vediamo come può esserti di aiuto Heroku nello sviluppo di un’applicazione con Node JS.
3. Sviluppare con Node JS e Heroku
Node JS e Heroku è l’accoppiata vincente per il tuo sito web se vuoi liberarti da ulteriori preoccupazioni lasciando, che questo fantastico servizio, si occupi dei server e della loro configurazione. Operazione complicata e dispendiosa, in termini di tempo, per chi non è troppo ferrato in materia o e alle prime armi con questa tipologia di sviluppo. Ma vediamo, ora, come sviluppare la tua prima applicazione web con Node JS e Heroku.
3.1 Installa Node JS
Beh, il requisito fondamentale necessario, prima di procedere con la creazione di un’applicazione, è installare Node JS. La cosa è più semplice del previsto. Basta raggiungere la sua homepage, scaricare ed eseguire il pacchetto di installazione relativo al tuo sistema operativo.
È buona norma, dopo l’installazione di ogni software, verificarne la corretta esecuzione. Pertanto, apri il prompt dei comandi e digita questa istruzione: “node -v“. Se il sistema visualizzerà la versione di Node JS installata significa che tutto è andato per il verso giusto.
3.2 Installa Visual Studio Code
Un altro requisito fondamentale necessario è l’installazione di un editor di testi evoluto per lo sviluppo. L’unico degno di nota è Visual Studio Code. Te ne ho già parlato in un’altra mia guida a riguardo.
Leggi anche: 5 alternative open source to Visual Studio Code di Microsoft
Tuttavia, l’installazione di Visual Studio Code è semplice tanto quanto quella di Node JS. Anche qui, non ti resta che raggiungere la sua homepage, cliccando su questo link, e scaricare ed eseguire il pacchetto di installazione relativo al tuo sistema operativo.
Anche in questo caso, è buona norma, verificare la corretta installazione di Visual Studio Code. Pertanto, apri il prompt dei comandi e digita questa istruzione: “code -v“. Se il sistema visualizzerà la versione di Visual Studio Code installata significa che tutto è andato per il verso giusto.
3.3 Crea la tua applicazione Node JS
Ok, siamo pronti. Ora, crea una cartella sul desktop e, per semplicità, la chiameremo “HelloWorld. Adesso apri Visual Studio Code, cliccando sull’icona presente sul desktop, clicca sul pulsante “Apri cartella” e seleziona “HelloWorld”.
Beh, a questo punto non ti resta che creare il file index.js nel quale digiteremo le istruzioni necessarie per visualizzare il classico “Hello World…!”. Quindi, espandi la cartella “HelloWorld”, presente in Visual Studio Code, cliccando sulla freccia in basso disponibile accanto al nome della cartella stessa. Successivamente, clicca sull’icona riportante il simbolo del ‘+’, digita ‘index.js’ e premi il tasto INVIO.
Adesso, copia e incolla il seguente codice all’interno del file index.js:
var http = require('http');
http.createServer(function (req, res) {
res.write('Hello World!');
res.end();
}).listen(3000, function(){
console.log("server start at port 3000");
});
3.4 Esegui la tua applicazione Node JS
Beh, dopo tanto duro lavoro penso tu voglia vedere all’opera il tuo codice Node JS? Penso proprio di sì. Quindi, riapri il prompt dei comandi, spostati nella cartella HelloWorld, presente sul desktop, e digita il comando “node index.js” seguito dal tasto INVIO.
A questo punto il tuo server web, creato con Node JS, è pronto e risponde sulla porta 3000. Non ti rimane che aprire il tuo browser web preferito e puntare all’indirizzo: http://localhost:3000, e il saluto “Hello World…!” verrà visualizzato all’interno della finestra attiva del browser.
4. Il deploy di una web app Node JS con Heroku
Il termine “deployment” è già stato definito più volte in contesti di sviluppo di applicazioni web, ma sempre, con un’accezione limitata. In senso abbreviato, e meno tecnico, si intende generalmente il trasferimento di uno o più file dal server dello sviluppatore (la macchina dove solitamente avviene lo sviluppo) a un server di produzione (la macchina che ospiterà il sito web una volta terminato).
Una delle difficoltà, affrontate dai principianti nella programmazione web, è la scelta dell’ambiente server, che può essere piuttosto complessa, perché dipende da una serie di aspetti tecnici e funzionali che caratterizzeranno il software. Questo problema non è nuovo, ma è importante sapere che esistono soluzioni gratuite, molto efficienti, che ti aiuteranno a distribuire la tua applicazione online.
Heroku, infatti, è un’ottima piattaforma per il deployment, se vuoi registrarti per la prima volta e non sai come fare, in questa guida ti spiegherò tutti i passaggi per creare e distribuire la tua applicazione Node JS con questo straordinario servizio.
4.1 Registrati e accedi a Heroku
Il primo è necessario step è registrarti su Heroku. La procedura è simile a tanti altri siti web che prevedono l’autentica dell’utente prima di concedere l’accesso ai servizi offerti. Quindi, Clicca su questo link. La pagina che vedrai corrisponde alla homepage del portale di Heroku. Da questa posizione avrai accesso a tutti i servizi che il portale ti mette a disposizione. Prima però è necessario autenticarsi, per fare ciò, è necessaria la registrazione come nuovo utente.
Se sei già registrato clicca sul link “Log in” altrimenti clicca sul pulsante “Sign in” e procedi con la registrazione come nuovo utente. La maschera che vedrai la devi compilare in tutte le sue parti, terminata la compilazione del form di registrazione, puoi cliccare sul pulsante “Create Free Account”. Subito dopo riceverai una email di conferma con la quale attiverai il tuo account gratuito a Heroku.
Terminata la fase di registrazione, puoi cliccare sul pulsante “Log in” per accedere alla piattaforma. Inserisci “email” e “password” indicati in fase di registrazione e clicca sul pulsante “Log in”.
È facile che Heroku ti chieda di confermare l’accesso inserendo il codice OTP, configurato, ad esempio tramite l’app “Free OTP” o “Google Authenticator” (a te la scelta), in fase di registrazione al portale. Dopo aver inserito il codice di verifica clicca sul pulsante “Verifica”.
A questo punto sei autenticato in Heroku e potrai accedere liberamente a tutti i servizi offerti dal portale.
4.2 Crea l’app su Heroku
Riapri Visual Studio Code con il file index.js aperto e pronto a modifiche nell’editor. Dalla finestra del terminale di Visual Studio Code digita il comando: “npm init” e premi INVIO ad ogni sua richiesta. Terminata la fase di esecuzione del comando troverai il file “package.json” nella stessa cartella del file index.js.
Adesso, apri il file package.json e modificalo inserendo le seguenti righe di codice:
{
"name": "heroku",
"version": "1.0.0",
"description": "",
"main": "index.js",
"start": "node index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "",
"license": "ISC"
}
Ora, recati nuovamente sulla homepage di Heroku e clicca sul pulsante “Create new app”. Specifica il nome dell’app, scritto tutto in minuscolo, scegli il tuo stato di appartenenza e clicca sul pulsante “Create app”.
Considera che potrai anche cambiare il nome dell’app che creerai con Heroku, ma è necessario che sia un nome univoco all’interno del suo container per una determinata regione o stato. Pertanto dopo aver digitato il nome dell’app, Heroku, ti darà l’esito positivo o meno circa la possibilità di creare un app con quel nome e restituirà il messaggio: “helloworld-node is available” .
4.3 Scarica e installa Heroku CLI
A questo punto è necessario scaricare Heroku CLI, la console dei comandi di Heroku da terminale. Dopo aver cliccato sul link “Download and install Heroku CLI”, potrai scaricare quella più adatta al tuo sistema operativo, terminato il download potrai installarla.
4.4 Distribuisci la tua app su Heroku
Terminata l’installazione, di Heroku CLI, torna nuovamente a Visual Studio Code e nella finestra del temrinale digita questo comando: “heroku login” seguito dalla pressione del tasto INVIO. Il comando heroku login ti chiederà se vuoi loggarti tramite il browser, se sarà questa la tua scelta, cliccherai nuovamente il tasto INVIO e il browser si aprirà alla pagina di login di Heroku. Ora non ti resta che cliccare sul pulsante “Login”, presente nella pagina di login di Heroku nel browser, senza la necessità di reinserire username e password.
Heroku sfrutta GIT come sistema di versioning del codice. Ed è proprio tramite GIT che l’applicativo web viene trasferito su Heroku. Logicamente, prima di proseguire, è necessario installare GIT. Per farlo basta cliccare su questo link è scaricare la versione adatta al tuo sistema operativo. Dopo aver installato GIT, e sempre dal terminale di Visual Studio Code, digita questi comandi:
git init heroku git:remote -a helloworld-node git add . git commit -am "qui un tuo messaggio ad ogni commit…” git push heroku master
Terminata l’esecuzione di questi comandi e soprattutto del comando “git push heroku master” la tua app sarà disponibile su Heroku e avviabile liberamente cliccando sul link fornito dal comando stesso nella finestra del terminale di Visual Studio Code. Il link avrà, per questa app, questo aspetto: “https://helloworld-node.herokuapp.com”. Ora, copia e incolla questo URL nella casella degli indirizzi del browser e vedrai magicamente la tua app “helloworld-node” prendere vita.
È importante puntualizzare che, ad ogni modifica del codice sorgente e dopo ogni comando git commit –am “tuo messaggio…”, va sempre ripetuto anche il comando “git push heroku master”. Questo è necessario per riflettere immediatamente le modifiche apportate al codice sorgente locale con quello presente su Heroku.
5. Conclusioni
Spero di esserti stato utile ed esaustivo. Ho cercato di spiegarti, nel modo più semplice possibile, il sistema utilizzato dai professionisti del software. Lo sviluppo professionale del software è un’arte che va applicata secondo regole ben precise utilizzando strumenti avanzati come Heroku. Ti consiglio di rivedere più volte i passaggi trattati in questa guida per focalizzarli al meglio ed apprendere al massimo la tecnica che quotidianamente praticano gli sviluppatori professionisti.
Leggi anche: Come diventare Full Stack Developer con Node Js ed Express Js
