# HAN Frontend Docs


# Development

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

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

# Compile pug

Typ yarn start voor een static file server 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

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


# Watch / build

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


# Compile js & scss

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


# 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 main branch worden geplaatst.

Verder belangrijk om te weten dat imgix is gekoppeld met de netlify site han-images.netlify.app als source. Deze site zit tussen de HAN.nl-images repository en imgix en is puur voor de koppeling.


# Docs

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


# Release

  1. Maak een nieuwe branch aan vanaf de main branch
  2. Knip de wijzigingen uit /public/changelog/next.md en maak een nieuwe changelog aan voor de volgende release in /public/changelog/x.x.x/README.md
  3. Controleer of alle wijzigingen zijn gedocumenteerd in de changelog
  4. Pas de releaseversie aan in package.json
  5. Push de wijzigingen en maak een pull request aan
  6. Zodra de pull request gemerged is maak een git tag aan met de nieuwe versie. Dit kan via web interface (opens new window) van Azure DevOps of command line met git tag x.x.x && git push --tags
  7. Wanneer de tag is aangemaakt zal de release pipeline (opens new window) starten. Als de release pipleine succesvol is voltooid vind je de release in de HUTS artifacts feed (opens new window)

# 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