{"id":23306555,"url":"https://github.com/navikt/skjemabygging-formio","last_synced_at":"2025-08-22T10:31:26.014Z","repository":{"id":37090317,"uuid":"256434891","full_name":"navikt/skjemabygging-formio","owner":"navikt","description":"Skjemabygger for skjemadigitalisering i NAV","archived":false,"fork":false,"pushed_at":"2024-11-25T08:40:54.000Z","size":22093,"stargazers_count":6,"open_issues_count":8,"forks_count":0,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-11-25T08:45:06.784Z","etag":null,"topics":["formio","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/navikt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-17T07:37:34.000Z","updated_at":"2024-11-25T08:03:26.000Z","dependencies_parsed_at":"2023-10-01T23:14:03.018Z","dependency_job_id":"b51efbca-1142-46cf-ad64-41ac908583a4","html_url":"https://github.com/navikt/skjemabygging-formio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/navikt%2Fskjemabygging-formio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/navikt%2Fskjemabygging-formio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/navikt%2Fskjemabygging-formio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/navikt%2Fskjemabygging-formio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/navikt","download_url":"https://codeload.github.com/navikt/skjemabygging-formio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230582831,"owners_count":18248676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["formio","react"],"created_at":"2024-12-20T12:17:19.834Z","updated_at":"2025-08-22T10:31:26.005Z","avatar_url":"https://github.com/navikt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Monorepo for bygger og fyllut\n\nByggeren lar deg bygge form.io-skjemaer. Publisering av skjema vil bli en ny commit i\n[skjemautfylling-formio repoet](https://github.com/navikt/skjemautfylling-formio),\nog disse dataene vil så deployes sammen med fyllut.\n\n# Utvikling\n\n## Utvikling av nye Formio komponenter\n\nSe utfyllende dokumentasjon her: [Formio komponenter](packages/shared-components/src/formio/components/README.md)\n\n## Installere pakker lokalt\n\nFor å installere npm-pakker med @navikt-scope må man autentisere seg for registry `npm.pkg.github.com`,\nså hvis man får `401 Unauthorized` eller `Couldn't find package \"@navikt/\u003cpkgname\u003e\" required by \"\u003cother-pkgname\u003e\"\non the \"npm\" registry.` ved installering må man kjøre følgende kommando:\n\n    npm login --scope=@navikt --registry=https://npm.pkg.github.com\n\nLogg på med github-brukernavn, og passordet man skal oppgi er et personlig access token (classic) som kan\ngenereres under [developer settings på GitHub](https://github.com/settings/tokens).\nToken trenger kun `read:packages`. Husk å enable SSO for navikt-orgen!\n\n_(Les mer om bruk av Github npm registry i Nav her: https://github.com/navikt/frontend#github-npm-registry)_\n\n## Kommandoer\n\n| Kommando            | Beskrivelse                                                                  |\n| ------------------- | ---------------------------------------------------------------------------- |\n| yarn install        | laster ned avhengigheter                                                     |\n| yarn start          | starter både bygger og fyllut, inkludert backend                             |\n| yarn start:bygger   | starter bygger, inkludert backend                                            |\n| yarn start:fyllut   | starter fyllut, inkludert backend                                            |\n| yarn build          | bygger react-applikasjonene, ikke nødvendig for lokal utvikling (bruk start) |\n| yarn preview:bygger | starter bygger fra dist-mappen                                               |\n| yarn preview:fyllut | starter fyllut fra dist-mappen                                               |\n| yarn test           | kjører alle tester                                                           |\n| yarn test:coverage  | kjører alle tester med rapportering av dekningsgrad                          |\n| yarn cypress:bygger | kjører Cypress-tester for bygger                                             |\n| yarn cypress:fyllut | kjører Cypress-tester for fyllut                                             |\n| yarn mocks:fyllut   | starter Mocks Server for fyllut, brukes ved kjøring av Cypress-tester        |\n| yarn check-types    | sjekker at typene er korrekte                                                |\n| yarn clean          | sletter node_modules / dist / build / coverage for alle pakker i monorepoet  |\n| yarn lint           | se etter problemer i koden                                                   |\n| yarn get-tokens     | henter tokens som brukes mot eksterne api'er ved kjøring lokalt              |\n\n## Lokal konfigurasjon med dotenv\n\nVi bruker hovedsaklig [dotenv](https://www.npmjs.com/package/dotenv) for å konfigurere applikasjonene ved kjøring\nlokalt, og det er to steder det kan være interessant å opprette .env-filer:\n\n### 1) `packages/bygger-backend/.env`\n\nFor å kjøre opp byggeren lokalt er det én miljøvariabel som _må_ settes, og det er `PUSHER_KEY`. Denne finner man ved\nå logge på pusher.com (se [avsnitt nedenfor](#pushercom) for instruksjoner), gå til Channel `skjemabyggeren-dev`, og\nApp Keys i venstremenyen. Eventuelt kan man opprette sin egen Pusher-applikasjon.\n\n### 2) `packages/fyllut-backend/.env`\n\nFyllUt kan startes lokalt uten å sette noen miljøvariabler, men for at alle funksjoner skal fungere så må man legge\ninn konfigurasjon i denne filen.\n\n## Feature toggles\n\nI fyllut og bygger styres feature toggles ved hjelp av en miljøvariabel (`ENABLED_FEATURES`) som inneholder en\nkommaseparert\nliste med navn på features, eventuelt etterfulgt av likhetstegn og `true` (default) eller `false`.\n\nDette gjør det mulig å enable features i et enkelt miljø ved å sette denne miljøvariabelen\ni miljøets nais-config. Lokalt kan man overstyre default feature toggles ved å legge inn miljøvariabelen i en `.env`-fil\nunder `fyllut-backend` eller `bygger-backend`.\n\n    // Eksempel på hvordan miljøvariabelen kan se ut\n    ENABLED_FEATURES=\"translations,digitalInnsending,autoComplete=true,diff=false\"\n\nEksempelet over ville ført til et featureToggles-objekt som ser slik ut:\n\n    {\n      enableTranslations: true,\n      enableDigitalInnsending: true,\n      enableAutoComplete: true,\n      enableDiff: false\n    }\n\n## Frontend logger\n\nBåde bygger og fyllut har støtte for å logge feil som skjer i frontend. Begge backends har et endepunkt\n`/api/log/(info|error)` som tar feilmeldinger fra frontend og logger de.\n\nI fyllut er det for øvrig mulig å konfigurere frontend logger til å kun logge i nettleserens konsoll, noe som kan være\nnyttig under debugging lokalt. Dette gjøres ved sette `{\"browserOnly\":true}` i miljøvariabel:\n\n    FYLLUT_FRONTEND_LOGCONFIG={\"enabled\":true,\"logLevel\":\"trace\",\"browserOnly\":true}\n    BYGGER_FRONTEND_LOGCONFIG={\"enabled\":true,\"logLevel\":\"debug\",\"browserOnly\":true}\n\n## Kjøre Fyllut lokalt med mellomlagring\n\nLegg til feature toggle `mellomlagring` i `.env`-filen til fyllut for å skru på mellomlagring. For å kjøre lokalt med\nmellomlagring skrudd på må du ha en lokal instans av `innsending-api` kjørende.\nSe [innsending-api](https://github.com/navikt/innsending-api) for instrukser om hvordan du kan kjøre api-et lokalt. Legg\ntil url til den lokale instansen av innsending-api i miljøvariabelen `SEND_INN_HOST` i fyllut. For eksempel slik:\n\n    SEND_INN_HOST=http://127.0.0.1:9064\n\n## Kjøre Bygger lokalt med integrasjon mot forms-api\n\nFor kontinuerlig utvikling mot forms-api er det best å hente ned og kjøre https://github.com/navikt/forms-api lokalt.\nSett miljøvariabelen `FORMS_API_URL` i byggeren sin `.env`-fil til riktig port på localhost. F.eks:\n\n    FORMS_API_URL=http://localhost:8082\n\nAlternativt kan du kjøre `yarn get-tokens` for å hente access token ved hjelp av\n[azure-token-generator](https://azure-token-generator.intern.dev.nav.no/api/obo?aud=dev-gcp:fyllut-sendinn:forms-api)\n(krever trygdeetaten-bruker). Merk at tokenet kun er gyldig en begrenset periode. Bruk følgende Forms API url:\n\n    FORMS_API_URL=https://forms-api.intern.dev.nav.no\n    FORMS_API_ACCESS_TOKEN=\u003caccess-token\u003e // Access token settes ved kjøring av yarn get-tokens\n\n## Teste publisering av skjema på lokal maskin\n\nByggeren er konfigurert med default-verdier lokalt som sørger for at eventuelle publiseringer blir gjort mot en\ntest-branch i repo'et [skjemaufylling-formio](https://github.com/navikt/skjemautfylling-formio). Hvilken branch som\nbenyttes defineres av `PUBLISH_REPO_BASE`, og\ndefault-verdi kan overstyres i `packages/bygger-backend/.env`, men ikke test mot `master` siden det starter\nen deploy til produksjon :nerd_face:\n\nFor å autentisere deg er det anbefalt å bruke en personlig access token. Det vil gjøre det enklere å spore endringene i\nskjemautfylling-formio, siden committene vil ha eieren av tokenet som author. I prod og dev autentiserer byggeren seg\nmed en app installation token, som genereres av\nen [GitHub app](https://github.com/apps/nav-team-fyllut-sendinn-workflows). For å teste publisering lokalt med app\ninstallation token finner du de nødvendige miljøvariablene i secreten `github-app-installation` i Google Cloud Console.\n\nI `packages/bygger-backend/.env` kan man legge inn følgende miljøvariabler:\n\n| Miljøvariabel                        | Beskrivelse                                                                                                                                                        |\n| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| GITHUB_ACCESS_TOKEN                  | GitHub personal access token (se framgangsmåte i neste avsnitt). Anbefalt måte å autentisere seg lokalt.                                                           |\n| GITHUB*CLIENT*...\u003cbr/\u003eGITHUB*APP*... | Alternativ autentisering med GitHub app installation token i stedet for personal access token. Se `github-app-installation` i Google Cloud Console Secret Manager. |\n| GIT_SHA                              | Gyldig monorepo commit id (skjemabygging-formio), f.eks. `git rev-parse origin/master`                                                                             |\n| PUBLISH_REPO_BASE                    | Denne blir satt til test-publishing hvis ikke satt for lokalt utviklingsmiljø                                                                                      |\n\n### Hvordan opprette et personal access token på GitHub\n\nSe [GitHub docs](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)\n.\n\nVelg `repo` under `scopes`, og _authorize_ dette token for organisasjon `navikt` etter opprettelsen (_Configure SSO_).\n\n## Cypress-tester\n\n### Kjøre mot bygd kode\n\nPå GitHub går cypress-testene mot fyllut og bygger kjørende med bygd kode. Lokalt kjører man da først `yarn build`,\nog så `yarn preview:bygger` eller `yarn preview:fyllut` (starter app fra dist-mappen). For 'fyllut må man i tillegg\nkjøre opp Mocks Server med `yarn mocks:fyllut`. Deretter starter man cypress-testene med `yarn cypress:bygger`\neller `yarn cypress:fyllut`.\n\n### Kjøre mot utviklingsmiljø\n\nMan kan også kjøre cypress-testene mot vanlig utviklingsmiljø, dvs. `yarn start:bygger` eller `yarn start:fyllut`, men\nfor fyllut må man da bruke verdiene fra `fyllut-backend/.env.test` i `fyllut-backend/.env` og kjøre opp\n`yarn mocks:fyllut` pga. at cypress-testene basererer seg på responsdata fra Mocks Server.\n\nVed kjøring mot lokalt utviklingsmiljø får man ikke testet eventuell logikk som skjer ved lasting av index.html siden\ndet ikke er den faktiske backenden som håndterer det under lokal utvikling, så hvis noen av testene har sjekker på\nkoden som kjøres da vil de feile ved kjøring på denne måten.\n\n## Fagsystemsonen\n\nVi kommuniserer med fagsystemsonen blant annet for å hente enheter og generere førsteside, og det skjer ved kall\nvia [skjemabygging-proxy](https://github.com/navikt/skjemabygging-proxy) som kjører i fss.\n\nFor å få til dette lokalt trenger du å kjøre naisdevice. I tillegg trenger fyllut-backend og bygger-backend tilgang\ntil sin client secret som miljøvariabel. Variablene kan f.eks legges til i en `.env`-fil i fyllut-backend og\nbygger-backend, med innhold `AZURE_APP_CLIENT_SECRET=\u003cden-respektive-appen-sin-client-secret\u003e`. Client secret til\nfyllut og bygger i dev-gcp finner du ved å gå inn i dev-gcp clusteret med kubectl (krever naisdevice og tilgang\ntil google cloud) og hente ut miljøvariabler fra podden, f.eks slik:\n\n`kubectl exec \u003cpod-name\u003e -c [skjemabygging-formio|skjemautfylling] -- env`\n\n## Brukeradministrasjon\n\n### Bygger\n\nI byggeren logger vi inn med [Azure AD](https://doc.nais.io/security/auth/azure-ad/sidecar/), bortsett fra under\nutvikling på lokal maskin, hvor utviklerene logger inn\nmed [Formio-brukere](https://help.form.io/userguide/user-authentication).\nSe [oppretting av bruker](#opprette-formio-bruker-for-lokal-utvikling).\n\nI Azure AD er det opprettet grupper for tilgangsstyring til ulike funksjoner i applikasjonen. Gruppene har prefiks\n\"Skjemabygging\", og kan søkes fram på Microsofts\n[Access Panel Groups](https://account.activedirectory.windowsazure.com/r#/groups).\n_Eierene_ av gruppene kan legge til nye medlemmer.\n\nEn oversikt over gruppenes id'er vil dessuten ligge i koden for bygger backend såfremt de faktisk er i bruk:\n\n- [azureAd.ts](https://github.com/navikt/skjemabygging-formio/tree/master/packages/bygger-backend/src/middleware/azureAd.ts)\n\n### Opprette Formio-bruker for lokal utvikling\n\n- Logg inn på https://formio-api.intern.dev.nav.no med brukernavn og passord fra Google Secrets\n- Velg `Nav Skjemabase` -\u003e `User` -\u003e `Use` og skriv inn ønsket brukernavn/passord\n\n### Fyllut\n\nFyllut støtter uinnlogget utfylling av skjemaer, men har også mulighet for innlogging med\n[ID-porten](https://doc.nais.io/security/auth/idporten/sidecar/) for å kunne benytte digital innsending.\n\n## Bygge docker-image for testing av produksjonsbygg lokalt\n\nDersom man trenger å teste produksjonsbygg av applikasjonene lokalt kan man bygge docker image lokalt, men først må man\nbygge applikasjonen.\n\n    yarn \u0026\u0026 yarn build\n\nDocker-image bygges og startes lokalt på følgende måte:\n\n    # image: bygger\n    docker build --tag bygger -f ./docker/Dockerfile.bygger --build-arg git_sha=local ./packages\n    \u003cTODO docker run command\u003e\n\n    # image: fyllut-base\n    docker build --tag fyllut-base -f ./docker/Dockerfile.fyllut-base --build-arg git_sha=local ./packages\n    docker run \\\n       -e FORMS_SOURCE=formsapi-staging \\\n       -e FORMS_API_URL=https://forms-api.intern.dev.nav.no \\\n       -e NAIS_CLUSTER_NAME=dev-gcp \\\n       -p 8080:8080 fyllut-base\n\n# Pusher.com\n\nPusher brukes til å varsle innloggede brukere i byggeren når det har blitt deployet en ny versjon av FyllUt,\nf.eks. når en skjemadefinisjon har blitt publisert.\n\nKontoen på [pusher.com](https://pusher.com/) er opprettet med skjemadigitalisering@nav.no (gruppe), og passordet for å\nlogge på ligger i Google Secret Manager.\n\n# Henvendelser\n\nSpørsmål knyttet til koden eller prosjektet kan stilles som issues her på GitHub.\n\n## For Nav-ansatte\n\nInterne henvendelser kan sendes via Slack i kanalen #team-fyllut-sendinn\n\n## Kode generert av GitHub Copilot\n\nDette repoet bruker GitHub Copilot til å generere kode.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnavikt%2Fskjemabygging-formio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnavikt%2Fskjemabygging-formio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnavikt%2Fskjemabygging-formio/lists"}