Related
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
I am trying to replace a string with the filename in webpack bundling. Is there a way I can get the webpack config to give me the file name of the currently processing file? So that I can use it with the webpack-plugin-replace somwthing like ,
plugins: [
...
new ReplacePlugin({
values: {
'__CUSTOM_STRING': CURRENTLY_PROCESSING_FILENAME,
}
})
]
Note: The __filename solution is not working for me as I am using angular-cli to build not webpack directly.
Referring __filename in Angular components gives Cannot find name __filename error.
Yep there is one:__filename
But by default webpack doesn't leak path information and you need to set a config flag to get real filename instead of a mock ("/index.js").
// /home/project/webpack.config.js
module.exports = {
context: __dirname,
node: {
__filename: true
}
}
Than you can use __filename get the current filename relative to the context option:
// in /home/project/dir/file.js
console.log(__filename);
// => logs "dir/file.js"
The filename is only embedded into modules where __filename is used. So you don't have to be affraid that paths are leaked from other modules.
Although my dev server is running on localhost:3000, I have set up my host file to point www.mysite.com to localhost. In my JavaScript, I have code like:
import myImage from '../assets/my-image.jpg'
const MyCmp => <img src={myImage} />
Using Webpack's file-loader, it transforms that import into a URL to the hosted image. However, it uses the localhost path to that image, but I'd like it to use the www.mysite.com domain. I looked at both the publicPath and postTransformPublicPath options for file-loader, but those only appear to allow you to modify the part of the path that comes after the domain.
I personally don't like the notion of defining host-information statically in the build output. This is something that should be determined in runtime based on where you actually put your files.
If you are like me then there are two options here.
Both involve you calling a global method that you have defined on i.e. window / global scope.
The purpose of the global method is to resolve the root path (the domain, etc) in runtime.
Define a global method
So lets say you define a method on the global scope somewhere in your startup code like so:
(<any>window).getWebpackBundleRootPath = function (webpackLibraryId) {
if (webpackLibraryId == null) return throw "OOOPS DO SOMETHING HERE!";
// Preferably these variables should be loaded from a config-file of sorts.
if(webpackLibraryId == "yourwebpacklibrary1") return "https://www.yoursite.com/";
// If you have other libraries that are hosted somewhere else, put them here...
return "...some default path for all other libraries...";
};
The next step is to configure webpack to call this global method when it tries to resolve the path.
As I mentioned there are two ways, one that manipulates the output of the webpack and one that is more integrated in webpacks configuration (although only for file-loader but I think it should suffice).
It's worth mentioning that you don't need a global method if you only have one bundle or if you host all your bundles in one place. Then it would be enough to use a global variable instead. It should be quite easy to modify the example below to accommodate this.
First option: configure webpack file-loader to call your method when resolving path
This solution will not require something to be done post build. If this fits your need and covers all scenarios I would go for this option.
Edit your webpack config file
var path = require('path');
let config = {
entry: {
'index': path.join(__dirname, '/public/index.js')
},
output: {
path: path.join(__dirname, '/dist/'),
filename: 'index-bundle.js',
publicPath: 'https://localhost:3000/',
library: 'yourwebpacklibrary1',
...
},
module: {
rules: [{
// Please note that this only defines the resolve behavior for ttf. If you want to resolve other files you need to configure the postTransformPublicPath for those too. This is a big caveat in my opinion and might be a reason for using second option.
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
outputPath: 'assets/fonts', // The folder where you store your fonts.
name: '[name].[ext]',
// This is where the magic happens. This lets you override the output of webpack file resolves.
postTransformPublicPath: function (p) {
// Because of the way webpack file-loader works the input from to this method will look something like this: __webpack_public_path__ + "/assets/fonts/yourfont.ttf"
// But we are not interested in using the __webpack_public_path__ variable so lets remove that.
p = p.replace('__webpack_public_path__ + ', '');
// Return a stringified call to our global method and append the relative path to the root path returned.
return `getWebpackBundleRootPath("${config.output.library}") + ${p}`;
}
}
}]
},
},
...
};
module.exports = config;
As you might have noticed in the comments in the webpack config file you need to specify the resolve behavior for each file-loader that you add (if someone knows a better way, please let me know). This is why I still use the second option.
Second option: manipulate the output of the webpack in a postbuild step
Example webpack.config.js file
For completeness sake here is an example of a webpack.config.js file that contains the variables used in the postbuild script.
var path = require('path');
module.exports = {
entry: {
'index': path.join(__dirname, '/public/index.js')
},
output: {
path: path.join(__dirname, '/dist/'),
filename: 'index-bundle.js',
publicPath: 'https://localhost:3000/',
library: 'yourwebpacklibrary1',
...
},
...
}
Create a postbuild.js file
Create a file postbuild.js next to your package.json with the following content:
const fs = require('fs');
// We take the path to the webpack config file as input so that we can read settings from it.
const webpackConfigFile = process.argv[2];
// Read the webpack config file into memory.
const config = require(webpackConfigFile);
// The file to manipulate is the output javascript bundle that webpack produces.
const inputFile = config.output.path + config.output.filename;
// Load the file into memory.
let fileContent = fs.readFileSync(inputFile, 'utf8');
// Replace the default public path with the call to the method. Please note that if you specify a publicPath as '/' or something very common you might end up with a problem so make sure it is unique in the file to avoid other unrelated stuff being replaced as well.
fileContent = fileContent.replace('"' + config.output.publicPath + '"', 'getWebpackBundleRootPath("' + config.output.library + '")');
// Save the manipulated file back to disk.
fs.writeFileSync(inputFile, fileContent, 'utf8');
Call the postbuild.js automatically on build
Next step is to actually call the postbuild.js script after each build.
This can be done in a postscript in package.json like so (in the script section in your package.json):
{
"scripts": {
"build": "webpack",
"postbuild": "node postbuild.js ./webpack.config.js"
}
}
From now on whenever you run the build script it will also run the postbuild script (from npm or yarn, etc).
You can of course also manually run the postbuild.js script manually after each build instead.
but those only appear to allow you to modify the part of the path that comes after the domain.
Not really, you can give it an URL that includes the domain.
In your case, assuming your images are under the assets directory, you will have something like this in your webpack.config.js
...
module: {
rules: [
...
{
test: /\.(png|jpe?g|gif|svg)$/,
use: {
loader: 'file-loader',
options: {
publicPath: 'https://www.example.com/assets',
outputPath: 'assets'
}
}
},
...
]
}
...
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
For example we have multiple entries:
entry: {
main: "./app/entry.js",
view: "./app/entry.js",
},
how to pass current name (main or view) into entry.js?
Ideal solution will be something like this:
new webpack.DefinePlugin({
'_ENTRY_': '[name]'
}),
like other config options can have, but of course DefinePlugin dont know how to process this...
If you're running the code inside Node.js then you can use __filename
and __dirname.
Webpack can mock them for non-Node.js environments.
Please see Webpack Node configuration
node: {
__filename: true,
__dirname: true
}
In this case you can use __filename and __dirname globals as usually done in Node.js enviroments.
if(__filename.indexOf('index.js') != -1) {
// Code here
}
node.__filename
Default: "mock"
Options:
true: The filename of the input file relative to the context option.
false: The regular Node.js __filename behavior. The filename of the output file when run in a Node.js environment.
"mock": The fixed value "index.js".