Come fare il Deploy di un applicativo Angular su Heroku

Come fare il Deploy di un applicativo Angular su Heroku

Avendo implementato altre app Angular in Heroku, spiego nel dettaglio come ho fatto.

Questo articolo ti mostrerà come distribuire facilmente le tue app Angular su Heroku, cosa più importante, evitando le insidie ​​più comuni.

Questo non è un tutorial per aiutarti ad imparare Angular. Si presume che tu abbia completato lo sviluppo della tua applicazione e sia pronto per l’implementazione. Tuttavia, installeremo il progetto Angular di base e seguiremo tutto il processo, dall’inizio alla distribuzione. Questo tutorial coprirà:

  • Creazione di un progetto Angular di base
  • Settaggio del deploy automatico da GitHub a Heroku
  • Deploy dell’app angular sui server di Heroku

Setup della tua applicazione Angular

Utilizzando l’Angular CLI, lancia il seguente comando da terminale:

ng new demo-deploy

La nostra applicazione si chiamerà demo-deploy. Attendi qualche minuto ed il progetto verrà inizializzato insieme ai pacchetti npm.


Lancia l’applicazione

Spostati nella cartella del progetto e lancia l’app con i seguenti comandi (verrà aperta una scheda nel browser al seguente link http://localhost:4200):

cd demo-deploy
ng serve
Demo di un’applicazione Angular

Abbiamo verificato che la nostra applicazione Angular stia “runnando” in locale. Ora prepariamoci ad effettuare l’upload del codice sui repository GitHub (assicurati di avere un account, in caso contrario registrati e poi ritorna qui).

Carica il tuo codice su GitHub

Esegui le seguenti righe di comando sul terminale del tuo computer:

git remote add origin <new_github_repository_url>
git add .
git commit -m "initial commit"
git push -u origin master

Ora la nostra App è presente su GitHub.

Setta il deploy automatico da GitHub a Heroku

Il vantaggio di questo passaggio è che, una volta apportata una modifica al repository github, questa verrà automaticamente trasferita alla code-base presente su heroku, che diventerà effettiva automaticamente sul web. Ciò significa che dovrai solo trasferire le tue modifiche su github per completare il processo di deploy.

Se non hai ancora un account, creane uno sul sito Web di heroku. È gratis. Accedi alla tua dashboard e crea una nuova app.


Heroku dashboard
Heroku dashboard 2

Clicca su Create App.

Sotto la voce di menu Deploy, a Deployment method seleziona GitHub. Se non lo hai ancora fatto, ti chiederà di effettuare il login con il tuo account GitHub, al fine di completare l’operazione e connettersi ad esso.

Metti il nome del tuo repository GitHub e clicca su Search. Una volta che il tuo repository appare a video clicca su Connect.

Heroku dashboard 3

Oh, aspetta, altri due piccoli passaggi:

  1. Sotto Automatic deploys seleziona il branch master e clicca su Enable Automatic Deploys.
  2. Sotto Manual deploy clicca su deploy branch dopo esserti accertato che il ramo master sia selezionato.
Heroku dashboard 4

Ok, abbiamo realmente già finito con tutti i passaggi, potrebbe metterci un po’ ma dopo che avrà finito, vedrai più o meno qualcosa del genere:

Heroku dashboard 4

Se fai clic su View, verrà aperta una nuova scheda ma la tua app non verrà visualizzata. La prossima serie di passaggi ti guiderà nella configurazione della tua app Angular.

Configura la tua App Angular per il corretto deploy su Heroku

Di seguito sono riportati i passaggi pronti per la produzione per distribuire facilmente e correttamente la tua app senza intoppi.

Assicurati di avere l’ultima versione di Angular Cli e di Angular Compiler Cli:

Esegui da terminale il seguente comando:

npm install @angular/cli@latest @angular/compiler-cli --save-dev

Nel file package.json copia dalla sezione dependenciesDev alla sezione dependencies le seguenti righe:

"@angular/cli”: “{ultima versione}”,
"@angular/compiler-cli": "{ultima versione}"

Crea lo script postinstall nel package.json

Nella sezione “scripts” del file aggiungi la coppia chiave-valore:

"postinstall": "ng build --aot -prod"

Nel caso in cui dovessi ricevere errori con il seguente comando, sostituire la riga con la seguente:

"heroku-postbuild": "ng build --prod"

Questo dice a Heroku di compilare l’applicazione usando il compilatore Ahead Of Time (AOT) e renderlo pronto per la produzione. Questo creerà una cartella dist, dalla quale verrà lanciata la versione della nostra app convertita in html e javascript.


Aggiungiamo node ed npm

Sarà necessario aggiungere Node e NPM che Heroku utilizzerà per eseguire l’applicazione. Preferibilmente, dovrebbe essere la stessa versione che hai sulla tua macchina. Quindi, esegui node -v e npm -v per ottenere la versione corretta e includila nel tuo file package.json in questo modo:

  "engines": {
    "node": "6.11.0",
    "npm": "3.10.10"
  }

Copia Typescript in dependencies

Copiando “typescript”: “{ultima versione}” all’interno del sotto array dependecies, informerà heroku della versione di Typescript da utilizzare.

Installa Enhanced Resolve 3.3.0

Esegui il seguente comando da terminale:

npm install enhanced-resolve@3.3.0 --save-dev

Installa il server per eseguire la tua app

In locale eseguiamo ng serve dal terminale per lanciare la nostra app sul browser locale. Per la produzione, avremo bisogno di installare Express che eseguirà la nostra app (dalla cartella dist creata dopo la compilazione) al fine di puntare direttamente alla cartella di distribuzione.

Installa Express eseguendo:

npm install express path --save

Crea un file server.js nella root dell’applicazione e incolla il codice seguente:

//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist/<name-of-app>'));

app.get('/*', function(req,res) {
    
res.sendFile(path.join(__dirname+'/dist/<name-of-app>/index.html'));
});

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

Cambia il comando start:

Nel file package.json alla voce start sostituisci il valore come segue:

"start": "node server.js"

Ecco come dovrebbe sommariamente apparire il file package.json:

{
  "name": "demo-deploy",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot -prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/cli": "^1.4.9",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/compiler-cli": "^4.4.6",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "express": "^4.16.2",
    "rxjs": "^5.4.2",
    "typescript": "~2.3.3",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.9",
    "@angular/compiler-cli": "^4.4.6",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "enhanced-resolve": "^3.3.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
  },
  "engines": {
    "node": "6.11.0",
    "npm": "3.10.10"
  }
}

Pusha le modifiche su GitHub:

git add .
git commit -m "updates to deploy to heroku"
git push

A questo punto, la tua applicazione su Heroku prenderà automaticamente le modifiche da GitHub e si aggiornerà.


Inoltre, esaminerà il package.json e installerà i pacchetti mancanti.

Verrà eseguito postinstall e quindi, node server.js per avviare l’applicazione.

Troverai l’applicazione deployata e funzionante direttamente all’indirizzo generato da Heroku sulla sua dashboard.

Facile vero? 😀

Leave a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *