Deploy an Astro.js App to Netlify

Deploy an Astro.js app with an encrypted .env.vault file to Netlify.

Find a complete code example on GitHub for this guide.

Initial setup

Generate an astro.js application. When prompted, choose the Empty project option.

npm create astro@latest

This will create a handful of files.

ls -1
README.md
astro.config.mjs
node_modules/
package-lock.json
package.json
public/
src/
tsconfig.json

Edit src/pages/index.astro to include import.meta.env.PUBLIC_HELLO.

src/pages/index.astro

---
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro</title>
	</head>
	<body>
		<h1>Hello {import.meta.env.PUBLIC_HELLO}.</h1>
	</body>
</html>

Add the astro netlify adapter.

npx astro add netlify

Add netlify.toml.

netlify.toml

[build]
  command = "npm run build"
  publish = "dist"

Commit that to code and deploy it to Netlify.

npx netlify-cli@latest deploy --build --prod

yourapp.netlify.app

Once deployed, your app will say Hello . as it doesn't have a way to access the environment variable yet. Let's do that next.

Install dotenv

Install dotenv.

npm install dotenv --save # Requires dotenv >= 16.1.0

Create a .env file in the root of your project.

.env

# .env
PUBLIC_HELLO="World"

Preface your npm package.json scripts with dotenv preloading.

package.json

{
  ...
  "scripts": {
    "dev": "node -r dotenv/config ./node_modules/.bin/astro dev",
    "start": "node -r dotenv/config ./node_modules/.bin/astro dev",
    "build": "node -r dotenv/config ./node_modules/.bin/astro build",
    "preview": "node -r dotenv/config ./node_modules/.bin/astro preview",
    "astro": "node -r dotenv/config ./node_modules/.bin/astro"
  },
  ...
}

Try running it locally.

npm run dev
Local    http://localhost:3000/

Visit localhost:3000

Perfect. process.env now has the keys and values you defined in your .env file.

That covers local development. Let's solve for production next.

Build .env.vault

Push your latest .env file changes and edit your production secrets. Learn more about syncing

npx dotenv-vault@latest push
npx dotenv-vault@latest open production

Use the UI to configure those secrets per environment.

dotenv.org

Then build your encrypted .env.vault file.

npx dotenv-vault@latest build

Its contents should look something like this.

.env.vault

#/-------------------.env.vault---------------------/
#/         cloud-agnostic vaulting standard         /
#/   [how it works](https://dotenv.org/env-vault)   /
#/--------------------------------------------------/

# development
DOTENV_VAULT_DEVELOPMENT="/HqNgQWsf6Oh6XB9pI/CGkdgCe6d4/vWZHgP50RRoDTzkzPQk/xOaQs="
DOTENV_VAULT_DEVELOPMENT_VERSION=2

# production
DOTENV_VAULT_PRODUCTION="x26PuIKQ/xZ5eKrYomKngM+dO/9v1vxhwslE/zjHdg3l+H6q6PheB5GVDVIbZg=="
DOTENV_VAULT_PRODUCTION_VERSION=2

Deploy

Commit those changes safely to code and redeploy to netlify.

npx netlify-cli@latest deploy --build --prod

yourapp.netlify.app

That's it! On deploy, your .env.vault file will be decrypted and its production secrets injected as environment variables – just in time.

You'll know things worked correctly when you see 'Loading env from encrypted .env.vault' in your logs. If a DOTENV_KEY is not set (for example when developing on your local machine) it will fall back to standard dotenv functionality.

npx netlify-cli@latest deploy --build --prod

You succesfully used the new .env.vault standard to encrypt and deploy your secrets. This is much safer than scattering your secrets across multiple third-party platforms and tools. Whenever you need to add or change a secret, just rebuild your .env.vault file and redeploy.

Frameworks › Astro.js