I am deploying a Nuxt App with Zeit/Now. In the development phase I was using a .env file to store the secrets to my Contentful CMS, exposing the secrets to process.env with the nuxt-dotenv package. To do that, at the top of the nuxt.config I was calling require('dotenv').config().
I then stored the secrets with Zeit/Now and created a now.json to set them up for build and runtime like so:
{
"env": {
"DEMO_ID": "#demo_id"
},
"build": {
"env": {
"DEMO_ID": "#demo_id"
}
}
}
With that setup, the build was only working for the index page and all of the Javascript did not function. Only when I added the env-property to the nuxt.config.jsfile, the app started working properly on the Zeit-server.
require('dotenv').config()
export default {
...
env: {
DEMO_ID: process.env.DEMO_ID
},
...
modules: [
'#nuxtjs/dotenv'
],
...
}
BUT: When I then checked the uploaded Javascript files, my secrets were exposed, which I obviously don't want.
What am I doing wrong here? Thanks for your help.
You aren't necessarily doing anything wrong here, this is just how Nuxtjs works.
Variables declared in the env property are used to replace instances of process.env.MY_ENV, but because Nuxt is isomoorphic, this can be both on the server and client.
If you want these secrets accessible only on the server, then the easiest way to solve this is to use a serverMiddleware.
As serverMiddleware is decoupled from the main Nuxt build, env variables defined in nuxt.config.js are not available there.
This means your normal ENV variables should be accessible, since the server middleware are run on Node.
Obviously, this means these secrets won't be available client side, but this works if you have something like a Stripe secret key that you need to make backend requests with.
We had a similar problem in our project. Even, We created a nuxt project from scratch and checked to see if there was a situation we skipped. We noticed that, while nuxt building, it copies the .env variables into the utils.js in the nuxt folder. Through the document here, we changed the modules section in nuxt.config.js as follows,
modules: ['# nuxtjs / apollo', '# nuxtjs / axios', ['# nuxtjs / dotenv', { only: ['']}]],
Then we noticed that .env variables are not exposed.
I hope it helped.
Our nuxt version is "nuxt": "^ 2.13.0".
Also, some discussion over here.
Related
I have an .env file which contains two sensitive items and two non-sensitive. Running Sveltekit 1.0 and using Netlify Serverless functions with a db-helper file which has
require('dotenv').config();
const dbName = process.env.MONGODB_DATABASE;
and similarly gets the other variables. However, this crashes with error "cant find module 'dotenv'!
I tried, with same error ..
const dbName = import.meta.env.MONGODB_DATABASE
I tried process.env['MONGODB_DATABASE'] and import.meta.env['MONGODB_DATABASE']. Failed.
I tried prefixing env vars with VITE using both process.env and import.meta.env with and without [' '] wrapper. Failed.
I read that you dont have to explicitly load dotenv as Vite does this. Tried without. Failed.
Has anyone got a solution to this?
Environment variables should be accessed through these modules:
$env/dynamic/private
$env/dynamic/public
$env/static/private
$env/static/public
Public restricts them to those prefixed with PUBLIC_ (which can be configured).
There is some additional documentation for some adapters regarding the loading of these variables, e.g. for the Node adapter, but there is nothing specific for Netlify.
Looking at the Netlify docs, it looks like you have to use its UI/tools or a Netlify config to load variables rather than using an .env file:
With the Netlify CLI, use env:set to update a site environment variable, env:import to import from an updated .env file, and env:unset to delete a site environment variable and all of its contextual values.
I was using
require('dotenv').config()
which worked locally but gave a "cannot find module dotenv" when deployed (to Netlify). I found that in I used "import" instead of "require" then it worked ..
import dotenv from 'dotenv';
dotenv.config();
So thats a solution. But, H.B. correctly pointed out the new sveltekit way env variables should be used. Thanks for that.
PS. The require/import also fails/works for jsonwebtoken so use import * as jwt from 'jsonwebtoken' instead of const jwt = require('jsonwebtoken')
I'm using Next.js with Vercel. This is my .env.local file:
# Created by Vercel CLI
VERCEL="1"
VERCEL_ENV="development"
VERCEL_URL=""
VERCEL_GIT_PROVIDER=""
VERCEL_GIT_REPO_SLUG=""
VERCEL_GIT_REPO_OWNER=""
VERCEL_GIT_REPO_ID=""
VERCEL_GIT_COMMIT_REF=""
VERCEL_GIT_COMMIT_SHA=""
VERCEL_GIT_COMMIT_MESSAGE=""
VERCEL_GIT_COMMIT_AUTHOR_LOGIN=""
VERCEL_GIT_COMMIT_AUTHOR_NAME=""
I have a component that is trying to access: process.env.NEXT_PUBLIC_VERCEL_ENV to make sure it is on development environment.
This is what I'm getting when running npm run dev.
Logs from the server:
The logs above make perfect sense. Since it's running on the local server to render the pages.
But when my client code tries to do the same, I'm getting:
This is how I'm trying to acess it:
console.log(`process.env.NEXT_PUBLIC_VERCEL_ENV: ${JSON.stringify(process.env.NEXT_PUBLIC_VERCEL_ENV)}`);
console.log(`process.env.VERCEL_ENV: ${JSON.stringify(process.env.VERCEL_ENV)}`);
On client, the VERCEL_ENV should be undefined, but NEXT_PUBLIC_VERCEL_ENV should be development, right?
What could be happening?
UPDATE
I even tried to add NEXT_PUBLIC_VERCEL_ENV="development" to the .env.local file. But so far, the result is the same.
NEXT_PUBLIC_VERCEL_ENV="development"
You will have access to this everywhere (in the browser and Server).
VERCEL_ENV="development"
You only have access to this in the server, in the browser it will show undefined.
Please note after you add or make any changes in the .env.local file you have to restart your server otherwise it will show undefined if you console.log the variables.
Make sure Automatically expose System Environment Variables is checked in your Project Settings.
System Environment Variables
More info in docs
I built a website using Gatsby, Contentful, and deployed on Netlify.
I am going to run this website with multiple domain aliases.
ex:
alias1.example.com
alias2.example.com
In that case, the aliases work well and the website have to show contents that belong to the own alias in Contentful.
For example, let's say the current alias is alias1, then the website have to fetch data only have alias1 entry from Contentful.
What I was trying is to add the codes to identify alias in gatsby-config.js using windows.location.href, and set siteUrl as dynamic, but it didn't work.
I am not sure it could be possible and how to implement it.
Thank you.
The best (and almost the only) approach to achieving this is to use an environment variables for each site/alias and configure the deploy command to trigger and use the variables for each site. In that way, each deploy will fetch the data from each Contentful environment.
In your gatsby-config.js (above the module exportation) add:
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
The next step is to create one environment file for each alias. In your project root:
.env.alias1
.env.alias2
Each file should contain your environment variables from Contentful:
CONTENTFUL_ACCESS_TOKEN:12345
CONTENTFUL_SPACE_ID:12345
Then, in your gatsby-config.js just replace your hardcoded variables for the ones in your environment files:
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
},
},
The last step is to configure the deploy scripts to trigger each desired alias. In your package.json:
"scripts": {
"clean": "gatsby clean",
"test": "jest",
"format": "prettier --write \"**/*.{js,jsx,json,md}\""
"develop-alias1": "gatsby develop GATSBY_ACTIVE_ENV=alias1"
"build-alias1": "gatsby build GATSBY_ACTIVE_ENV=alias1"
"develop-alias2": "gatsby develop GATSBY_ACTIVE_ENV=alias2"
"build-alias2": "gatsby build GATSBY_ACTIVE_ENV=alias2"
},
Note that you will replace the default gatsby develop and gatsby build for your aliased commands.
By adding this bunch of configuration, for each develop or build/deploy you are telling your Gatsby project to which environment file should look at (it will take your .env.alias* instead). Each file will contain the keys for each environment in Contentful with different content in it, allowing you to deploy aliased sites with different content using a unique CMS.
This might be the most critical problem of Gatsby, and almost people has hard time with it.
The core problem is the "browser environment" is not available when you "build" Gatsby project. And gatsby-config.js is used for NodeJS environment. In other words, everything sticked with window variable is not accessible.
You should read the offical docs about gatsby build process here:
https://www.gatsbyjs.com/docs/overview-of-the-gatsby-build-process/#build-time-vs-runtime.
Solution: you can define different "scripts" in package.json for each alias which you can provide environment variables for NodeJS environment. Then in gatsby-config.js, use dotenv package to read passed variables.
You can read more here about using environment variables: https://www.gatsbyjs.com/docs/environment-variables/#reach-skip-nav
We are working on a Dockerized NextJS application that is thought to be built once and deployed to several environments for which we will have different configuration. This configuration is to be set in the Docker container when deployed as environment variables.
In order to achieve this, we are using next.config.js file, splitting the vars on serverRuntimeConfig and publicRuntimeConfig as suggested here, and we are getting the values for the environment variables from process.env. i.e.:
module.exports = {
serverRuntimeConfig: {
mySecret: process.env.MY_SECRET,
secondSecret: process.env.SECOND_SECRET,
},
publicRuntimeConfig: {
staticFolder: process.env.STATIC_FOLDER_URL,
},
}
The problem we have is that these variables are not set on build time (when we run next build), as they are environment specific and supposed to be set on deployment. Because of this, the build fails complaining about the missing variables.
Making a build per environment is not an option: as referred before, we want to build it once (with next build), put the output of the build in a docker container, and use that docker container deploy in several environments.
Is there any way to solve this so that the application builds without environment vars and we pass them afterwards on runtime (deployment)?
We finally found the issue.
We were importing code in a helper that was being used in the isomorphic side and was relaying on serverRuntimeConfig variables, being then required on build time in order to create the bundle.
Removing the import from the helper fixed the issue.
I'm working on an app with vuejs frontend and nodejs backend. My frontend makes API https requests to the backend. I've started my projet with vue-cli and webpack.
I need to get the backend API url from env variable (BACKEND_URL).
Since i'm using webpack, I added this line to config/prod.env.js :
module.exports = {
NODE_ENV: '"production"',
-> BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}
It works flawlessly in dev mode using webpack-dev-server. I pass the env var throught docker-compose file:
environment:
- BACKEND_URL=https://whatever:3000
But when I run build, I use nginx to serve the static files (but the problem is the same using visual studio code live server extension). I send BACKEND_URL env var the same way as before. The thing is now the process.env.BACKEND_URL is undefined in the app (but defined in the container)!! So I cant make backend http calls :(
I'm struggling finding the problem, please don't be rude with the responses. Thank you
They aren not "translated" during build time, this is what is happening with you. On a node environment, when you ask for process.env it will show all environment variables available in the system, that is true. But a web application does not have access to process.env when it is executing. You need a way to translate them during build time.
To achieve that you have to use DefinePlugin. It translates anything during build time and writes a magical string where this other thing was.
Using you own example:
module.exports = {
NODE_ENV: '"production"',
BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}
If you do this during build time, without DefinePlugin, webpack won't know what to do with it, and it is going to be a simple string.
If you use DefinePlugin:
new webpack.DefinePlugin({
"process.env.BACKEND_URL": JSON.stringify(process.env.BACKEND_URL)
});
By doing this, you are allowing webpack to translate this during build time.
Give this a shot: https://www.brandonbarnett.io/blog/2018/05/accessing-environment-variables-from-a-webpack-bundle-in-a-docker-container/
If I'm understanding your problem correctly, you're serving a webpack bundle using nginx, and trying to access an environment variable from that bundle.
Unfortunately, it doesn't quite work that way. Your JS file has no access to the environment since it's a resource that has been delivered to the client. I've proposed a solution that also delivers those env variables alongside the bundle in a separate JS file that gets created on container start.
From VueJS Docs: https://cli.vuejs.org/guide/mode-and-env.html
Using Env Variables in Client-side Code
Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. You can access them in your application code:
console.log(process.env.VUE_APP_SECRET)
During build, process.env.VUE_APP_SECRET will be replaced by the corresponding value. In the case of VUE_APP_SECRET=secret, it will be replaced by "secret".
So in your case, the following should do the trick. I had the same problem once in my project, which I started with vue/cli and vue create project ...
VUE_APP_BACKEND_URL=https://whatever:3000