Skip to main content

Kartkatalog-frontend

Kartkatalogen er en tjeneste for å vise metadata som er registrert i GeoNetwork.

Kildekode og oppsettsinstruksjoner finnes i GitHub-repoet.

Tech stack

KategoriTeknologi
RammeverkReact 18, React Router 6
State managementRedux 4 + Redux Thunk
ByggverktøyVite 7
StylingSCSS, Digdir Designsystem
AutentiseringGeoID via OIDC (oidc-client-ts)
AnalysePostHog, Google Tag Manager
TestingJest

Prosjektstruktur

src/
├── actions/ # Redux action creators
├── reducers/ # Redux reducers
├── components/
│ ├── routes/ # Sidekomponenter (én per rute)
│ └── partials/ # Gjenbrukbare UI-komponenter
├── utils/ # Hjelpefunksjoner (store, auth, config)
├── helpers/ # URL-håndtering m.m.
└── scss/ # Globale stiler og tema

Ruter

RuteBeskrivelse
/Søkeside med fasettfiltre
/metadata/{uuid}Detaljvisning av metadata
/kart/{id}Interaktivt kartviser
/login-oidcOIDC-callback fra GeoID

Autentisering

Innlogging håndteres via GeoID (OpenID Connect). Konfigureres med VITE_GEOID_*-variabler i .env. Autorisasjon skjer mot BAAT via VITE_GEOID_BAATAUTHZ_APIURL.

Bygg og deployment

Produksjonsbygget lages med yarn build og pakkes i et Docker-image (multi-stage: Node-bygg → Nginx runtime). GitHub Actions kjører tester, bygger image, pusher til ghcr.io/kartverket/geonorge-kartkatalog-frontend og oppdaterer deployment-config i kartverket/geonorge-apps.

Miljøkonfigurasjon injiseres dynamisk av Nginx via /config.js ved oppstart, slik at samme image kan brukes i alle miljøer.

Prerender

For at søkemotorer skal kunne indeksere innhold som rendres klient-side, kjøres en selvhostet Prerender-tjeneste (prerender/-mappen). Nginx oppdager bottrafikk via user-agent og proxyer slike forespørsler til prerender-tjenesten på port 3000, som returnerer ferdigrendret HTML.

Tjenesten kjøres som en egen container og konfigureres gjennom docker-compose.yml.

Systemarkitektur