Setup dockerfile and GHA.

.github/workflows/deploy.yaml

@@ -0,0 +1,147 @@
+name: Build and deploy
+
+on: [ push ]
+
+env:
+  IMAGE: ghcr.io/${{ github.repository }}:${{ github.sha }}
+  LATEST_IMAGE: ghcr.io/${{ github.repository }}:latest
+
+jobs:
+  install:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: ./node_modules
+          key: modules-${{ hashFiles('package-lock.json') }}
+
+      - uses: actions/setup-node@v4
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        with:
+          node-version: "20.x"
+          cache: "npm"
+
+      - run: npm ci --ignore-scripts
+        if: steps.node_modules.outputs.cache-hit != 'true'
+
+  test:
+    needs: [ install ]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: ./node_modules
+          key: modules-${{ hashFiles('package-lock.json') }}
+
+      - run: npm run test
+
+  playwright:
+    needs: [ install ]
+    timeout-minutes: 2
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: ./node_modules
+          key: modules-${{ hashFiles('package-lock.json') }}
+
+      - uses: actions/setup-node@v4
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        with:
+          node-version: "20.x"
+          cache: "npm"
+          registry-url: "https://npm.pkg.github.com"
+
+      - name: "Install dependencies"
+        run: npm ci --ignore-scripts
+        if: steps.node_modules.outputs.cache-hit != 'true'
+
+      - name: Store Playwright's Version
+        run: |
+          PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//')
+          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+
+      - name: Cache Chromium browser for Playwright's Version
+        id: cache-chromium-browser
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: chromium-with-playwright-version-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Install Chromium browser
+        if: steps.cache-chromium-browser.outputs.cache-hit != 'true'
+        run: npx playwright install chromium --with-deps
+
+      - name: Run Playwright Tests
+        run: npm run playwright:verbose
+
+      - name: Store Artifacts from Failed Tests
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 7
+
+  build:
+    needs: [ install ]
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: ./node_modules
+          key: modules-${{ hashFiles('package-lock.json') }}
+
+      - run: npm run build
+
+      # Bygg docker image
+      - uses: docker/setup-buildx-action@v3
+      - uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          pull: true
+          tags: ${{ env.IMAGE }},${{ env.LATEST_IMAGE }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Cache static files
+        uses: actions/cache@v4
+        with:
+          path: |
+            ./build
+          key: ${{ github.sha }}
+
+
+
+
+

Dockerfile

@@ -0,0 +1,13 @@
+FROM node:20-alpine
+
+WORKDIR /app
+COPY build/ build/
+COPY server/ server/
+COPY public/ public/
+COPY node_modules/ node_modules/
+COPY package.json ./
+COPY environment.js ./
+
+EXPOSE 3000
+
+CMD ["npm", "run", "start"]

app/components/app-bar/AppBar.tsx

@@ -8,12 +8,12 @@ import {
     TasklistIcon,
     XMarkIcon
 } from '@navikt/aksel-icons';
-import {Link} from "@remix-run/react";
+import { NavLink, Link} from "@remix-run/react";
 import MeInfo from "~/components/app-bar/MeInfo";
 import {IMeInfo} from "~/data/types";
 import {BodyShort, Box, Button, HGrid, Hide, HStack, LinkPanel, Popover} from "@navikt/ds-react";
 
-export function AppBar(props: { me: IMeInfo }) {
+export function AppBar(props: { me: IMeInfo, basePath?: string }) {
 
     const buttonRef = useRef<HTMLButtonElement>(null);
     const [menuOpen, setMenuOpen] = useState(false);
@@ -65,36 +65,37 @@ export function AppBar(props: { me: IMeInfo }) {
                     <Link to="/#" onClick={() => setMenuOpen(false)}>Til forsiden</Link>
                     <HGrid gap="4" columns={2}>
 
+
                         <Box>
-                            <LinkPanel border={false} href="/users">
+                            <LinkPanel border={false}  href={`${props.basePath}/users`}>
                                 <LinkPanel.Title><PersonIcon title="a11y-title"
                                                              fontSize="1.5rem"/> Brukere</LinkPanel.Title>
                             </LinkPanel>
 
-                            <LinkPanel border={false} href="/roles">
+                            <LinkPanel border={false} href={`${props.basePath}/roles`}>
                                 <LinkPanel.Title><PersonGroupIcon title="a11y-title"
                                                                   fontSize="1.5rem"/> Grupper</LinkPanel.Title>
                             </LinkPanel>
 
-                            <LinkPanel border={false} href="/resources">
+                            <LinkPanel border={false} href={`${props.basePath}/resources`}>
                                 <LinkPanel.Title><SandboxIcon title="a11y-title"
                                                               fontSize="1.5rem"/> Ressurser</LinkPanel.Title>
                             </LinkPanel>
                         </Box>
                         <Box>
-                            <LinkPanel border={false} href="/resource-module-admin">
+                            <LinkPanel border={false} href={`${props.basePath}/resource-module-admin`}>
                                 <LinkPanel.Title>
                                     <ClipboardCheckmarkIcon title="a11y-title" fontSize="1.5rem"/>
                                     Ressursmoduladministrator
                                 </LinkPanel.Title>
                             </LinkPanel>
-                            <LinkPanel border={false} href="/resource-admin">
+                            <LinkPanel border={false} href={`${props.basePath}/resource-admin`}>
                                 <LinkPanel.Title>
                                     <TasklistIcon title="a11y-title" fontSize="1.5rem"/>
                                     Ressursadministrator
                                 </LinkPanel.Title>
                             </LinkPanel>
-                            <LinkPanel border={false} href="/kontroll-admin/define-role">
+                            <LinkPanel border={false} href={`${props.basePath}/kontroll-admin/define-role`}>
                                 <LinkPanel.Title>
                                     <TasklistIcon title="a11y-title" fontSize="1.5rem"/>
                                     Kontrolladministrasjon

app/root.tsx

@@ -10,6 +10,7 @@ import type {LoaderFunctionArgs} from "@remix-run/router";
 import {ToastContainer} from "react-toastify";
 import {BodyShort, Box, Page} from "@navikt/ds-react";
 import {AppBar} from "~/components/app-bar/AppBar";
+import {BASE_PATH} from "../environment";
 
 
 export const meta: MetaFunction = () => {
@@ -41,11 +42,15 @@ export const links: LinksFunction = () => [
 
 export async function loader({request}: LoaderFunctionArgs) {
     const response = await fetchMeInfo(request.headers.get("Authorization"));
-    return json(await response.json());
+    const me = await response.json();
+    return json({
+        me,
+        basePath: BASE_PATH === "/" ? "" : BASE_PATH
+    });
 }
 
 export default function App() {
-    const me = useLoaderData<IMeInfo>();
+    const {me, basePath} = useLoaderData<typeof loader>();
 
     return (
         <html lang="no">
@@ -56,7 +61,7 @@ export default function App() {
         <body>
         <ToastContainer autoClose={5000} newestOnTop={true} role="alert"/>
 
-        <Layout me={me}>
+        <Layout me={me} basePath={basePath}>
             <Outlet/>
         </Layout>
 
@@ -70,9 +75,10 @@ export default function App() {
 interface LayoutProps {
     children: any
     me?: any
+    basePath?: string
 }
 
-const Layout = ({children, me}: LayoutProps) => {
+const Layout = ({children, me, basePath}: LayoutProps) => {
     return (
         <Page
             footer={
@@ -85,7 +91,7 @@ const Layout = ({children, me}: LayoutProps) => {
         >
             <Box className={"footer"} as="header">
                 <Page.Block width="2xl">
-                    <AppBar me={me}/>
+                    <AppBar me={me} basePath={basePath}/>
                 </Page.Block>
             </Box>
             <Box

app/routes/kontroll-admin.define-role.$id.tsx

@@ -10,9 +10,9 @@ import {
 } from "@remix-run/react";
 import React, {useEffect, useState} from "react";
 import {Button, Table} from "@navikt/ds-react";
-import PermissionsTableCheckbox from "~/components/kontroll-admin/PermissionsTableCheckbox";
+import PermissionsTableCheckbox from "../components/kontroll-admin/PermissionsTableCheckbox";
 import {toast} from "react-toastify";
-import styles from "~/components/kontroll-admin/kontroll-admin.css?url";
+import styles from "../components/kontroll-admin/kontroll-admin.css?url";
 import {ConfirmSafeRedirectModal} from "~/data/kontrollAdmin/ConfirmSafeRedirectModal";
 
 export async function loader({params, request}: LoaderFunctionArgs) {

app/routes/kontroll-admin.features-to-role.tsx

@@ -4,7 +4,7 @@ import React, {useEffect} from "react";
 import {LoaderFunctionArgs} from "@remix-run/router";
 import {fetchAccessRoles} from "~/data/kontrollAdmin/kontroll-admin-define-role";
 import {IResourceModuleAccessRole} from "~/data/resourceModuleAdmin/types";
-import styles from "~/components/kontroll-admin/kontroll-admin.css?url";
+import styles from "../components/kontroll-admin/kontroll-admin.css?url";
 
 export function links() {
     return [{rel: 'stylesheet', href: styles}]

app/routes/resource-admin.$id.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from "~/components/resource/resource.css?url"
+import styles from "../components/resource/resource.css?url"
 import {Box, Heading} from "@navikt/ds-react";
 import {useLoaderData, useRouteLoaderData} from "@remix-run/react";
 import  {IResource} from "~/data/types";

app/routes/resource-module-admin._index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import {Heading} from "@navikt/ds-react";
 import {useLoaderData} from "@remix-run/react";
-import ResourceModuleAdminUsersTable from "~/components/resource-module-admin/ResourceModuleAdminUsersTable";
+import ResourceModuleAdminUsersTable from "../components/resource-module-admin/ResourceModuleAdminUsersTable";
 import {LoaderFunctionArgs} from "@remix-run/router";
 import {json} from "@remix-run/node";
 import {fetchUsersWithAssignment} from "~/data/resourceModuleAdmin/resource-module-admin";
-import styles from "~/components/resource-module-admin/resourceModuleAdmin.css?url";
+import styles from "../components/resource-module-admin/resourceModuleAdmin.css?url";
 import {IUnitItem} from "~/data/types";
 import {fetchOrgUnits} from "~/data/fetch-resources";
 import {

app/routes/resource-module-admin.administer.$id.tsx

@@ -15,11 +15,11 @@ import {
 import {ActionFunctionArgs, json} from "@remix-run/node";
 import {useEffect, useState} from "react";
 import {fetchAccessRoles} from "~/data/kontrollAdmin/kontroll-admin-define-role";
-import DeleteAssignment from "~/components/resource-module-admin/administer/ResourceModuleDeleteAssignmentModal";
-import AdministerToolbar from "~/components/resource-module-admin/administer/AdministerToolbar";
-import ResourceModuleResetModal from "~/components/resource-module-admin/administer/ResourceModuleResetModal";
-import RoleAssignmentTable from "~/components/resource-module-admin/administer/RoleAssignmentTable";
-import styles from "~/components/resource-module-admin/resourceModuleAdmin.css?url";
+import DeleteAssignment from "../components/resource-module-admin/administer/ResourceModuleDeleteAssignmentModal";
+import AdministerToolbar from "../components/resource-module-admin/administer/AdministerToolbar";
+import ResourceModuleResetModal from "../components/resource-module-admin/administer/ResourceModuleResetModal";
+import RoleAssignmentTable from "../components/resource-module-admin/administer/RoleAssignmentTable";
+import styles from "../components/resource-module-admin/resourceModuleAdmin.css?url";
 import {toast} from "react-toastify";
 
 export function links() {

app/routes/resource-module-admin.opprett-ny-tildeling.tsx

@@ -2,7 +2,7 @@ import {Button, ExpansionCard, Heading, Switch} from "@navikt/ds-react";
 import {Form, useActionData, useLoaderData, useNavigate, useSearchParams} from "@remix-run/react";
 import {LoaderFunctionArgs} from "@remix-run/router";
 import React, {useEffect, useState} from "react";
-import TildelingToolbar from "~/components/resource-module-admin/opprettTildeling/TildelingToolbar";
+import TildelingToolbar from "../components/resource-module-admin/opprettTildeling/TildelingToolbar";
 import {fetchOrgUnits} from "~/data/fetch-resources";
 import {IUnitItem, IUnitTree} from "~/data/types";
 import {fetchAccessRoles} from "~/data/kontrollAdmin/kontroll-admin-define-role";
@@ -12,15 +12,15 @@ import {
     IResourceModuleUser,
     IResourceModuleUsersPage
 } from "~/data/resourceModuleAdmin/types";
-import TildelUserSearchResultList from "~/components/resource-module-admin/opprettTildeling/TildelUserSearchResultList";
+import TildelUserSearchResultList from "../components/resource-module-admin/opprettTildeling/TildelUserSearchResultList";
 import {
     fetchUsersWhoCanGetAssignments,
     postNewTildelingForUser,
 } from "~/data/resourceModuleAdmin/resource-module-admin";
-import styles from "~/components/resource-module-admin/resourceModuleAdmin.css?url";
-import OrgUnitTreeSelector from "~/components/org-unit-selector/OrgUnitTreeSelector";
-import SummaryOfTildeling from "~/components/resource-module-admin/opprettTildeling/SummaryOfTildeling";
-import ChooseAccessRole from "~/components/resource-module-admin/opprettTildeling/ChooseAccessRole";
+import styles from "../components/resource-module-admin/resourceModuleAdmin.css?url";
+import OrgUnitTreeSelector from "../components/org-unit-selector/OrgUnitTreeSelector";
+import SummaryOfTildeling from "../components/resource-module-admin/opprettTildeling/SummaryOfTildeling";
+import ChooseAccessRole from "../components/resource-module-admin/opprettTildeling/ChooseAccessRole";
 import {CheckmarkCircleIcon} from "@navikt/aksel-icons";
 import {ActionFunctionArgs} from "@remix-run/node";
 import {toast} from "react-toastify";

app/routes/resources.$id.role-assignments.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from "~/components/resource/resource.css?url"
+import styles from "../components/resource/resource.css?url"
 import {useLoaderData, useRouteLoaderData} from "@remix-run/react";
 import  {IAssignedRoles} from "~/data/types";
 import {json} from "@remix-run/node";

app/routes/resources.$id.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from "~/components/resource/resource.css?url"
+import styles from "../components/resource/resource.css?url"
 import {Box, Heading, LinkPanel} from "@navikt/ds-react";
 import {Outlet, useLoaderData, useRouteLoaderData} from "@remix-run/react";
 import type {IResource} from "~/data/types";

app/routes/resources.$id.user-assignments.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from "~/components/resource/resource.css?url"
+import styles from "../components/resource/resource.css?url"
 import {useLoaderData, useRouteLoaderData} from "@remix-run/react";
 import  {IAssignedUsers} from "~/data/types";
 import {json} from "@remix-run/node";

app/routes/resources._index.tsx

@@ -7,8 +7,8 @@ import type {LoaderFunctionArgs} from "@remix-run/router";
 import {fetchOrgUnits, fetchResources} from "~/data/fetch-resources";
 import {ResourceTable} from "~/components/resource/ResourceTable";
 import {ResourceSearch} from "~/components/resource/ResourceSearch";
-import OrgUnitFilterModal from "~/components/org-unit-filter/OrgUnitFilterModal";
-import styles from "~/components/org-unit-filter/orgUnitFilter.css?url"
+import OrgUnitFilterModal from "../components/org-unit-filter/OrgUnitFilterModal";
+import styles from "../components/org-unit-filter/orgUnitFilter.css?url"
 
 export function links() {
     return [{rel: 'stylesheet', href: styles}]