Add basic .env support.

[gongpeione]

#255

[yeskunall]

This is kind of tricky. NODE_ENV is something that was popularized by Express. I know most of us would probably end up using NODE_ENV, but it's really not required to do so. If parcel is going to look for that exact prop, then can you also add it in the documentation somewhere?

[gongpeione]

Yes I agree. And I am not sure if it is a good idea seperate .env and .dev.env this way.

[yeskunall]

@gongpeione as long as it is documented, I think it's okay. 😄

[cksac]

How to handle env other than dev and prod? e.g. dev/uat/prod.

[devongovett]

I'm on board with this idea (loading environment variables from a file). Can we use this module to actually load and parse the files though? https://github.com/motdotla/dotenv We can do that once on bundler startup, rather than for each asset. It will set the environment variables in the node.js environment, and the existing environment variable substitution in parcel should just work after that. I'd recommend doing this in the Bundler class immediately after startup.

Paths that we should load should follow this pattern: .env.${process.env.NODE_ENV}. We should load these paths: https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use. That's what create-react-app does as well: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/env.js

[devongovett]

Thanks for your work on this. 👏

I refactored it slightly to move the code to a util file, and use the config resolution system to find .env files (searching upward from main file until they are found). Also added a test.

[cloud-walker]

this has not been npm published yet, right?

[DeMoorJasper]

@cloud-walker It's already in the master branch but not on npm yet

[juliocanares]

waiting for this 🔥

[andywer]

As far as I can tell there is still no support for environment vars when using TypeScript, right? 😕

A distinct parcel-plugin-env might be helpful after all...

[luizfilipe]

This is already on npm? I'm also trying to read something regarding this on the docs, but there's no information about dotenv on it.

Can anyone help me here? I've place .env file at the same folder as entry file in this case index.html I'm using babel and I'm also using React for front-end I've set inside of .env file the environment variable that stores an URL like this API_URL=http://localhost:8081 and I'm doing a console.log on the script (<script src="src/index.js"></script>) that I'm calling on index.html.
But I'm still getting undefined.

Here is the js file looks like

'use strict';

import React from 'react';
import {render} from 'react-dom';
import {BrowserRouter as Router} from 'react-router-dom';
import {App} from './app'

console.log(process.env.API_URL);

render((
  <Router>
    <App/>
  </Router>
), document.getElementsByName('body'));

if (module.hot) {
  module.hot.accept();
}

[FDiskas]

@luizfilipe place your .env file in root directory where package.json is located

[leriel]

For anyone else that may come across this wondering - do not rely on process.env object to have values inside. Instead, rely directly on process.env.KEY as those are going to be replaced directly in the code, example:

.env

KEY=val

index.js

console.log(process.env.KEY); // val
console.log(process.env); // {}

[frankieshakes]

Can anyone help me here? I've place .env file at the same folder as entry file in this case index.html I'm using babel and I'm also using React for front-end I've set inside of .env file the environment variable that stores an URL like this API_URL=http://localhost:8081 and I'm doing a console.log on the script (<script src="src/index.js"></script>) that I'm calling on index.html.
But I'm still getting undefined.

I was experiencing the same thing. Restarting the Parcel server didn't seem to help. Running this command did the trick for me:

npx parcel --no-cache src/index.html

Hopefully this helps out the next person.

[risanto]

npx parcel --no-cache src/index.html

This works wonder. Thanks a lot!