9

I use a build server to build my Vue projects, using the npm run build command nicely supplied by the Vue 2 template. The Vue template also provides the ability to access environment-specific data that can be configured in files underneath the config directory. Things like prod.env.js, etc. You then access this data through process.env.API_PREFIX as seen in the template manual.

I want to be able to build the code once, then deploy the same build (as defined by the output in Dist) to multiple servers, but have the different servers use different configuration (different API_PREFIX etc). Currently, the process.env references are expanded at build time by the Webpack compiler. Therefore I have to rebuild for every environment.

I can think of a few ways to do this -- obviously the loading of the config has to happen at runtime, and given that it runs in the browser and has to refer to some file, it would have to be through an AJAX request for some static JSON configuration served by the web server separately, or similar. But I'd be interested to know how anyone here would handle this requirement.

2
  • 1
    There are a few tricks, but need more information on how do you determine the API_PREFIX. Is it related with the domain in which the application is going to be accessed at? Can you give concrete examples? Commented Mar 2, 2017 at 17:15
  • Yes, the API prefix is an example of configuration data that's specific to each environment. It would be a different domain for each deployment environment. For instance, in the build for the staging deployment environment, the API prefix might be https://staging-api.mycompany.com. [it's not derivable in principle from the name of the environment, though.]
    – amoe
    Commented Mar 3, 2017 at 12:49

1 Answer 1

2
+25

Without knowing your specific architecture is hard to give specific advice. Instead I will leave a few general ideas.

In order to do what you want in a sane way, you probably would have to derive the prefix from the domain in which you are serving the frontend.

There are a few things you can use for that, besides using window.location at runtime:

Even if it doesn't solve your specific case, hope it gives you an idea of what available.

7
  • My question isn't really about the API prefix, which is just an incidental example of a piece of configuration that I want to parameterize after the build process. I have many other things that are specific to the deployment environment that are unrelated to the prefix. I need a general way to read configuration variables at runtime.
    – amoe
    Commented Mar 3, 2017 at 17:08
  • 1
    The question is where, when and how do you want to write them. Based on which criteria. Without a more specific description of the usecase, hard to give more specific ideas. Commented Mar 3, 2017 at 17:44
  • I think I've decided to do it using Webpack externals, a global script tag, and a file under static directory that defines the configuration on the window object. This is evaluated at runtime but still brought into the webpack context in a way that appears synchronous.
    – amoe
    Commented Mar 8, 2017 at 13:57
  • Not sure what you gain by using webpack externals, besides including your file using a global script tag, since you are talking about of just a few variables, not an exiting package. Commented Mar 8, 2017 at 16:32
  • You're right that there's not a lot of real difference from simply accessing global configuration stored on window directly in the modules. It just psychologically feels more clean to import myconfig from 'my-config' rather than referring to window.myconfig everywhere.
    – amoe
    Commented Mar 9, 2017 at 10:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.