stap 1. Het opzetten van nodejs - ManoukK/portfolio GitHub Wiki

wat wil ik erin vertellen

  • offline pagina
  • css files comprimeren
  • dotenv key

Nodejs environment

https://github.com/ManoukK/progressive-web-apps-1920/wiki/Het-opzetten-van-een-Nodejs-environment

  • gitignore aanmaken en ervoor zorgen dat bepaalde dingen niet op github komen
  • ejs installeren
  • views folder aanmaken, daarin een partials map aanmaken
  • static folder aanmaken
  • in code dit zetten
app.set('view engine', 'ejs');
app.set('views', 'views');
app.use(express.static('static'));
  • in folder: views bestand maken met naam: main.ejs. Hier html in zetten om te testen
  • in server.js:
app.get('/', function(req, res){
    res.render('main')
})

Naar een andere pagina op de website gaan

  • maak een nieuw ejs file aan in dezelfde folder als waar je main staat. Ik noem die van mij about.ejs typ hier wat html in.
  • maak in main een linkje aan met een href. om ervoor te zorgen dat je naar de juiste pagina gaat gebruik je een /.
<a href="/about">More about me</a>
  • in de server.js maak je een nieuwe app.get aan die door wijst naar, in dit geval, de about pagina. de naam van wat je rendert hoeft niet gelijk te staat aan de naam van het pad (/about).
app.get('/about', function(req, res){
    res.render('about')
})

Het gebruik maken van partials

  • 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 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 openings tag 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') %>

Dit zet je bovenaan in het bestand alsof daar de head zou staan. Als je nu wat in je head wilt aanpassen hoef je dat dan ook maar 1 keer te doen. Dit kan je ook hetzelfde doen met de footer.

"tijdelijke css en javascript links gebruiken

uiteindelijk wil je dat je css en js files in de static map komen te staan samen met een paar andere files zoals manifest en je server-worker. Voorlopig is dat nog niet nodig, het kan wel maar persoonlijk vind ik het fijn om eerst alle css te schrijven voordat ik het ga comprimeren.

  • Maak een map aan genaamd public. Maak in deze map je css en js files aan. Voor nu gebruik ik alleen css maar je kan deze stappen ook volgen met js files.
  • Ga naar je server.js en verander hier de route van de app.use. Eerst zag dit er zo uit:
app.use(express.static('static'));

verander static naar public (de naam public hangt af van hoe jij de naam van je folder hebt genoemd waar jouw css en js in staat)

app.use(express.static('public'));
  • nu kan je in de head de css linken zoals je gewent bent. Het enige wat anders is, is dat je geen gebruik hoeft te maken van ../ omdat de server nu als start punt de public map heeft.