Webpack: env specific builds

[codeofsumit]

We use this template (and the pwa template) for some of our applications and one thing we always need is having builds with different configs.
The template itself provides "env vars" configs, but they're only included in npm run dev and npm build respectively.

What we like to have is something like npm run build --dev, npm run build --prod - so the specific configs are included in the build at can be deployed to our different server stages.

Currently, we customize the build but it'd be great to have this built in - or is it already?

[aladdin-add]

I do love it! and this is a strong need.

could you share something about how to solve it? 😄

[robwierzbowski]

I would suggest adding an options parser like minimist: https://github.com/substack/minimist. Then you could use a command flag like npm run build --env myEnv.

[yezongyang]

I am using config module to define configs, but i have to modify the template. @Aladdin-ADD

[chrisbraddock]

I spent last week wrestling with this. I ended up hacking something custom in (I'm sure in a sub-optimal way) and running my builds like @robwierzbowski suggests. I'll have to check out minimist.

Would love for something built in/officially supported.

[codeofsumit]

The more I dig into this, the more I think this feature is simply not named correctly.

If I pass "real" env vars to the build, for example like this:

// prod.env.js
require('dotenv').config();

module.exports = {
  NODE_ENV: '"production"',
  API_URL: process.env.API_URL,
};

the build will fail, I think because of the double quote string thing 🤔 .

I'd also question the name prod.env.js as this has nothing to do with production mode or not, it's simply the config that's included in the built files but shouldn't make an assumption about the environment it's running in. A staging environment will leverage the same build process as a production environment but with a different config.

I'll spend the day trying to make this work and will spam results into this issue 😛

[codeofsumit]

Alright I made it work.

I introduced .env files so I can easily deploy them with now or other cloud providers.

I got two dotfiles, .env and .env.prod.

The files look like this:

// .env
API_URL='"https://stage.github.com/api/"'

// .env.prod
API_URL='"https://github.com/api/"'



md5-125a704a1be1b8a43f361b5eb7474eaa



// prod.env.js
require('dotenv').config();

module.exports = {
  NODE_ENV: '"production"',
  API_URL: process.env.API_URL,
};

With a regular build and deployment, I now get the config of .env.

Now you have all the options to include .env.prod in your build. The dotenv package will not throw an error, if the file is missing!
For example I utilize the environment variable features of now.sh which means I can deploy my app with now --dotenv=.env.prod.
This will parse and turn the .env.prod file into environment variables in my cloud instance / docker container / what ever - and then runs the build-process.

The build process looks for the .env file but its missing (remember, it's not local, it's in the cloud right now). But process.env.API_URL is getting it's value from the environment now 🎉 .

And boom - I got a build with different configs.

Obviously if you don't use now as a cloud, you have to figure out your own way to pass the other env file to your build. But this worked for me. Maybe it helps as a starting point.

I'd still leave this issue open as I still think this build should provide help with that and make this process a bit clearer.

[kosmickanga]

Looks similar to Issue #840? This solves the problem by modifying build.js to accept an environment variable, which can then be passed in on the command line.

[gijo-varghese]

+1

[LinusBorg]

Please check out #1178 and tell me what you think.

[victor-ponamariov]

Any news here?

[LinusBorg]

I don't think that I will finish this PR. The current state is insufficient, and the new vue-cli 3 offers excellent env support.