.env file not working in production build
This is my first nuxt project. The .env file isn't being passed to the production build. From what I understood, I have to map the .env manually to the nuxt.config, is that correct? Also I set the NITRO_PORT in .env and that isn't passed either.
10 Replies
Hi @Thick Black W. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You're correct: in Nuxt, the
If you want to set
You should define your variables in
-
.env file is only used during development, build, and generate time. After you build your application for production, the .env file is not read at runtime. This is by design, to ensure compatibility with various deployment environments that may not have a file system available for reading .env files.
What you need to do:
- For development and build: Nuxt will automatically load variables from your .env file if it's in your project root. These variables are accessible in your nuxt.config and modules during dev/build/generate time.
- For production runtime: You must set environment variables using your hosting environment's tools (e.g., through your server's shell, cloud provider dashboard, or deployment configuration). The .env file will be ignored at this stage.
Example:If you want to set
NITRO_PORT in production, you need to do something like:
Or set it in your hosting provider's environment variable settings.
Mapping to runtimeConfig:You should define your variables in
runtimeConfig in nuxt.config.ts to make them available in your app, and Nuxt will automatically replace them with matching environment variables at runtime if they are set (e.g., NUXT_PUBLIC_API_BASE for public.apiBase).
Summary:-
.env is for dev/build only.
- For production, set environment variables in your deployment environment.
- Map variables in runtimeConfig for use in your app.
For more details, see the official docs: Nuxt .env file usage and Runtime Config
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1321238874634195004> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
you need to set your variables that you had in your .env file in your hosting providers environment variables page to set them
the .env file is just for local development while you run your dev server but for production you need to set them wherever you host the site
when I am deploying, I just like to keep things super simple and run
node .output/server/index.mjs and have it automatically launch on the port in the config. is this not possible?
@WiFi Plugyeah that's my start command too. you don't need to set the port number either it sets a default automatically and works for me
but you did set the variables you had in your .env file wherever you're hosting it right?
because the .env won't be uploaded to github etc
because my .env only had one variable, i mapped that to runtimeConfig and used that
does that work? is that safe
Yeah that’s fine and what I do for all my env variables too. As long as it’s not in the public section of runtimeconfig. But I meant that when you deploy your site to say vercel or whatever hosting provider your .env file isn’t uploaded to github
So runtime config can’t grab from the file because it doesn’t exist outside of development
So are you filling in your environment variables seperately where ever you’re hosting it
There will be an environment variables page on your hosting provider’s site to enter them
I mapped the .env to runtimeConfig in nuxt.config, then I built it out. I previewed it with
node .output/server/index.mjs just now, and it seems to be working.
are you saying that once I upload the .output folder, this wont work?Well I don’t upload the output server so I’m not 100% sure as I upload my code to GitHub and then my hosting g provider builds it from the repo
I am not using one of the traditional hosting solutions. I'm trying to save costs, and don't want to become dependent of a hosting solution's provider. Anyway, I have to upload everything manually by hand, i.e. SSH. So now that I have the build folder, and it is working with the node cmd above, my initial guess is that this should work fine once it is on the server, won't it?
In any case, I will test this out in a moment with deployment to docker. Will be running that locally to make sure everything works smoothly, hopefully. 🤞