Dotenv not loading properly

Dotenv not loading properly - javascript

I am trying to access some environment variables using process.env that were loaded by dotenv.
My folder structure :
.env
src
-- - server.js
My server.js configuration :
(...)
import auth from './middleware/auth'
import dotenv from 'dotenv'
dotenv.load({
path: '../',
silent: process.env.NODE_ENV === 'production'
})
auth()
// Instantiate app
const app = express();
The file where I try to access process.env variable :
(...)
module.exports = function() {
console.log("env", process.env.MONGODB_URI)
var options = {};
options.jwtFromRequest = ExtractJwt.fromAuthHeader()
options.secretOrKey = process.env.JWT_SECRET
Which logs env, undefined, and then crashes with
TypeError: JwtStrategy requires a secret or key
Even if I move .env into src (same directory as server) and remove path in config, it fails.

It appears that when you specify the path, you need to make it full:
require('dotenv').config({path: __dirname + '/../.env'});
.env being your file

Try this; this should work.
import {} from 'dotenv/config'
import somethingElse from 'somethingElse'
...
[the rest of your code]
This works because of how ES6 modules imports modules.
If you want to dig into more.
Please refer this. https://hacks.mozilla.org/2015/08/es6-in-depth-modules/
As a summary :
When you run a module containing an import declaration, the modules it
imports are loaded first, then each module body is executed in a
depth-first traversal of the dependency graph, avoiding cycles by
skipping anything already executed.
Hope this will help someone.

I'm using require('dotenv').config() on my main nodejs .js entry file and it works just fine.
From the docs:
Path
Default: .env
You can specify a custom path if your file containing environment
variables is named or located differently.
require('dotenv').config({path: '/custom/path/to/your/env/vars'})

use may use:
require('dotenv').config({ path: require('find-config')('.env') })
This will recurse parent directories until it finds a .env file to use.
You can also alternatively use this module called ckey inspired from one-liner above.
.env file from main directory.
# dotenv sample content
USER=sample#gmail.com
PASSWORD=iampassword123
API_KEY=1234567890
some js file from sub-directory
const ck = require('ckey');
const userName = ck.USER; // sample#gmail.com
const password = ck.PASSWORD; // iampassword123
const apiKey = ck.API_KEY; // 1234567890

If you're using a mono-repo which uses a single .env file across multiple packages/work-spaces you can use the following to find the root .env file.
Install the find-up package from npm: https://www.npmjs.com/package/find-up
import find from 'find-up';
export const findEnv = () => find.sync(process.env.ENV_FILE || '.env');

you have to set the dotenv configs at the very top level of your app:
import dotenv from 'dotenv'
dotenv.load({
path: '../',
silent: process.env.NODE_ENV === 'production'
})
(...)
import auth from './middleware/auth'
auth()
// Instantiate app
const app = express();
The order of imports in this case matters since you are loading the environment variables.

Related

Initialize firebase config with .env file? [duplicate]

I have .env file at root folder file
NODE_ENV=development
NODE_HOST=localhost
NODE_PORT=4000
NODE_HTTPS=false
DB_HOST=localhost
DB_USERNAME=user
DB_PASSWORD=user
And server.js file in the root/app/config/server.js folder.
The first line of server.js file is
require('dotenv').config();
I also tried following:
require('dotenv').config({path: '../.env'});
require('dotenv').config({path: '../../.env'});
However, my env variable are not loaded when I run the server.js file
from command prompt
node root/app/config/server.js
If I use the visual studio and press F5, it loads!!
I'm not sure what I'm doing wrong, what I'm missing.
Any suggestion is highly appreciate. Thanks.

How about use require('dotenv').config({path:__dirname+'/./../../.env'}) ?
Your problem seems to be the execution path.

This solved my issues in Node v8.14.1:
const path = require('path')
require('dotenv').config({ path: path.resolve(__dirname, '../.env') })
Simply doing require('dotenv').config({path:__dirname+'/./../../.env'}) resulted in a location that resolved as /some/path/to/env/./../../.env

Here is a single-line solution:
require('dotenv').config({ path: require('find-config')('.env') })
This will recurse parent directories until it finds a .env file to use.
You can also alternatively use this module called ckey inspired from one-liner above.
.env file from main directory.
# dotenv sample content
USER=sample#gmail.com
PASSWORD=iampassword123
API_KEY=1234567890
some js file from sub-directory
const ck = require('ckey');
const userName = ck.USER; // sample#gmail.com
const password = ck.PASSWORD; // iampassword123
const apiKey = ck.API_KEY; // 1234567890

If you are invoking dotenv from a nested file, and your .env file is at the project root, the way you want to connect the dots is via the following:
require('dotenv').config({path:'relative/path/to/your/.env'})

One of the comments in #DavidP's answer notes logging the output of dotenv.config with
console.log(require("dotenv").config())
This will output a log of the config and display errors. In my case it indicated the config method was referencing the current directory instead of the
parent directory which contained my .env file. I was able to reference that with the following
require('dotenv').config({path: '../.env'})

I've had this problem and it turned out that REACT only loads variables prefixed with REACT_APP_
VueJs can have a similar issue as it expects variables to be prefixed with: VUE_APP_

In the remote case that you arrive till this point, my issue was quite dumber:
I wrongly named my env variables with colon ":" instead of equals "=". Rookie mistake but the resulting behavior was not loading the misspelled variables assignment.
# dotenv sample content
# correct assignment
USER=sample#gmail.com
# wrong assignment (will not load env var)
USER : sample#gmail.com

Be sure to load .env at the beginning of the entry file (e.g. index.js or server.js). Sometimes, the order of execution loads the environment variables after the services are initiated. And, by using __dirname, it can easily point to the file required relative to the current file.
Here my project structure is like this.
.
├─ src
│ └─ index.ts
└─ .env
// index.ts
import dotenv from 'dotenv';
import path from 'path';
dotenv.config({path: path.join(__dirname, '..', '.env')});
...

This solved the issue for me:
const path = require('path');
require('dotenv').config({
path: path.resolve('config.env'),
});

Try this:
const dotenv = require('dotenv');
dotenv.config({ path: process.cwd() + '/config/config.env' });
worked for me idk how??

You can first debug by using console.log(require('dotenv').config()).
In my scenario, my .env file is in root directory and I need to use it in a nested directory. The result gives me { parsed: { DATABASE_URL: 'mongodb://localhost/vidly', PORT: '8080' } }. So I simply parse the result and store it in a variable const dotenv = require('dotenv').config().parsed;. Then access my DATABASE_URL like a JS object: dotenv.DATABASE_URL

It took me a few head scratches, and the tip to log the output of the require statement to console was really helpful. console.log(require('dotenv').config());
Turns out I was running my app from my user/ directory with nodemon application_name/. and that was making dotenv look for the .env file in my home dir instead of the app's. I was lazy by skipping one cd and that cost me a few minutes.

const path = require('path');
const dotenv = require('dotenv');
dotenv.config({ path: path.resolve(__dirname, '../config.env') })

In my case .env was read fine, but not .env.local.
Updating package.json to name .env into .env.local ( cp ./.env.local .env) solved the problem:
"myscript": "cp ./.env.local .env && node ./scripts/myscript.js"

if config.env file and index.js file both present in the same directory:
then, file: index.js
const path = require('path');
// Set port from environment variables
dotenv.config({path: 'config.env'})
const PORT = process.env.PORT || 8080
file: config.env:
PORT = 4000

One time I have got the same problem. Dotenv did not load .env file. I tried to fix this problem with a path config, to put .env file in a root folder, to put .env in the folder where the file is running and nothing helps me. Then I just trashed Node_modules folder, reinstall all dependencies and it works correctly

You can need the path of the .env file relative to the current working directory from where the application was launched.
You can create this path like this:
const path = require('path')
require('dotenv').config({path: path.relative(process.cwd(), path.join(__dirname,'.env'))});
process.cwd() returns the absolute path of the working directory.
__dirname returns the absolute path of the application.
path.join() adds the path of the .env-file to the path of the application. so if your .env file is nested deeper, just add the folders (e.g. path.join(__dirname, 'config', 'secret','.env'))
path.relative() creates the relative path.

I'am using:
import findUp from 'find-up';
dotenv.config({ path: findUp.sync('.env') });

I found an option debug: true to be sent in the config which showed me the following:
[dotenv][DEBUG] "PORT" is already defined in `process.env` and was NOT overwritten
I added overwrite: true and got it working:
[dotenv][DEBUG] "PORT" is already defined in `process.env` and WAS overwritten
I know I might be too late answering, but decided to share my findings after hours of checking the documentation.

Typescript.
if you are trying to resolve __dirname and you are compiling your source folder in another folder, make sure that you edit __dirname. in my case i am compiling ts in dist folder and env files are not located in dist folder, but in the root folder. so you should delete /dist from __dirname. To debug it, you can call error() function which returns error if there is problem with reading env file.
require('dotenv').config({
path: __dirname.replace('\dist','') + `${process.env.NODE_ENV}.env`
}); # To debug .error()
another thing, when you set env variables make sure that following:
no space between variable and (&&) as following
"scripts": {
"build": "npx tsc",
"start": "set NODE_ENV=production&& node dist/index.js",
},

The fastest fix here, just into seconds, add the variables to the platform you are using in my case render.com

What worked for me using Playwright / typescript:
1 create file and place at the root of the project: global-setup.ts
add inside:
async function globalSetup() {
// Configure ENV variables
require('dotenv').config()
}
export default globalSetup
2 Then use this file into playwright.config.ts
as: globalSetup: require.resolve('./global-setup'),
In this way, global conf is created, and pickup in every single test.

Use only absolute path if you are using some other tool(installed globally) to call your config file somewhere ...
require('dotenv').config({
path: '/path/to/my/project/.env',
});

One silly mistake I did was i used colon ":" in place of "="
I used below
USER:root
But it should be
USER=root

If nothing helps put your .env outside the src folder if you have folder structure like
-src/
- index.js
- env.js (where you call dotenv.config)
// you may call dotenv.config anywhere but entry point is best.
.env (file outside the src folder)

My failer was the path keyword . should be the P not capital Letter . that was so funny

Rails 6 webpacker using environment variables in javascript file

I want to use environment variables with my Rails 6 webpacker project in my js code follow this document https://webpacker-docs.netlify.app/docs/env
First, I create .env file at the root directory of my project.
Then
config/webpack/environment.js (I can access process.env just as expected from here)
const dotenv = require('dotenv')
const dotenvFiles = [
`.env.${process.env.NODE_ENV}.local`,
'.env.local',
`.env.${process.env.NODE_ENV}`,
'.env'
]
dotenvFiles.forEach((dotenvFile) => {
dotenv.config({ path: dotenvFile, silent: true })
})
environment.plugins.insert(
"Environment",
new webpack.EnvironmentPlugin(process.env)
)
console.log(process.env)
/*
{
.
.
.
RAILS_ENV: 'development',
MY_SECRET: 'This_is_my_secret',
RACK_ENV: 'development',
NODE_ENV: 'development'
}
*/
.
.
.
module.exports = environment
But when I run console.log(process.env) from app/javascript/packs/application.js I get empty object {} instead
I have tried these but have no luck.
Import and run dotenv again in config/webpack/development.js
// config/webpack/development.js
const dotenv = require('dotenv')
dotenv.config()
Change to use dotenv-webpack but the result is not difference.
EDIT
After searching for hours I found a workaround from this Adding plugin to Webpack with Rails
For some reason if you run your rails server(rails s) with bin/webpack-dev-server your variables will be inaccessible.

Setting environment variables in Gatsby

I used this tutorial: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/environment-variables.md
Steps I followed:
1) install dotenv#4.0.0
2) Create two files in root folder: ".env.development" and ".env.production"
3) "follow their setup instructions" (example on dotenv npm docs)
In gatsby-config.js:
const fs = require('fs');
const dotenv = require('dotenv');
const envConfig =
dotenv.parse(fs.readFileSync(`.env.${process.env.NODE_ENV}`));
for (var k in envConfig) {
process.env[k] = envConfig[k];
}
Unfortunately, when i run gatsby develop, NODE_ENV isn't set yet:
error Could not load gatsby-config
Error: ENOENT: no such file or directory, open 'E:\Front-End Projects\Gatsby\sebhewelt.com\.env.undefined'
It works when I set it manually:
dotenv.parse(fs.readFileSync(`.env.development`));
I need environment variables in gatsby-config because I put sensitive data in this file:
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: envConfig.CONTENTFUL_SPACE_ID,
accessToken: envConfig.CONTENTFUL_ACCESS_TOKEN
}
}
How to make it work?
PS: Additional question - As this made me think, I know I shouldn't put passwords and tokens on github, but as netlify builds from github, is there other safe way?

I had a similar issue, I created 2 files in the root ".env.development" and ".env.production" but was still not able to access the env file variables - it was returning undefined in my gatsby-config.js file.
Got it working by npm installing dotenv and doing this:
1) When running gatsby develop process.env.NODE_ENV was returning undefined, but when running gatsby build it was returning 'production' so I define it here:
let env = process.env.NODE_ENV || 'development';
2) Then I used dotenv but specify the filepath based on the process.env.NODE_ENV
require('dotenv').config({path: `./.env.${env}`});
3) Then you can access your variables for your config:
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: `${process.env.CONTENTFUL_ID}`,
accessToken: `${process.env.CONTENTFUL_TOKEN}`,
},
},
],
}

You should only use env files when you're comfortable checking those into git. For passwords/tokens/etc. add them to Netlify or whatever build tool you use through their dashboard.
These you can access in gatsby-config.js & gatsby-node.js via process.env.ENV_VARIABLE.
You can't access environment variables added this way in the browser however. For this you'll need to use .env.development & .env.production.

I really dislike the .env.production file pattern, our build system sets up and uses env variables and having extra build steps to write those into a file is weird. But Gatsby only whitelists GATSBY_ of the env vars, with no obvious way of adding your own.
But doing that isn't so hard, you can do it by adding something like this in the gatsby-node.js file:
exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
const config = getConfig();
// Allow process.env.MY_WHITELIST_PREFIX_* environment variables
const definePlugin = config.plugins.find(p => p.definitions);
for (const [k, v] of Object.entries(process.env)) {
if (k.startsWith("MY_WHITELIST_PREFIX_")) {
definePlugin.definitions[`process.env.${k}`] = JSON.stringify(v);
}
}
actions.replaceWebpackConfig(config);
};

After doing a few searches, I found that we can set environment variables through netlify website, here are the steps:
Under your own netlify console platform, please go to settings
Choose build & deploy tab (can be found on sidebar)
Choose environment sub-tab option
Click edit variables and add/put your credentials in
Done!

dotenv file is not loading environment variables

I have .env file at root folder file
NODE_ENV=development
NODE_HOST=localhost
NODE_PORT=4000
NODE_HTTPS=false
DB_HOST=localhost
DB_USERNAME=user
DB_PASSWORD=user
And server.js file in the root/app/config/server.js folder.
The first line of server.js file is
require('dotenv').config();
I also tried following:
require('dotenv').config({path: '../.env'});
require('dotenv').config({path: '../../.env'});
However, my env variable are not loaded when I run the server.js file
from command prompt
node root/app/config/server.js
If I use the visual studio and press F5, it loads!!
I'm not sure what I'm doing wrong, what I'm missing.
Any suggestion is highly appreciate. Thanks.

How about use require('dotenv').config({path:__dirname+'/./../../.env'}) ?
Your problem seems to be the execution path.

This solved my issues in Node v8.14.1:
const path = require('path')
require('dotenv').config({ path: path.resolve(__dirname, '../.env') })
Simply doing require('dotenv').config({path:__dirname+'/./../../.env'}) resulted in a location that resolved as /some/path/to/env/./../../.env

Here is a single-line solution:
require('dotenv').config({ path: require('find-config')('.env') })
This will recurse parent directories until it finds a .env file to use.
You can also alternatively use this module called ckey inspired from one-liner above.
.env file from main directory.
# dotenv sample content
USER=sample#gmail.com
PASSWORD=iampassword123
API_KEY=1234567890
some js file from sub-directory
const ck = require('ckey');
const userName = ck.USER; // sample#gmail.com
const password = ck.PASSWORD; // iampassword123
const apiKey = ck.API_KEY; // 1234567890

If you are invoking dotenv from a nested file, and your .env file is at the project root, the way you want to connect the dots is via the following:
require('dotenv').config({path:'relative/path/to/your/.env'})

One of the comments in #DavidP's answer notes logging the output of dotenv.config with
console.log(require("dotenv").config())
This will output a log of the config and display errors. In my case it indicated the config method was referencing the current directory instead of the
parent directory which contained my .env file. I was able to reference that with the following
require('dotenv').config({path: '../.env'})

I've had this problem and it turned out that REACT only loads variables prefixed with REACT_APP_
VueJs can have a similar issue as it expects variables to be prefixed with: VUE_APP_

In the remote case that you arrive till this point, my issue was quite dumber:
I wrongly named my env variables with colon ":" instead of equals "=". Rookie mistake but the resulting behavior was not loading the misspelled variables assignment.
# dotenv sample content
# correct assignment
USER=sample#gmail.com
# wrong assignment (will not load env var)
USER : sample#gmail.com

This solved the issue for me:
const path = require('path');
require('dotenv').config({
path: path.resolve('config.env'),
});

Be sure to load .env at the beginning of the entry file (e.g. index.js or server.js). Sometimes, the order of execution loads the environment variables after the services are initiated. And, by using __dirname, it can easily point to the file required relative to the current file.
Here my project structure is like this.
.
├─ src
│ └─ index.ts
└─ .env
// index.ts
import dotenv from 'dotenv';
import path from 'path';
dotenv.config({path: path.join(__dirname, '..', '.env')});
...

Try this:
const dotenv = require('dotenv');
dotenv.config({ path: process.cwd() + '/config/config.env' });
worked for me idk how??

You can first debug by using console.log(require('dotenv').config()).
In my scenario, my .env file is in root directory and I need to use it in a nested directory. The result gives me { parsed: { DATABASE_URL: 'mongodb://localhost/vidly', PORT: '8080' } }. So I simply parse the result and store it in a variable const dotenv = require('dotenv').config().parsed;. Then access my DATABASE_URL like a JS object: dotenv.DATABASE_URL

It took me a few head scratches, and the tip to log the output of the require statement to console was really helpful. console.log(require('dotenv').config());
Turns out I was running my app from my user/ directory with nodemon application_name/. and that was making dotenv look for the .env file in my home dir instead of the app's. I was lazy by skipping one cd and that cost me a few minutes.

const path = require('path');
const dotenv = require('dotenv');
dotenv.config({ path: path.resolve(__dirname, '../config.env') })

In my case .env was read fine, but not .env.local.
Updating package.json to name .env into .env.local ( cp ./.env.local .env) solved the problem:
"myscript": "cp ./.env.local .env && node ./scripts/myscript.js"

if config.env file and index.js file both present in the same directory:
then, file: index.js
const path = require('path');
// Set port from environment variables
dotenv.config({path: 'config.env'})
const PORT = process.env.PORT || 8080
file: config.env:
PORT = 4000

One time I have got the same problem. Dotenv did not load .env file. I tried to fix this problem with a path config, to put .env file in a root folder, to put .env in the folder where the file is running and nothing helps me. Then I just trashed Node_modules folder, reinstall all dependencies and it works correctly

You can need the path of the .env file relative to the current working directory from where the application was launched.
You can create this path like this:
const path = require('path')
require('dotenv').config({path: path.relative(process.cwd(), path.join(__dirname,'.env'))});
process.cwd() returns the absolute path of the working directory.
__dirname returns the absolute path of the application.
path.join() adds the path of the .env-file to the path of the application. so if your .env file is nested deeper, just add the folders (e.g. path.join(__dirname, 'config', 'secret','.env'))
path.relative() creates the relative path.

I'am using:
import findUp from 'find-up';
dotenv.config({ path: findUp.sync('.env') });

I found an option debug: true to be sent in the config which showed me the following:
[dotenv][DEBUG] "PORT" is already defined in `process.env` and was NOT overwritten
I added overwrite: true and got it working:
[dotenv][DEBUG] "PORT" is already defined in `process.env` and WAS overwritten
I know I might be too late answering, but decided to share my findings after hours of checking the documentation.

Typescript.
if you are trying to resolve __dirname and you are compiling your source folder in another folder, make sure that you edit __dirname. in my case i am compiling ts in dist folder and env files are not located in dist folder, but in the root folder. so you should delete /dist from __dirname. To debug it, you can call error() function which returns error if there is problem with reading env file.
require('dotenv').config({
path: __dirname.replace('\dist','') + `${process.env.NODE_ENV}.env`
}); # To debug .error()
another thing, when you set env variables make sure that following:
no space between variable and (&&) as following
"scripts": {
"build": "npx tsc",
"start": "set NODE_ENV=production&& node dist/index.js",
},

The fastest fix here, just into seconds, add the variables to the platform you are using in my case render.com

What worked for me using Playwright / typescript:
1 create file and place at the root of the project: global-setup.ts
add inside:
async function globalSetup() {
// Configure ENV variables
require('dotenv').config()
}
export default globalSetup
2 Then use this file into playwright.config.ts
as: globalSetup: require.resolve('./global-setup'),
In this way, global conf is created, and pickup in every single test.

Use only absolute path if you are using some other tool(installed globally) to call your config file somewhere ...
require('dotenv').config({
path: '/path/to/my/project/.env',
});

One silly mistake I did was i used colon ":" in place of "="
I used below
USER:root
But it should be
USER=root

If nothing helps put your .env outside the src folder if you have folder structure like
-src/
- index.js
- env.js (where you call dotenv.config)
// you may call dotenv.config anywhere but entry point is best.
.env (file outside the src folder)

My failer was the path keyword . should be the P not capital Letter . that was so funny

Conditional build based on environment using Webpack

I have some things for development - e.g mocks which I would like to not bloat my distributed build file with.
In RequireJS you can pass a config in a plugin file and conditonally require things in based on that.
For webpack there doesn't seem to be a way of doing this. Firstly to create a runtime config for an environment I have used resolve.alias to repoint a require depending on the environment, e.g:
// All settings.
var all = {
fish: 'salmon'
};
// `envsettings` is an alias resolved at build time.
module.exports = Object.assign(all, require('envsettings'));
Then when creating the webpack config I can dynamically assign which file envsettings points to (i.e. webpackConfig.resolve.alias.envsettings = './' + env).
However I would like to do something like:
if (settings.mock) {
// Short-circuit ajax calls.
// Require in all the mock modules.
}
But obviously I don't want to build in those mock files if the environment isn't mock.
I could possibly manually repoint all those requires to a stub file using resolve.alias again - but is there a way that feels less hacky?
Any ideas how I can do that? Thanks.

You can use the define plugin.
I use it by doing something as simple as this in your webpack build file where env is the path to a file that exports an object of settings:
// Webpack build config
plugins: [
new webpack.DefinePlugin({
ENV: require(path.join(__dirname, './path-to-env-files/', env))
})
]
// Settings file located at `path-to-env-files/dev.js`
module.exports = { debug: true };
and then this in your code
if (ENV.debug) {
console.log('Yo!');
}
It will strip this code out of your build file if the condition is false. You can see a working Webpack build example here.

Not sure why the "webpack.DefinePlugin" answer is the top one everywhere for defining Environment based imports/requires.
The problem with that approach is that you are still delivering all those modules to the client -> check with webpack-bundle-analyezer for instance. And not reducing your bundle.js's size at all :)
So what really works well and much more logical is: NormalModuleReplacementPlugin
So rather than do a on_client conditional require -> just not include not needed files to the bundle in the first place
Hope that helps

Use ifdef-loader. In your source files you can do stuff like
/// #if ENV === 'production'
console.log('production!');
/// #endif
The relevant webpack configuration is
const preprocessor = {
ENV: process.env.NODE_ENV || 'development',
};
const ifdef_query = require('querystring').encode({ json: JSON.stringify(preprocessor) });
const config = {
// ...
module: {
rules: [
// ...
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: `ifdef-loader?${ifdef_query}`,
},
},
],
},
// ...
};

I ended up using something similar to Matt Derrick' Answer, but was worried about two points:
The complete config is injected every time I use ENV (Which is bad for large configs).
I have to define multiple entry points because require(env) points to different files.
What I came up with is a simple composer which builds a config object and injects it to a config module.
Here is the file structure, Iam using for this:
config/
└── main.js
└── dev.js
└── production.js
src/
└── app.js
└── config.js
└── ...
webpack.config.js
The main.js holds all default config stuff:
// main.js
const mainConfig = {
apiEndPoint: 'https://api.example.com',
...
}
module.exports = mainConfig;
The dev.js and production.js only hold config stuff which overrides the main config:
// dev.js
const devConfig = {
apiEndPoint: 'http://localhost:4000'
}
module.exports = devConfig;
The important part is the webpack.config.js which composes the config and uses the DefinePlugin to generate a environment variable __APP_CONFIG__ which holds the composed config object:
const argv = require('yargs').argv;
const _ = require('lodash');
const webpack = require('webpack');
// Import all app configs
const appConfig = require('./config/main');
const appConfigDev = require('./config/dev');
const appConfigProduction = require('./config/production');
const ENV = argv.env || 'dev';
function composeConfig(env) {
if (env === 'dev') {
return _.merge({}, appConfig, appConfigDev);
}
if (env === 'production') {
return _.merge({}, appConfig, appConfigProduction);
}
}
// Webpack config object
module.exports = {
entry: './src/app.js',
...
plugins: [
new webpack.DefinePlugin({
__APP_CONFIG__: JSON.stringify(composeConfig(ENV))
})
]
};
The last step is now the config.js, it looks like this (Using es6 import export syntax here because its under webpack):
const config = __APP_CONFIG__;
export default config;
In your app.js you could now use import config from './config'; to get the config object.

another way is using a JS file as a proxy, and let that file load the module of interest in commonjs, and export it as es2015 module, like this:
// file: myModule.dev.js
module.exports = "this is in dev"
// file: myModule.prod.js
module.exports = "this is in prod"
// file: myModule.js
let loadedModule
if(WEBPACK_IS_DEVELOPMENT){
loadedModule = require('./myModule.dev.js')
}else{
loadedModule = require('./myModule.prod.js')
}
export const myString = loadedModule
Then you can use ES2015 module in your app normally:
// myApp.js
import { myString } from './store/myModule.js'
myString // <- "this is in dev"

Faced with the same problem as the OP and required, because of licensing, not to include certain code in certain builds, I adopted the webpack-conditional-loader as follows:
In my build command I set an environment variable appropriately for my build. For example 'demo' in package.json:
...
"scripts": {
...
"buildDemo": "./node_modules/.bin/webpack --config webpack.config/demo.js --env.demo --progress --colors",
...
The confusing bit that is missing from the documentation I read is that I have to make this visible throughout the build processing by ensuring my env variable gets injected into the process global thus in my webpack.config/demo.js:
/* The demo includes project/reports action to access placeholder graphs.
This is achieved by using the webpack-conditional-loader process.env.demo === true
*/
const config = require('./production.js');
config.optimization = {...(config.optimization || {}), minimize: false};
module.exports = env => {
process.env = {...(process.env || {}), ...env};
return config};
With this in place, I can conditionally exclude anything, ensuring that any related code is properly shaken out of the resulting JavaScript. For example in my routes.js the demo content is kept out of other builds thus:
...
// #if process.env.demo
import Reports from 'components/model/project/reports';
// #endif
...
const routeMap = [
...
// #if process.env.demo
{path: "/project/reports/:id", component: Reports},
// #endif
...
This works with webpack 4.29.6.

I've struggled with setting env in my webpack configs. What I usually want is to set env so that it can be reached inside webpack.config.js, postcss.config.js and inside the entry point application itself (index.js usually). I hope that my findings can help someone.
The solution that I've come up with is to pass in --env production or --env development, and then set mode inside webpack.config.js.
However, that doesn't help me with making env accessible where I want it (see above), so I also need to set process.env.NODE_ENV explicitly, as recommended here.
Most relevant part that I have in webpack.config.js follow below.
...
module.exports = mode => {
process.env.NODE_ENV = mode;
if (mode === "production") {
return merge(commonConfig, productionConfig, { mode });
}
return merge(commonConfig, developmentConfig, { mode });
};

Use envirnment variables to create dev and prod deployments:
https://webpack.js.org/guides/environment-variables/

I use string-replace-loader to get rid of an unnecessary import from the production build, and it works as expected: the bundle size becomes less, and a module for development purposes (redux-logger) is completely removed from it. Here is the simplified code:
In the file webpack.config.js:
rules: [
// ... ,
!env.dev && {
test: /src\/store\/index\.js$/,
loader: 'string-replace-loader',
options: {
search: /import.+createLogger.+from.+redux-logger.+;/,
replace: 'const createLogger = null;',
}
}
].filter(Boolean)
In the file src/store/index.js:
// in prod this import declaration is substituted by `const createLogger = null`:
import { createLogger } from 'redux-logger';
// ...
export const store = configureStore({
reducer: persistedReducer,
middleware: createLogger ? [createLogger()] : [],
devTools: !!createLogger
});

While this is not the best solution, it may work for some of your needs. If you want to run different code in node and browser using this worked for me:
if (typeof window !== 'undefined')
return
}
//run node only code now

Develop Reference

JavaScript is the programming language of the Web.

Dotenv not loading properly - javascript

It appears that when you specify the path, you need to make it full: require('dotenv').config({path: __dirname + '/../.env'}); .env being your file

Related

Initialize firebase config with .env file? [duplicate]

Rails 6 webpacker using environment variables in javascript file

Setting environment variables in Gatsby

dotenv file is not loading environment variables

Conditional build based on environment using Webpack

Categories

Resources