Microfrontend SSR

Ta utgangspunkt i templaten for SSR-microfrontends og opprett et nytt repository basert på den.

Kom i gang

Bytt ut applikasjonsnavn i konfigurasjonsfiler

CMD + Shift + F, søk etter tms-microfrontend-template-ssr og erstatt med ditt applikasjonsnavn.
Tilpass nais.yaml

Tilpass både nais/dev-gcp/nais.yaml og nais/prod-gcp/nais.yaml. Alle felter som må tilpasses har tilhørende kommentar med instruksjon i templaten.
Tilpass .github/workflows/deploy.yaml

Tilpass deploy.yaml slik kommentarene i koden instruerer. Applikasjonsnavnet skal være likt navnet på repositoryet.

Du kan vente med å kommentere inn og tilpasse stegene update-manifest-prod og deploy-prod til applikasjonen er klar for prodsetting.
Etterspør tilganger

Be om tilgang til å oppdatere manifest og deploye applikasjonen til nais i Slack-kanalen #minside-microfrontends.
Deploy til produksjon

Når applikasjonen er klar for prodsetting, kommenter inn update-manifest-prod- og deploy-prod-stegene i .github/workflows/deploy.yaml. Sørg for at de er fylt inn likt som i steg 3.

Bruk av templaten

Språk

Bruk språkoppsettet i templaten og legg språkvariablene inn i /language/text.ts.

Fallback

Microfrontenden bør tilby en fallback dersom den har eksterne kall – se src/pages/[locale]/fallback.astro.

CSS

For lokal CSS kan du bruke CSS-moduler som vanlig.

For designsystemet må medfølgende CSS isoleres til microfrontenden. Importer derfor kun de delene av ds-css som er i bruk. Aksel har laget et verktøy for dette som genererer listen med imports du trenger. Legg listen i /styles/aksel.css.

CSS-isoleringen gjøres via prefiks av designsystemets klassenavn. For at dette skal fungere må du beholde section-taggen som wrapper hver side, med applikasjonsnavnet som klassenavn.

Client-side-interaktivitet

Ved behov for client-side-interaktivitet kan Astros Client Islands tas i bruk.

Det krever noe mer config. For å ikke overkomplisere templaten er dette fjernet som default – kontakt oss i #minside-microfrontends, så bistår vi med oppsettet.

Aktivere og deaktivere microfrontends

Flyt for aktivering av microfrontends: utviklingsteamet utvikler en microfrontend og sender enable/disable-meldinger via Kafka til tms-mikrofrontend-selector, som forteller Min side hvilke microfrontends som er aktive for brukeren

Koble til Kafka-topicet

Abonner på min-side-microfrontend-topicet.
Send meldinger

Send enable/disable-meldinger via Kafka for å aktivere eller deaktivere microfrontenden for spesifikke brukere.

{
    "@action": "enable",
    "ident": <ident for bruker: fnr/dnr>,
    "microfrontend_id": <microfrontendId>,
    "sensitivitet": <nivå som kreves for å se innholdet, gyldige verdier: substantial og high>,
    "@initiated_by": <ditt-team>
}

{
    "@action": "disable",
    "ident": <ident for bruker: fnr/dnr>,
    "microfrontend_id": <microfrontendId>,
    "@initiated_by": <ditt-team>
}

Hva er sensitivitet?

sensitivitet samsvarer med ID-portens ACR-verdier.

Verdi	Når brukes den?
`high`	Innhold krever innlogging med `idporten-loa-high`.
`substantial`	Innhold kan vises uavhengig av innloggingsnivå.

Hvis feltet utelates, antar systemet high. Logger brukeren inn med idporten-loa-substantial og det finnes microfrontends som krever idporten-loa-high, får brukeren tilbud om «step-up»-innlogging. Se også NAIS-dokumentasjonen om security levels.

Retningslinjer

For å sikre en helhetlig brukeropplevelse på tvers av ulike typer innhold på Min side, stiller vi visse krav til både innholdet i og utformingen av microfrontends.

Tema	Krav og ressurser
Språk	Alt innhold skal finnes på bokmål, nynorsk og engelsk. Språkhåndtering er allerede rigget i templaten – se `src/language/text.ts`.
Design	Vi stiller visse designkrav til utformingen, for en helhetlig brukeropplevelse.
Dependencies	Bruker du client-side React-komponenter bør du være på samme major-versjon som tms-min-side.
Analytics	Vi bruker dekoratørens analytics-funksjon – se `src/pages/[locale]/index.astro`.
Fallback	Har microfrontenden eksterne kall bør du tilby en fallback – se `src/pages/[locale]/fallback.astro`.

Plassering på Min side

Min side består av tre soner der team kan plassere innhold:

Seksjon	Formål	Teknisk støtte
Din oversikt	Personlig status og løpende saker relatert til brukerens nåværende forhold til Nav.	`Kafka`
Produktkort	Produktkort er strengt tatt ikke microfrontends, men regelbaserte lenker som peker til innloggede produktsider for et område. Vi anbefaler heller Kafka, siden det er mer treffsikkert for brukerens situasjon, men produktkort kan være et alternativ når Kafka ikke er mulig.	`Kafka` & `Regelbasert`
Kanskje aktuelt for deg	Her får brukeren forslag til annet relevant innhold, for eksempel andre stønader eller støttetjenester brukeren kan ha rett på. Foreløpig vises kun regelbaserte microfrontends i denne seksjonen.	`Kafka` & `Regelbasert`