Frontend

Samling gode frontend-ressurser, løsninger og eksempler fra NAV sitt frontend-felleskap.

Læring

Lesestoff

• Skrive seg bort fra LESS.js
• Publisere og bruke pakker fra Github Package Registry
• Patterns.dev: Design og component-patterns for React og web-utvikling generelt.

Kurs

• https://epicreact.dev/ Confidently Ship Well-Architected Production Ready React Apps Like a Pro.
• Typescript Interaktivt Typescript-kurs

Ressurser

• Can i use: Usikker på om nettleserene støtter en js/css feature?
• Storybook showcase: Storybook for tusenvis av løsninger fra hele verden.
• Gitmoji: Freshere commit-meldinger med git emojies.

CSS

• Flexbox Froggy: Interaktiv læring om CSS flexbox
• Grid garden: Interaktiv læring om CSS grid

Github npm registry

Vi publiserer interne npm-pakker på Github sitt npm registry. Grunnen til det er at tilgangskontroll på npmjs er et herk. Om du allikevel trenger å publisere under navikt-orgen på npmjs kan du ta kontakt med @npm-admins på Slack.

Installere pakker lokalt

For å installere npm pakker med @navikt-scope trenger du en .npmrc-fil med følgende:

//npm.pkg.github.com/:_authToken=TOKEN
@navikt:registry=https://npm.pkg.github.com

Token genererer du under developer settings på Github. Den trenger kun read:packages. Husk å enable SSO for navikt-orgen!

Installere pakker i Github workflow

For å slippe å bruke din egen token til å installere pakker fra en Github workflow har vi definert en org-wide token READER_TOKEN.

Dette er da stegene som trengs i workflowen (se komplett eksempel i npm-publish-workflow.yml):

- uses: actions/setup-node@v3
  with:
    node-version: 16
    registry-url: "https://npm.pkg.github.com"
- run: npm ci
  env:
    NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}

⚠️ Merk at registry-url må defineres for at NODE_AUTH_TOKEN skal funke.

Publisere pakker

Den enkleste måten å publisere en pakke er i en Github workflow vha. GITHUB_TOKEN på denne måten (se komplett eksempel i npm-publish-workflow.yml):

- run: npm publish
  env:
    NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

TODO

• Deploy av app
• Amplitude med proxy
• Wonderwall
• CMS (komme i gang med Sanity / Enonic)
• Testing (Cypress / Jest / Testing Library / Axe)
• Prettier / husky / eslint ++++
• Sitemap for nav.no
• Monitorering (frontendlogger / Sentry ++)
• Tailwind / StyledComponents ++
• Søk på nav.no
• Microfrontends / komponenter til MinSide
• Sikkerhet (lenke til security playbook? Annet?)
• Performance (bundle analyzer i Nextjs, eventuelt annet)

Kontakt

#frontend på slack

Bidrag