# HAN Frontend Docs
# Development
- Node.js, zie het bestand
.node-version
in het project voor welke versie. Gebruik bijvoorbeeld Fast Node Manager (opens new window) of Node Version Manager (opens new window) voor het beheren van Node versies. - 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:
# 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 -- -t
wanneer 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 -- -c
wanneer 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
- Maak een nieuwe branch aan vanaf de
main
branch - 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
- Controleer of alle wijzigingen zijn gedocumenteerd in de changelog
- Pas de releaseversie aan in
package.json
- Push de wijzigingen en maak een pull request aan
- 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
- 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