Weekly nerd - ManoukK/portfolio GitHub Wiki

weekly nerd - nodejs project

• Opzet node environment
• Basis opzet van een node framework
• Navigeren naar een andere pagina
• Gebruik maken van partials
• Files comprimeren
• Afbeeldingen comprimeren
• Offline pagina weergeven

Maak een javascript bestand aan (server.js) en zet daarin dit stukje code:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Maak een package.json aan door in je terminal, in de juiste map

npm init 

te typen. Dan krijg je in de terminal een "formulier" gewoon op enter blijven drukken want dit word automatisch ingevuld.

Installeer express.js door dit in de terminal te typen in de juiste map.

npm install express --save

Installeer nodemon. Dit zorgt ervoor dat je niet steeds je server hoeft op te starten bij elke verandering die je doet. Dit kan je met deze command doen in je terminal, in de juiste map.

npm install nodemon --save -dev

In de package.json file staat nu in scrips "node" dit moet je handmatig naar nodemon veranderen.

Je kan de server nu opstarten door in je terminal te typen

nodemon server.js

Je krijgt dan een nummer en dan kan je naar localhost:..(het nummer).. Je kan er weer uit als je in de terminal ctrl+c doet.

note: je kan in je package.json checken of het downloaden gelukt is. Als het goed is moet het onder dependencies komen te staan

Maak in je hoofdmap van het project een gitignore file aan. Dit zorgt ervoor dat de files die je daar in zet niet op github komen te staan. Dit zijn de files die ik erin heb staan:

node_modules
 
package-lock.json
 
.DS_store
 
.env

Upload dit gelijk naar github zodat het daar ook al in je repo staat.

Installeer nu het node framework ejs. Dankzij dit framework kan je heel makkelijk javascript waardes in html zetten. Dat doe je door in de terminal, in je project map dit erin te typen:

$ npm i ejs

In je package.json kan je checken of het goed geïnstalleerd is. Als dat zo is komt het in je dependencies te staan.

Dankzij ejs kan je ook gebruik maken van partials. Stukken html code die op elke pagina hetzelfde is of moet zijn. Zoals een head, header en footer. Om dit gestructureerd te houden maak je een map “views” aan. Hierin komen al je grote pagina’s erin te staan zoals een hoofdpagina en detail pagina. Maak in de views map een nieuwe map aan. Die kan je “partials” noemen. Hierin komen al jouw partials in te staan.

Maak nu een folder aan waar je alle client side files in kwijt kan. Later stuur ik alle bestanden daarin door naar de static folder, die files kan je gelijk comprimeren voor meer snelheid. Voor nu zet ik alle client side files die ik nodig heb in het mapje public.

Nu kan je in de server.js dit stukje code zetten. Zo geef je aan welk framework jij gebruikt en dat de “basis” folder is van het project.

app.set('view engine', 'ejs');
app.set('views', 'views');
app.use(express.static(public));

Voor nu zet ik public in de derde regel maar zodra je alles omzet naar de static map moet je deze aanpassen naar static.

Nu dit allemaal is opgezet kan je in de views folder een ejs bestand aanmaken, deze heb ik main.ejs genoemd. Dit wordt de hoofdpagina van mijn website.

Om ervoor te zorgen dat de server dit ook als hoofdpagina gaat zien moet je in server.js een function schrijven die dat ziet. Deze function ziet er zo uit:

app.get('/', function(req, res){
    res.render('main')
})

Met de slash na app.get geef je aan dat dit de hoofdpagina is. In de function zet je neer welk ejs bestand je wilt renderen als iemand op de hoofdpagina komt. Omdat ik mijn bestand main.ejs heb genoemt schrijf ik daar dus “main”. Je hoeft niet meer aan te geven dat het een .ejs file is want dat het je in stap 5 al gedaan.

Maak nu een tweede ejs file aan. Ik heb die van mij about.ejs genoemd. Zet deze nieuwe ejs file in dezelfde map als je main.ejs. Die map heet bij mij “views”

Maak in je main.ejs een linkje aan zoals je dat normaal gesproken zou doen in de html. De href schrijf je op deze manier als je naar je about pagina wilt /about.

<a href="/about">More about me</a>

De server weet nog niet wat je hiermee bedoelt dus dit moet je nog in server.js aangeven. Dat doe je op dezelfde manier als hoe je het doet met de hoofdpagina:

app.get('/about', function(req, res){
    res.render('about')
})

Wat je in de href in de html hebt gezet moet je nu ook na de app.get neerzetten. In mijn geval is dat dus /about. Als jouw site dat pad volgt moet je in de server nog wel vertellen welke ejs file je wilt inladen zodra iemand op de link klikt. Omdat ik mijn ejs file about hebt genoemd zet ik dit ook in de render neer. Je kan hier ook een andere ejs file inladen. De namen “/about” en “about” in de render staan los van elkaar.

Maak in views (als je dit nog niet hebt gedaan) een map aan. Ik noem deze zelf graag partials. Hier komen alle html onderdelen die je voor elke pagina kan gebruiken. Denk bijvoorbeeld aan een head, header en footer.

Maak in de map een head.ejs bestand aan en zet daar de html in die je gebruikt voor de head van je html. Ik eindig deze code met een openingstag van de body en ik zorg ervoor dat de body in de footer weer sluit.

Op de html pagina's die direct in je views mapje staan kan je nu de head linken met dit stukje code:

<%- include ('partials/head.ejs') %>

let op dat het min-teken achter <% ook een ander teken kan zijn. In de documentatie van ejs leggen ze hier goed uit welke tekens je kan gebruiken voor verschillende outputs. https://ejs.co/#docs Deze include regel zet je bovenaan in je bestanden waar je deze wilt gebruiken. Zodra je iets wilt veranderen in je head (of andere partial) hoef je het alleen in de head.ejs aan te passen en wordt deze aanpassing doorgevoerd naar elk bestand waarin jij de head hebt gelinkt. Dit scheelt veel tijd, vooral als je met veel pagina’s werkt.

Om files te comprimeren heb je een aantal gulp installaties nodig. Voor nu heb je alleen deze nodig. Installeer ze in de terminal in het goede project

npm install --save-dev gulp
npm install --save-dev gulp-autoprefixer
npm install gulp-clean-css --save-dev
npm install --save-dev gulp-concat

Wil je meer weten wat dit allemaal doet? Dan kan je hier mijn documentatie erover lezen: https://github.com/ManoukK/progressive-web-apps-1920/wiki/Uitleg-installaties-&-hoe-deze-gebruikt-worden

Zodra alles is geïnstalleerd maak je een nieuwe map aan. Hierin komen alle builds, serverworker en manifest in te staan. Ik noem mijn map “scripts”. Maak in de map gelijk een file aan genaamt build-css.js. In deze file gaan we ervoor zorgen dat alle css bestanden kleiner en compacter worden. Het eindresultaat is dan ook dat de css code in 1 lange regel staat. Onoverzichtelijk? Ja maar wel een stuk lichter voor de browser. Dit is een van de manieren om je website sneller te maken.

In de build-css file geef je aan dat je met deze npm packages wilt werken. Dit doe je met een require en ziet er zo uit:

const gulp = require('gulp');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');

Nu ga je aangeven welke bestanden je wilt compilen. Voor dit voorbeeld doe ik het op een manier dat ik zelf kan bepalen in welke volgorde het compilen gebeurd. Ik vind dat persoonlijk een stuk handiger omdat je in css en in javascript te maken hebt met de volgorde waarin de code staat. Als de volgorde voor jou niks uit maakt kan je hieronder lezen hoe je alles tegelijkertijd compiled. De code ziet er zo uit:

return gulp.src([
   './public/css/styles.css',
   './public/css/footer.css',
   './public/css/aboutStyles.css',
   './public/css/navigation.css',
   './public/css/cvPage.css'
 ])

Zoals je ziet return je gulp.src. Dit moet omdat dit een async chain wordt van .pipe’s. Dankzij de return weet javascript wanneer deze chain klaar is en wanneer het dus moet stoppen. Om alles in een keer te compilen zonder de volgorde te bepalen doe je dat met sterretjes. Dan ziet de guld.src er zo uit:

return gulp.src([
   './public/css/*.css'
 ])

Nu begint de pipe chain. We beginnen met concat. Hierin vertel je hoe het nieuwe, gecomprimeerde bestand moet eten.

 .pipe(concat('index.css'))

Daarna gebruiken we cleanCSS. Dit kan handig zijn voor later in het project als je meer informatie wilt hebben over de minified files.

.pipe(cleanCSS())

Vervolgens maken we gebruik van de auto prefixer. Dit zorgt ervoor dat je css goed en netjes komt te staan voordat het gecomprimeerd wordt. “Casacade false” zorgt ervoor dat alles netjes onder elkaar komt te staan en true lijnt het weer iets anders uit. Uiteindelijk maakt het niet uit wat je kiest. Hier kan je lezen wat de verschillen zijn tussen die twee: https://stackoverflow.com/questions/53395252/cascade-option-in-gulp-autoprefixer

 .pipe(autoprefixer({
   cascade: false
 }))

Als laatste geef je aan waar het bestand naartoe moet worden gestuurd als alles klaar is. Ik zet het in mijn static map. Als je nog niet zo’n map hebt vergeet het dan niet om die nu aan te maken.

 .pipe(gulp.dest('./static/'))

Nu is de hele build file geschreven en je zult merken dat je nog niks in werking hebt gezet. Dat komt omdat je in je package.json nog moet aangeven dat dit geactiveerd moet worden zodra de server opstart.

Ga naar je package.json. In scripts heb je als het goed is al en “start” staan. Hierin gaan we werken maar voordat we dit doen moeten we 3 npm packages installeren.

npm install npm-run-all --save-dev
npm install rimraf
npm install chokidar

Dankzij npm-run-all zorgt ervoor dat je in een keer alle builds in je script kan activeren. Rimraf verwijderd, als ik het goed begrijp, de rm -rf in de node_modules map. Zonder rimraf kan je de server niet opstarten en krijg je errors. Chokidar gebruik je om te checken of er veranderingen zijn in de originele files. Als er dus een verandering plaatsvindt kan je een command activeren.

Het is een beetje lang om elke regel stap voor stap te beschrijven dus ik doe het in een keer. Je scripts gaat er nu zo uit zien:

 "scripts": {
   "prestart": "npm run build",
   "start": "node server.js",
   "predev": "npm run build",
   "dev": "nodemon server.js",
   "prebuild": "rimraf ./static",
   "build": "npm-run-all build:*",
   "build:css": "node scripts/build-css.js",
   "watch": "run-p watch:*",
   "watch:css": "chokidar 'public/css/*.css' --command 'npm run build:css'",
   "test": "echo \"Error: no test specified\" && exit 1"
 },

In “start” moet je nu nodemon vervangen voor node. Dit zorgt ervoor dat je dit later zonder problemen op heroku kan zetten. De script namen spreken best wel voor zichzelf. Bij de prebuild maak je de static map leeg. Vervolgens zorg je bij build dat alle build’s worden gebouwd. Nu ziet het er misschien nog een beetje raar uit want hier kan je ook gewoon aangeven dat de build:css wilt activeren maar zodra je meer builds krijgt is het handig om dit in een keer te doen. Daarna zet je een watcher aan die kijkt of er veranderingen zijn in de (css) bestanden. Als dat zo is wordt de css build weer opnieuw geactiveerd zodat jij live de veranderingen kan zien. Vanaf nu moet je de server opstarten via “npm run dev”. De static map wordt verwijderd en opnieuw aangemaakt. Werkt dit nog niet probeer dan de commands in je watch een voor een in de terminal te typen. Als het goed is moet hierna alles werken.

Zoals je misschien al hebt gemerkt is de css op je pagina. Dit komt omdat we de css hebben gelinkt naar de public pagina. We moeten dit omzetten naar static. Eerst ga je naar je server.js. Hieronder zie je app.use onze hoofdmap is nu nog public. Dit moet veranderd worden naar static want hierin zetten wij onze gecomprimeerde files in.

app.use(express.static(public));
app.use(express.static('static'));

Nu kan je in je head de juiste styles linken. Omdat ik al eerder, in de build script, heb aangegeven dat mijn css index.css moet heten link ik hier dan ook naar index.css.

<link rel="stylesheet" href="/index.css">

Als je nu weer kijkt naar je project zie je nu je styling weer! Dit kan je nu ook doen met javascript bestanden. Let dan wel op dat je in je build-js.js GEEN gebruik maakt van deze twee pipe chains (dit werkt alleen voor css):

  .pipe(cleanCSS())
  .pipe(autoprefixer({
    cascade: false
  }))

Als je plaatjes gebruikt is het handig om deze ook mee te sturen naar de static map. Dit werkt bijna precies hetzelfde als hierboven alleen net even wat anders. Bij plaatjes heb je geen concat of autoprefixer nodig. Je wilt alleen dat deze naar de staticmap worden gestuurd. De hele code hiervan ziet er zo uit:

const gulp = require('gulp')
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
 
return gulp.src([
   './public/images/*.*'
 ])
   .pipe(gulp.dest('./static/img/'))

In principe kan je regel 2 tot en met 4 weg laten om het wat netter te maken. Zoals je ook ziet maak ik hier wel gebruik van de sterretjes, ook achter de punt. Dit komt omdat ik nooit zeker weet op een plaatje een .png of .jpeg is. Deze onzekerheid vang ik op door te zeggen dat ik gewoon alle files in de map images wil hebben.

Nu moeten we ook hier weer aangeven in de package.json dat je deze bestanden wilt builden. Ook deze regels code zijn bijna hetzelfde als bij de css. Onder build:css voeg je deze regel toe:

"build:images": "node scripts/build-img.js",

En onder watch:css voeg je deze regel toe:

"watch:images": "chokidar 'public/img/*' --command 'npm run build:images'",

Start je server weer opnieuw op en als het goed is zie je nu ook je plaatjes er tussen staan! Mocht het nog niet werken check even of alle mapjes de goede namen hebben gekregen met de juiste routing.

Als je een offline pagina wilt hebben dan moet je gebruik maken van de service-worker en rev-manifest. De rev-manifest zorgt ervoor dat de files, die je die in de cache van de client wilt opslaan, een uniek nummer krijgen. Elke keer als jij iets aanpast in die file, wordt er een nieuw nummer gegenereerd en kan de service-worker zien dat hij die file moet updaten.

Eerst heb je een offline pagina nodig die je straks kan laten zien. Maak in views een nieuwe ejs file en maak dit je offline pagina. Je kan je offline pagina bekijken door dit in je server.js te zetten:

app.get('/offline', function(req, res){
   res.render('offline')
})

Als je nu naar je localhost gaat en je typt achter de url /offline kom je als het goed is op je offline pagina.

Nu maak je een service-worker.js file aan. Ik heb die los in de public map gezet. Niet in mijn js mapje omdat dat de javascript is voor mijn website en deze twee dingen wil ik gescheiden houden. De service worker is een best complex verhaal dus ik probeer hieronder in stappen uit te leggen hoe het bestand eruit ziet.

Je begint bij het vaststellen van je cache naam. v3 werkte voor mij en daarom heb ik hiervoor gekozen. Vervolgens geef je ook aan welke bestanden je in de cache wilt opslaan. Dit kan vanalles zijn maar probeer niet te veel in de cache te proppen. Hou het licht en minimaal.

cacheName = 'v3'
urlsToCache = [
   '/css/index.css',
   '/offline',
   '/images/papertexture2.png'
];

In dit gedeelte worden alle bestanden die in urlsToCache staan opgeslagen in de cache bij de gebruiker. Om te voorkomen dat de service worker blijft hangen op “waiting”, vertellen we op het laatst dat de service worker dit mag skippen. Dit is gewoon veilig en levert geen problemen op.

self.addEventListener('install', function(event) {
 console.log('activating!!!');
   event.waitUntil(
     caches.open(cacheName).then(function(cache) {
       return cache.addAll(urlsToCache);
     })
     .then(function(){
         self.skipWaiting();
     })
   );
 });

Om ervoor te zorgen dat oude files die niet meer nodig zijn in de cache blijven zitten verwijderen we deze files in de code hieronder. De files worden gefilterd met de files in urlsToCache en alles wat geen “match” heeft word verwijdert uit de cache. Dit is waarom een uniek nummer achter je css of js bestanden zo belangrijk is. Als deze bestanden dezelfde namen behouden weet de service worker niet dat er een nieuwe file. Omdat de service worker dat niet weet behoudt hij de oude files in de cache en word niks geupdate. Door een uniek nummer kan je dit probleem snel en makkelijk tackelen.

self.addEventListener('activate', function (event) {
   console.log('activating!');
   event.waitUntil(
   caches.open(cacheName).then(cache => {
     return cache.keys().then(requests => {
         return Promise.all(
           requests.filter(request => {
             return !urlsToCache.includes(getPathName(request.url));
           }).map(cacheName => {
             return cache.delete(cacheName)
           })
         )
       }
     ).then(() => self.clients.claim())
   })
 )
});

Naast dat alles in de cache wordt opgeslagen moet je ook nog aangeven wanneer je de offline pagina wilt tonen. Dat doe je met de code hieronder. Eerst check je of de pagina die de gebruiker wilt bezoeken geladen kan worden. Als dat niet zo is dan is de fallback je /offline pagina (of hoe je ook jouw offline pagina hebt genoemd).

self.addEventListener('fetch', function(event){
       event.respondWith(
           caches
               .match(event.request)
               .then(function(response) {
                   if (response) {
                       return response;
                   }
                   return fetch(event.request);
                   })
               .catch(function() {
                   return caches.match('/offline');
               })
       );
});

Met dit stukje code op het laatst zorg je ervoor dat de gebruiker de juiste pagina voor zich krijgt als hij door jou website klikt.

/**
* Get a pathname from a full URL by stripping off domain
*
* @param {Object} requestUrl        The request object, e.g. https://www.mydomain.com/index.css
* @returns {String}                Relative url to the domain, e.g. index.css
*/
function getPathName(requestUrl) {
 const url = new URL(requestUrl);
 return url.pathname;
}

Dit is de hele service worker. Best veel toch? Nu je dit hebt opgezet kunnen we door naar de volgende stap.

Ook de service worker wil je naar je staticmap sturen en dus moeten we ook hier een build voor schrijven in de map scripts. Dit stukje code is bijna precies hetzelfde als wat we hebben gedaan voor de css. Alleen hebben we dit keer geen prefixer en cleaner nodig want die werkt alleen maar op css files. De code hiervoor ziet er zo uit:

const gulp = require('gulp')
const concat = require('gulp-concat');
 
return gulp.src([
   './public/service-worker.js'
 ])
   .pipe(concat('service-worker.js'))
   .pipe(gulp.dest('./static/'))

Om deze file daadwerkelijk naar de staticmap te sturen moeten we in onze package.json hier een builder en een watcher voor schrijven. Alle builders en watchers hou ik onder elkaar en bij elkaar. Bij mij gaat dan ook de build:serviceworker onder build:js en hetzelfde geldt voor de watchers.

 "build:serviceworker": "node scripts/build-service-worker.js",
 "watch:serviceworker": "chokidar 'public/service-worker.js' --command 'npm run build:serviceworker'",

Om nu verder te kunnen moet je weer een aantal packages van gulp installeren. In de loop van dit stappenplan ga ik uitleggen wat deze packages doen.

npm install --save-dev gulp-filter
npm install --save-dev gulp-rev
npm install gulp-rev-css-url
npm install --save-dev gulp-rev-replace

Als alles is geïnstalleerd kunnen we onze revision-hash.js file aanmaken. Maak deze file aan in je scripts map. In deze file zorgen we ervoor dat css en javascript bestanden een uniek nummer mee krijgen. Dankzij de gulp-filter kunnen we onze service-worker eruit filteren. Deze willen we niet meenemen. Gulp-rev zorgt ervoor dat de css en js bestanden een uniek nummer achter hun naam krijgen. En Gulp-rev-css-url zorgt ervoor dat als jij een van die bestanden aanpast (code verwijderen of toevoegen) dat het unieke nummer, wat het bestand eerst had, wordt vervangen met een ander uniek nummer.

const gulp = require('gulp');
const filter = require('gulp-filter');
const rev = require('gulp-rev');
const override = require('gulp-rev-css-url');
 
gulp.src([
   './static/**/*.{css,js}',
])
   .pipe(filter(file => !file.path.endsWith('/service-worker.js')))
   .pipe(rev())
   .pipe(override())
   .pipe(gulp.dest('./static/'))
   .pipe(rev.manifest('rev-manifest.json'))
   .pipe(gulp.dest('./static/'));

De rev-manifest wordt in je static automatisch toegevoegd en bijgewerkt. Bij mij ziet het er nu zo uit. Ik maak alleen gebruik van css en hier zie je ook wat voor een lang nummer mijn css file erbij krijgt. Later ga je verwijzen naar deze css en daarom staat “css/index.css” ervoor. Dit is een handige doorverwijzing naar een css file wat je anders elke keer in je heads handmatig moet doen.

Rev-manifest:

{
 "css/index.css": "css/index-cc9f7e97cb.css"
}

Nu je de unieke nummers achter je files hebt gemaakt wil je er ook nog voor zorgen dat elke keer als deze nummers veranderen het ook echt wordt aangepast in je rev-manifest. Dat doen je met deze file hieronder en daar is dus ook gelijk de Gulp-rev-replace goed voor. De file hiervoor heb ik revision-replace genoemd en ook deze staat staat in de map scripts.

const gulp = require('gulp');
const revReplace = require('gulp-rev-replace');
 
gulp.src([
 './static/service-worker.js',
])
 .pipe(revReplace({
   manifest: gulp.src('./static/rev-manifest.json')
 }))
 .pipe(gulp.dest('./static'));

Voor de volgende paar stappen hebben we de server.js nodig. Eerst moeten we de rev-manifest, waar we net mee bezig waren, linken in de server.js. Dat doe je met een require zoals je hier beneden kan zien. Deze regel zet ik bovenaan in mijn code zodat alle globale const’s in het bestand bij elkaar blijven.

const revManifest = require('./static/rev-manifest');

Nu je bestanden in de cache kan opslaan wil je ook controle hebben over hoelang je deze daar bij de client kan bewaren. In de les werd aangeraden om dit op maximaal een jaar te zetten. Je hebt heel veel keuze over hoe lang je dit wilt bewaren en daarvoor zou ik zeker nog de documentatie hierover lezen als je het anders wilt dan dit voorbeeld. Ik heb het op maximaal een jaar gezet. Deze code zet ik nog voor alle andere regels code, onder mijn verzameling van const’s.

app.use(/.*-[0-9a-f]{10}\..*/, function(req, res, next){
   res.header('Cache-Control', 'max-age=365000000');
   next();
})

Nu is het nog belangrijk om een app.get te maken voor je offline pagina. Als het goed is had je dit al gedaan zodat je de offline pagina kon zien terwijl je deze mooi maakte. Als je dat nog niet hebt is het (bijna) hetzelfde zoals de rest en als je het al wel hebt moet je nog 1 klein zin toevoegen. Dat is {revManifest}. Je wilt nu het css file in je rev-manifest.json meesturen naar je html. Dus die informatie moet je meegeven zodra iemand op die pagina komt.

app.get('/offline', function(req, res){
   res.render('offline', { revManifest })
});

LET OP! Zorg dat je {revManifest} ook meestuurt naar de rest van je html pagina’s, ook je hoofdpagina. Dit werkt hetzelfde als wat je nu hebt gedaan bij je offline pagina.

Nu je de rev-manifest hebt meegestuurd moet je in de head van je website nog de goede css link erin zetten. Als het goed is heb je al je css erin gelinkt. Nu wil je alleen gebruik maken van de css met het unieke nummer. Dit kan je in je head linken via de kracht van ejs. Met ejs kan je namelijk javascript “in” je html zetten en zo krijg je het voor elkaar om in je revManifest te linken naar het juiste css bestand.

   <link rel="stylesheet" href="/<%= revManifest['css/index.css'] %>">

Als laatste moet je nog in je html een script plaatsen die ervoor zorgt dat de service-worker gezien wordt door de browser. Je registreert het als het ware.

   <script>
       if ('serviceWorker' in navigator){
           window.addEventListener('load', function() {
               navigator.serviceWorker.register('/service-worker.js')
                   .then(function(registration){
                       return registration.update();
                   })
           });
       }
   </script>