GitHub Actions with NextJS
Learn how to configure GitHub Actions with Dotenv Vault for a NextJS application. This tutorial assumes you have already created a .env file and synced it.
You can find a complete example repo here.
1. Add GitHub Actions yaml file
In your NextJS project add the file .github/workflows/main.yml.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# .github/workflow/main.yml
name: npm run build
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm install
- run: npm run build
env:
DOTENV_KEY: ${{ secrets.DOTENV_KEY }}
2. Preload dotenv-vault-core
Install dotenv-vault-core
1
$ npm install dotenv-vault-core --save
Preload NextJS scripts using dotenv-vault-core. This will inject the environment variables ahead of NextJS.
1
2
3
4
5
6
"scripts": {
"dev": "node -r dotenv-vault-core/config ./node_modules/.bin/next dev",
"build": "node -r dotenv-vault-core/config ./node_modules/.bin/next build",
"start": "node -r dotenv-vault-core/config ./node_modules/.bin/next start",
"lint": "node -r dotenv-vault-core/config ./node_modules/.bin/next lint"
},
3. Run dotenv-vault build
Run npx dotenv-vault build to build your encrypted .env.vault file.
1
$ npx dotenv-vault build
4. Set DOTENV_KEY
Run npx dotenv-vault keys ci.
1
2
3
4
$ npx dotenv-vault keys ci
remote: Listing .env.vault decryption keys... done
dotenv://:key_1234@dotenv.org/vault/.env.vault?environment=ci
Visit your GitHub Project > Settings > Secrets > Actions and click ‘New Repository Secret’.
Set DOTENV_KEY to the value returned in step 4.
5. Commit and push
That’s it!
Commit those changes safely to code and push to GitHub.
When the CI runs, it will recognize the DOTENV_KEY, decrypt the .env.vault file, and load the CI environment variables to ENV. If a DOTENV_KEY is not set (like during development on your local machine) it will fall back to regular dotenv.
You will know it worked when you see the message ‘Loading env from encrypted .env.vault’.
