👐 HAN-DS

# HAN.nl Frontend Docs

# Development

  • Node.js (getest met v12.14.1). Gebruik bijvoorbeeld Node Version Manager https://github.com/creationix/nvm voor het beheren van Node versies. (Zie hier om nvm te installeren en te gebruiken: https://www.linode.com/docs/guides/how-to-install-use-node-version-manager-nvm/)
  • Yarn installeren (opens new window)
  • yarn install draaien (kan even duren).

Voor het volledig draaien van het frontend project, heb je 3 terminal-tabs nodig:

  1. yarn start
  2. yarn webpack
  3. yarn netlify

# Compile sass, pug

Typ yarn start voor een static file server en sass en pug compilatie. Server draait vanuit /public op http://localhost:8000.

Typ yarn start -- --quickstart of yarn start -- -q om te starten zonder eerst een build te draaien. Je zit dan mogelijk naar oude bestanden te kijken.

Typ yarn start -- --templates of yarn start -- -twanneer je alleen pug pagina's wilt compilen.

Typ yarn start -- --templates pages/bachelor/**/*.pug wanneer je specifieke pagina's wilt compilen.

Typ yarn start -- --components of yarn start -- -cwanneer je componenten wilt compilen.

Typ yarn start -- --templates pages/500.pug --components voor compilen van 500.pug en componenten.

Combineren is mogelijk: Typ yarn start -- -q -t homepage -c voor een quickstart, het compilen van homepage.pug bij veranderingen en wel componenten.

  • devserver op localhost:8000
  • pug › html
  • sass › css

Typ yarn build voor een eenmalige dev-build naar /public.

# Watch / build

Typ yarn start voor een static file server en sass, js, pug compilatie. Server draait vanuit /public op http://localhost:8000.

# Compile js

Om de javascript te bundelen, draai je in een ander terminal-tab yarn webpack.

  • js modules › js bundles

# API testen

Om lokaal de api te kunnen te testen, draai je in een ander terminal-tab yarn netlify.

  • netlify functions devserver op localhost:9000
  • proxy: /.netlify/functions/* -> http://localhost:9000/

# Netlify

We gebruiken Netlify voor hosting van dit statische project. Voor branches in git maakt Netlify automatisch een branch url aan.

  • https://han.netlify.app/
  • https://my-git-branch--han.netlify.app/

# Afbeeldingen imgix

Voor afbeeldingen wordt de service imgix gebruikt. Plaats een afbeelding op origineel (grootst) formaat in de HAN.nl-images repository (opens new window). Daarna zal deze via de url benaderbaar en te manipuleren zijn:

https://hannl.imgix.net/koraal.jpg?w=100&h=100

Afbeeldingen die door imgix moeten worden opgepikt, moeten in de master branch worden geplaatst.

# Docs

Documentatie voor dit project is te vinden in de repository HAN.nl-design-systeem (opens new window)

# Release

Zet eerst al je wijzigingen klaar in een pull request en laat reviewen. Geef duidelijke test-instructies, links en screenshots en maak notities voor eventuele vervolgstappen en installatie-instructie.

  1. Merge je wijzigingen in master
  2. Maak een changelog aan voor de volgende release in /public/changelog/x.x.x/README.md (draait op docsify (opens new window))
  3. Pas de release versie aan in package.json - yarn release
  4. Push naar Github met “release 1.x.x" of - git commit -m “release x.x.x"
  5. De automatische release workflow (opens new window) zal een berichtje posten in Slack
  6. Vervolgens master ook in develop te mergen, zodat die synchroon lopen git checkout develop en git merge master

image

# Mappenstructuur

  • /project - source code
    • /project/scripts - javascript modules
    • /project/styles - sass modules
    • /project/templates - pug componenten en pagina's
    • /project/api - netlify functions
    • /public - alle static assets, hier worden sass, js en pug naartoe gecompileerd
      • /public/components - alle losse html componenten voor in de stijlgids
      • /public/static - alle non-html static bestanden
      • /public/changelog - alle changelogs
  • /gulp - build taken

Naamgeving componenten →