mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-12 23:37:14 +00:00
76 lines
3.6 KiB
Markdown
76 lines
3.6 KiB
Markdown
---
|
|
title: ".env"
|
|
description: "A .env file specifies your build/dev-time environment variables."
|
|
head.title: ".env"
|
|
navigation.icon: i-ph-file
|
|
---
|
|
|
|
::important
|
|
This file should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing secrets to your repository.
|
|
::
|
|
|
|
## Dev, Build and Generate Time
|
|
|
|
Nuxt CLI has built-in [dotenv](https://github.com/motdotla/dotenv) support in development mode and when running [`nuxi build`](/docs/api/commands/build) and [`nuxi generate`](/docs/api/commands/generate).
|
|
|
|
In addition to any process environment variables, if you have a `.env` file in your project root directory, it will be automatically loaded **at dev, build and generate time**. Any environment variables set there will be accessible within your `nuxt.config` file and modules.
|
|
|
|
```bash [.env]
|
|
MY_ENV_VARIABLE=hello
|
|
```
|
|
|
|
::note
|
|
Note that removing a variable from `.env` or removing the `.env` file entirely will not unset values that have already been set.
|
|
::
|
|
|
|
## Custom File
|
|
|
|
If you want to use a different file - for example, to use `.env.local` or `.env.production` - you can do so by passing the `--dotenv` flag when using `nuxi`.
|
|
|
|
```bash [Terminal]
|
|
npx nuxi dev --dotenv .env.local
|
|
```
|
|
|
|
When updating `.env` in development mode, the Nuxt instance is automatically restarted to apply new values to the `process.env`.
|
|
|
|
::important
|
|
In your application code, you should use [Runtime Config](/docs/guide/going-further/runtime-config) instead of plain env variables.
|
|
::
|
|
|
|
## Production
|
|
|
|
**After your server is built**, you are responsible for setting environment variables when you run the server.
|
|
|
|
Your `.env` files will not be read at this point. How you do this is different for every environment.
|
|
|
|
This design decision was made to ensure compatibility across various deployment environments, some of which may not have a traditional file system available, such as serverless platforms or edge networks like Cloudflare Workers.
|
|
|
|
Since `.env` files are not used in production, you must explicitly set environment variables using the tools and methods provided by your hosting environment. Here are some common approaches:
|
|
|
|
* You can pass the environment variables as arguments using the terminal:
|
|
|
|
`$ DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs`
|
|
|
|
* You can set environment variables in shell configuration files like `.bashrc` or `.profile`.
|
|
|
|
* Many cloud service providers, such as Vercel, Netlify, and AWS, provide interfaces for setting environment variables via their dashboards, CLI tools or configuration files.
|
|
|
|
## Production Preview
|
|
|
|
For local production preview purpose, we recommend using [`nuxi preview`](/docs/api/commands/preview) since using this command, the `.env` file will be loaded into `process.env` for convenience. Note that this command requires dependencies to be installed in the package directory.
|
|
|
|
Or you could pass the environment variables as arguments using the terminal. For example, on Linux or macOS:
|
|
|
|
```bash [Terminal]
|
|
DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs
|
|
```
|
|
|
|
Note that for a purely static site, it is not possible to set runtime configuration config after your project is prerendered.
|
|
|
|
:read-more{to="/docs/guide/going-further/runtime-config"}
|
|
|
|
::note
|
|
If you want to use environment variables set at build time but do not care about updating these down the line (or only need to update them reactively _within_ your app) then `appConfig` may be a better choice. You can define `appConfig` both within your `nuxt.config` (using environment variables) and also within an `~/app.config.ts` file in your project.
|
|
:read-more{to="/docs/guide/directory-structure/app-config"}
|
|
::
|