In my gatsby-config.js I've used the dotenv package to set env vars
require("dotenv").config({
path: `.env.${process.env.DEPLOY_ENV}`,
});
and then in my package.json a script to deploy to different environments
"deploy:staging": "DEPLOY_ENV=staging gatsby build --prefix-paths && s3-deploy ..."
In my src/html.js, I have an asset that I want to include
<script src={`//${process.env.ASSET_HOST}/app.js`}></script>
When I log the DEPLOY_ENV from gatsby-config.js it is set to staging, however, when I log process.env in src/html.js, ASSET_HOST is set as the one in my .env.production file, so when I deploy to staging it uses assets from my production host.
I think DEPLOY_ENV (as NODE_ENV) is a reserved environment variable. That's why DEPLOY_ENV=staging is not working in your case.
The Gatsby docs on environment variables advices to use a secondary environment variable for additionnal environement support.
You can add a .env.staging file in your root folder, where you put your ASSET_HOST env var.
Then run gatsby with ACTIVE_ENV=staging gatsby develop
Related
when I create a .env.local file in my project root, it's not setting up properly.
in the file, I have my API key like so
API_KEY=SOME_API_KEY
Then when i try to access it in getServerSideProps with process.env.API_KEY, it doesn't work. When I console.log(process.env.API_KEY) i get undefiend. Which I assume is because the file isn't set up properly?
I even tried installing dotenv but I know you don't need that with Next.js.
next config file
module.exports = {
reactStrictMode: true,
}
You’ll notice that the browser will log undefined. This happens since the environment variable is only defined on our server so far.
Since Next.js 9.4, Next.js will make all environment variables that start with NEXT_PUBLIC_ available to the client without any further configuration!
Create .env (all environments), .env.development (development environment), .env.production (production environment), .env.local (local enviroment)
Add the prefix NEXT_PUBLIC_ to all of your environment variables.
NEXT_PUBLIC_BASE_URL=http://localhost:3000/
Use with prefix process.env
process.env.NEXT_PUBLIC_BASE_URL
Stop the server and restart it:
npm run dev
OR
yarn dev
.env.local works with +v9.4.
if you are using older version please try with next config file https://nextjs.org/docs/api-reference/next.config.js/environment-variables.
Note:
Next.js will replace process.env.customKey with 'customKey' at build time. Trying to destructure process.env variables won't work due to the nature of webpack
Restarting the server solved it for me as in #Igmer Rodriguez comment above .
I followed the instructions for additional environment in Gatsby.
It works with command gatsby develop, but when I am using the same for gatsby build command, I see that it uses .env.production and not .env.staging parameters
export ACTIVE_ENV=staging npm run build
gatsby.config file:
let activeEnv =
process.env.ACTIVE_ENV || process.env.NODE_ENV || "development"
console.log(`Using environment config: '${activeEnv}'`)
require("dotenv").config({
path: `.env.${activeEnv}`,
})
It would print that it uses staging env, but the variables in the .js files will be taken from .env.production.
What is wrong?
This is my architecture and I want to access the.env file
I tried all the solutions, __dirname, find-config, ckey and read all the stack solutions. I can't understand why my .env file is not loaded....
console output is always :
{NODE_ENV: "development", PUBLIC_URL: ""}
If you're using create-react-app to bootstrap your application, the react-scripts module handles setting up environment variables for you. However, there's a catch. All React environment variable needs to be prefixed with REACT_APP. Thus, your environment variable would be: REACT_APP_MY_ENV_VARIABLE.
You should not import dotenv. After changing .env files, you must restart the development server. This is the excerpt from the create-react-app docs. The .env must appear in the root of your project.
Note: You must create custom environment variables beginning with
REACT_APP_. Any other variables except NODE_ENV will be ignored to
avoid accidentally exposing a private key on the machine that could
have the same name. Changing any environment variables will require
you to restart the development server if it is running.
You can read more about environment variables and .env files with create-react-app in the create-react-app documentation.
If you really need to set a custom path, you can use env-cmd. It requires small changes in scripts section like this:
// from
"start": "react-scripts start"
// to
"start": "env-cmd -f ./custom/path/.env react-scripts start"
I used a create-react-app.
And created environment variable files. .env.local, .env.development.local
I found that .env.development ispreferred over .env.local
And env.development.local seems to have prioty over .env.development.
If so, .env.development.local is used to override .env.development what is the purpose of .env.local?
Here's the priority of the files for the development build and the production build:
Dev.: (npm start): .env.development.local, .env.local, .env.development, .env
Prod.: (npm run build): .env.production.local, .env.local, .env.production, .env
If you ever want to use something in your local environment without being specific to the development build or the production build, you can add some variables to your .env.local file.
Source : https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used
In .env.local you can set up environment variables that are specific to your local machine and it doesn't have to be on development mode to work, so variables there will work for both development and production.
Im tring to build my ReactApp using an environment variable system.
Following online guides, I've create two different files
.env.developtment and .env.production
using the syntax for variables:
REACT_APP_BASE_SERVER_URL=myapp/
During development (using npm start to start the server), development file is loaded perfectly and all variable are stored in process.env global.
Unfortunally after compiling it with webpack, process.env is empty.
Im compiling my code with:
./node_modules/.bin/webpack --config webpack.config.js --env.production --progress --env.NODE_ENV=production --colors
and in my webpack there is no process.env override (using DefinePlugin is the common mistake).
Following a similar question on this site, I've tried to put this command in the config to avoid any process override:
node: {process: false}
but with this process.env will be totally undefined instead of empty ( {} ).
Is it possible to use this kind of environment system or .env files are only supported with npm build?
Sending the env as an argument does not set the application environment. Said so, I considering you are doing it inside your config. What would set up few env values is the option mode as development or production, which is available on webpack4 (You do -p or -d for the previous versions).
I dont know why you said using webpack.DefinePlugin is a common mistake. I have been using it and it works very well.
In last case, if you are sure you process.env should not be empty I would suggest you to do the syntax process.env["expected_attr"].