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:
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
Custom ingress¶
If you have your own domain that you want to host your SPA on, you need to supply the action with ingressClass
and set the environment
-field to the cluster you want to deploy to.
- uses: nais/deploy/actions/spa-deploy/v2@master
with:
...
ingress: https://you-domain.no
ingressClass: nais-ingress-external
environment: prod-gcp
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:
- Or with an
env
in your GitHub Actions when you runnpm run build
:
- https://create-react-app.dev/docs/advanced-configuration/
- https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env
Next.js¶
You need to run next export
and set assetPrefix
in next.config.js
when building a static Next.js application: