Skip to content

Samling for gode frontend løsninger, golden-path for frontend-prosjekter

License

Notifications You must be signed in to change notification settings

navikt/frontend

Repository files navigation


Frontend

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


Læring

Lesestoff

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

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@v4
  with:
    node-version: 20
    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