Deploy a Single Page Application

This how-to guide shows you how to deploy your Single Page Application (SPA) to the CDN and NAIS without building and deploying a Docker image.

Prerequisites¶

A NAIS team.
A GitHub repository that the team has access to.
The application must build and package as a folder with an index.html, and its other static files.

Limitations¶

Versioning is not supported
Clean-up of old static files are not supported
Changing of app name is not supported

Deploy with the SPA action¶

name: Deploy SPA

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    permissions:
      contents: 'read'
      id-token: 'write'

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: nais/deploy/actions/spa-deploy/v2@master
        with:
          app: my-frontend
          team: <team slug> # Required, e.g. "team-name"
          source: <The path to your build folder or assets>
          ingress: https://team.nav.no/my-frontend
          environment: dev
          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }} # Provided as Organization Secret
          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }} # Provided as Organization Variable

For more information on the inputs and outputs of the action, see the SPA deploy action reference.

Static files will be uploaded with the following NAV CDN address:

https://cdn.nav.no/<team>/<app>/<env>/

Multiple ingresses¶

If you want your app exposed on multiple ingresses you can use a comma separated list in the ingress field:

      - uses: nais/deploy/actions/spa-deploy/v2@master
        with:
          ...
          ingress: https://team.nav.no/my-frontend,https://team.nav.no/my-other-ingress

App configuration¶

Create React App¶

To get the correct link in the static files generated by your Create React App you need to set the PUBLIC_URL variable. This can be done in one of two ways:

Either in a .env file:

PUBLIC_URL=https://cdn.nav.no/<team>/<app>/<env>/

Or with an env in your GitHub Actions when you run npm run build:

    steps:
      - run: npm run build
        env:
          PUBLIC_URL: https://cdn.nav.no/<team>/<app>/<env>

Next.js¶

You need to run next export and set assetPrefix in next.config.js when building a static Next.js application:

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  // Use the CDN in production and localhost for development.
  assetPrefix: isProd ? 'https://cdn.nav.no/<team>/<app>/<env>' : undefined,
}