0

I've be banging my head against the wall on how to do this. I've been developing on a vue-cli application, and apparently, in the node world, we all believe there exists one development, one staging, and one production environment.

I've been trying to reduce as much manual labor as I possibly can, so I don't manually keep moving files around, changing configs, etc.

I have 5 environments in total, but 3 dev environments that I need to clear up with this system, and I really have no way of going about it, so I need some guidance.

  • 1st dev environment, localhost:12345 - I have placed variables where it turns off authentication and specifies the url path. If this was called MyLocal for process.env.NODE_ENV, then I could use env.mylocal's variables.
  • 2nd dev environment, localhost:12345 (yes same one) - I have placed variables where all my authentication comes back, and I specify the same url path. If this was called DevLocal for process.env.NODE_ENV, then I could use env.devlocal's variables
  • 3rd dev environment, dev.example.com/newAppLoc/web - I have placed variables where all my authentication comes back, and I specify a new url path. If this was called Development for process.env.NODE_ENV, then I could use env.development's variables

The 4th and 5th would be staging and production respectively.

If I had the option of creating my own environment names to more than 3, this question could have been avoided. Because all I'd need to do at that point is specify which environment to use, and let the build scripts run. Then at that point, I can publish my whole repo without worrying which env files to send, since it's already been specified in the build.

But since there is only 3 I can specify, I need help in figuring this out. I have to worry about my files being sent in fear of one file's presence overriding another config. I also have to worry about my files being sent on a repo that others can fetch and have their project settings get overridden. In my opinion, this whole scheme seems way too flakey, and I'm pretty pessimistic towards this strict and overthought mess. Yet, I would love to know what kind of workflows I can see that have this in place to more than 3 environments.

Also, there is no way I can override the values of "development", "staging", "production". There are checks in place where they prevent you from comparing values to something else. Meaning, in your webpack.config.js or vue.config.js, if your process.env.NODE_ENV is MyLocal, and you try to compare it to "MyLocal", it will literally become false.

Here is the scripts I have in my package.json

"serve": "vue-cli-service serve",
"serve:mylocal": "vue-cli-service serve --mode MyLocal",
"build:mylocal": "vue-cli-service build --mode MyLocal",
"build:devlocal": vue-cli-service build --mode devlocal",
"build:dev": "vue-cli-service build --mode development",
"build:prod": "vue-cli-service build",

So:

const isDevBuild = process.env.NODE_ENV === "MyLocal";  // false if process.env.NODE_ENV = MyLocal
const isDevBuild = process.env.NODE_ENV === "production"; // true if process.env.NODE_ENV = production

I was thinking:

  • MyLocal would be the same as .env.local
  • DevLocal would be the same as .env.development.local
  • Development would be the same as .env.development

But the problem is, how do you specify which to use? They are based on precedence just by existing, which makes it harder to control.

sksallaj
  • 3,872
  • 3
  • 37
  • 58

1 Answers1

0

So I gave up on trying to find a workflow for the scenario and tried to find a way to brute force the idea I was trying to accomplish.

So vue-cli needs those modes to apply process.env.NODE_ENV and find the correct the .env files. However, within the vue.config.js file, the value of process.env.NODE_ENV is overridden by the default value of the vue-cli-serve or vue-cli-build commands. That's why it was able to find out if "production" or "development" is true, and no other value regardless of the mode you give it.

So I changed the script above to:

"build:mylocal":  set NODE_ENV=MyLocal && "vue-cli-service build --mode MyLocal",
"build:devlocal":  set NODE_ENV=DevLocal && vue-cli-service build --mode Devlocal",

Which gave me the right values, but still didn't work. I added console.log(process.env.NODE_ENV), and it was giving me back MyLocal, yet:

console.log(process.env.NODE_ENV === "MyLocal")   // still false!!

That was until I did a JSON.stringify(process.env.NODE_ENV) and discovered the result was "MyLocal ". See that empty space? Now picture seeing that on a console without quotes. Needed to wrap up the set NODE_ENV in parenthesis.

So the final solution:

"build:MyLocal": "(set NODE_ENV=MyLocal) && vue-cli-service build --mode MyLocal"
"build:DevLocal": "(set NODE_ENV=DevLocal) && vue-cli-service build --mode DevLocal"

This was a bit hacky solution. You need to set NODE_ENV explicitly to override vue-cli's mechanism of setting NODE_ENV in vue.config.js, and you still need --mode argument to make use of vue-cli's feature of selecting environment files.

sksallaj
  • 3,872
  • 3
  • 37
  • 58