Een goede Software Crafter houdt er soms van om een paar avonden van zijn of haar vrije tijd op te offeren om kennis te maken met technologie waar hij of zij nog nooit eerder mee heeft gewerkt. Daar stopt het vaak omdat de Crafter vaak ook een drukke baan, kinderen of een leuke hobby heeft. Hij of zij wil niet nog een nachtje doorbrengen met het deployen van een applicatie, terwijl hij of zij kan gaan lopen of genieten van een frisse pint.
Maar het is erg belangrijk om je werk aan de buitenwereld te laten zien. Chad Fowlers boek “The Passionate Programmer: Creating a Remarkable Career in Software Development” benadrukt dat. Het boek neemt ons mee naar de filosofische vraag: “Als een appel van een boom in een bos valt en er is niemand die dat kan waarnemen. Is er dan een appel gevallen?” Die vraag lijkt slechts één logisch antwoord te hebben: “Ja, natuurlijk!”. Maar of de appel al dan niet gevallen is doet er niet echt toe omdath het geen invloed heeft op de buitenwereld. Als een Software Crafter zijn of haar nieuwe ervaring niet aan de buitenwereld kan laten zien, kan hij of zij de avond net zo goed anders doorbrengen. Er zou niemand van wakker liggen. Het is door deze ervaring met de wereld te delen dat “waarde” gecreëerd wordt.
En net dat brengt ons dus hier. Ik ben een 26-jarige Software Craftsman en ik wou een Angular (https://angular.io/) website maken met de nieuwste frameworks om die aan de buitenwereld te kunnen tonen. Dit artikel is geen tutorial om je Angular te leren maar laat je zien hoe je een Angular applicatie kunt deployen met Heroku (https://www.heroku.com/).
Deze tutorial zal je het volgende laten zien:
– Het maken van een Angular applicatie
– Automatische deploys configureren op Heroku
– Hoe kan ik een Angular app deployen?
Maken van een Angular applicatie
Je kan gebruik maken van Angular CLI (https://cli.angular.io/) om een nieuw project te genereren door het volgende commando uit te voeren:
ng new <my-application-name>
Om te controleren of alles goed is gegaan, doe je het volgende:
cd helloworld
ng serve
De applicatie bestaat nu en werkt lokaal. Laten we dit naar GitHub (https://github.com/) pushen (ikzelf ben ook een grote fan van GitLab (https://about.gitlab.com/) maar helaas is er nog geen integratie met Heroku).
Maak een nieuwe repository aan (Private repository is al een tijdje mogelijk) op GitHub en open je terminal. Voer de volgende regels uit:
git remote add origin <github_repository_url>
git add .
git commit -m “Creation of the new application <my-application-name>”
git push -u origin master
Die vier regels doen het volgende: ze specificeren de juiste repository url om naar te pushen, ze voegen alles toe aan de lokale repository en tenslotte pushen ze de commits van de lokale repository naar de remote master branch. Ik ben niet zo’n fan van direct naar de master branch te pushen, maar dit is slechts een tutorial. Zorg ervoor dat je een branch maakt en in plaats daarvan merged als je dit goed wilt doen.
Gefeliciteerd, je bent erin geslaagd om je code naar GitHub te pushen!
GitHub automatische deploys
Om automatische deploys te realiseren, moeten we eerst een Heroku account aanmaken. Zodra dat is gebeurd, kunnen we een nieuwe applicatie toevoegen. Druk op de New knop en maak een nieuwe app aan. Geef de applicatie een naam <mijn-applicatienaam>, kies een regio en druk op Create app.
In het Deploy menu, onder Deployment method, selecteer je GitHub. Verbind je repository met de juiste door gebruik te maken van het repository zoekveld. Schakel automatische deploys achteraf ook in. Op die manier wordt de master branch automatisch uitgerold.
Je zou iets soortgelijks moeten zien als het volgende:
Er is nog niets gedeployed, omdat er nog niets gepusht is sinds we automatische deploys hebben aangezet. Klik eenmalig op Deploy Branch (Onder Manual deploy). Dat triggert de eerste deploy.
Hoe kan ik een Angular app deployen?
Onder “scripts” in je package.json voeg je een post build script toe.
“heroku-postbuild”: “ng build –aot –prod”
Voeg ook angular/compiler, angular/compiler-cli, angular/cli, typescript en express (https://expressjs.com/) toe aan jouw dependencies. Het uiteindelijke package.json zou er ongeveer hetzelfde uit moeten zien als het mijne:
{
“name”: “website”,
“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”,
“heroku-postbuild”: “ng build –aot -prod”
},
“private”: true,
“dependencies”: {
“@angular/animations”: “^8.2.0”,
“@angular/common”: “^8.2.0”,
“@angular/compiler”: “^8.2.0”,
“@angular/compiler-cli”: “8.2.0”,
“@angular/cli”: “8.2.0”,
“@angular/core”: “^8.2.0”,
“@angular/forms”: “^8.2.0”,
“@angular/platform-browser”: “^8.2.0”,
“@angular/platform-browser-dynamic”: “^8.2.0”,
“@angular/router”: “^8.2.0”,
“core-js”: “^2.6.9”,
“express”: “^4.17.1”,
“rxjs”: “^6.5.2”,
“typescript”: “~3.5.3”,
“zone.js”: “~0.9.1”
},
“devDependencies”: {
“@angular/language-service”: “8.2.0”,
“@types/jasmine”: “~2.8.8”,
“@types/jasminewd2”: “~2.0.3”,
“@types/node”: “~8.9.4”,
“codelyzer”: “~4.5.0”,
“jasmine-core”: “~2.99.1”,
“jasmine-spec-reporter”: “~4.2.1”,
“karma”: “~4.0.0”,
“karma-chrome-launcher”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~2.0.1”,
“karma-jasmine”: “~1.1.2”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“protractor”: “~5.4.0”,
“ts-node”: “~7.0.0”,
“tslint”: “~5.11.0”
},
“engines”: {
“node”: “10.15.3”,
“npm”: “6.9.0”
}
}
Dit vertelt Heroku hoe het programma de applicatie moet bouwen. Het zal de build triggeren die een statische dist map maakt met alle resulterende html en JavaScript code. Vervolgens is het enige dat we nog kunnen doen een manier bieden om de applicatie te starten. We hebben uiteraard nog een server nodig die onze applicatie kan starten. We gebruiken hiervoor Node (https://nodejs.org/en/). Voeg de volgende regel toe aan “scripts”.
“start”: “node server.js”,
Ook moet je de Node en NPM (https://www.npmjs.com/) engines toevoegen zodat Node de applicatie kan opstarten. Om de huidige correcte versie te verkrijgen, kan je best de volgende commando’s uitvoeren: node -v and npm -v in de terminal.
“engines”: {
“node”: “10.15.3”,
“npm”: “6.9.0”
},
Tot slot hebben we ook een Node server nodig. Daarvoor moet eerst Express geïnstalleerd worden:
npm install express path –save
Voeg daarna een server.js bestand met vergelijkbare inhoud toe en vervang de naam van de applicatie door de jouwe:
//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/website’));
app.get(‘/*’, function(req, res) {
res.sendFile(path.join(__dirname + ‘/dist/website/index.html’));
});
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);
Laten we deze veranderingen naar GitHub pushen!
git add .
git commit -m “Updates to make application go live”
git push
Laat me je hier nu doorheen leiden.
Jouw code wordt naar GitHub gepusht, Heroku luistert naar deze wijzigingen en haalt de nieuwe code op direct na het pushen naar de repository. Het installeert de applicatie, bouwt deze en voert het postinstall script uit. De Node Express server wordt gestart en geeft jouw applicatie weer. Als je enkele minuten wacht is de applicatie beschikbaar op een statische url, zoals bijvoorbeeld https://dj-website.herokuapp.com, en wordt je applicatie zichtbaar voor de buitenwereld.
Dat is het, we zijn live!
We kunnen besluiten dat de appel uiteindelijk toch gevallen is.
Nog enkele handige tips:
– Betalen voor de Hobby-versie (https://www.heroku.com/pricing) houdt je website uit slaapmodus
– Door regelmatig de website te raadplegen hou je je website ook uit slaapmodus (tot je geen uren meer over hebt).
– Heroku ondersteunt Spring Boot (https://spring.io/projects/spring-boot) ook. Probeer dat ook eens, het werkte voor mij zo’n beetje out of the box.
Dieter Jordens
Software Crafter
Dieter Jordens (26) behaalde een master Burgerlijk Ingenieur aan de KU Leuven met als afstudeerrichting “Artificial Intelligence”. Momenteel is Dieter aan de slag bij FOD Justitie waar hij meehelpt aan de ontwikkeling van een uitdagende applicatie voor de verwerking en opslag van documenten. Hier werkt hij dagelijks met de laatste versies van state of the art technologieën zoals Angular, CouchDB, Elasticsearch, Java en Spring. Dieter is een gepassioneerd agile software developer met een sterke interesse in Artificiële Intelligentie.
