Managing Dev and Prod settings for a SPA client

Best Practices
1

I used the Aurelia Skeleton for Webpack for the base of my project. (I’m planning on porting this over to use the Aurelia CLI instead eventually). However, I don’t know a lot about webpack and have relied on what was included to “make the magic happen”.

To this point, I’ve been developing locally. I created a app.config.js file to store config settings that store urls to the API site as well as storing settings for OIDC connections. However, now I’m looking at deploying my app and realizing I"m going to have a mess with source control and CI.

What I need to do is have app.config.dev.js, app.config.staging.js and app.config.prod.js files and somehow have the webpack build include the correct file based on the build. However, I’m really not sure how to update the webpack code included with the skeleton in order to accomplish this.

Has anyone already done this with success?

1 Like
2

I think what you described is basically what folks do in every project. Note that if the main export (or module.export) of webpack.config.js is the function, the first parameter will be an object with the shape of all --env arguments in the command. example:

webpack --env.prod

translates to (kind of):

module.exports({ prod: true })

You can use it to specify the environment variable you want and based on that, pick the right file. That’s my guess, but it depends on how you wanna config your CICD. Hope other folks can chime in and help you :smile: