# Managing Dev and Prod settings for a SPA client

**URL:** <https://discourse.aurelia.io/t/managing-dev-and-prod-settings-for-a-spa-client/2240>\
**Category:** Best Practices\
**Created:** [February 6, 2019, 2:43pm UTC](https://discourse.aurelia.io/t/managing-dev-and-prod-settings-for-a-spa-client/2240 "2019-02-06T14:43:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [February 6, 2019, 2:43pm UTC](https://discourse.aurelia.io/t/managing-dev-and-prod-settings-for-a-spa-client/2240/1 "2019-02-06T14:43:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 7, 2019, 8:41pm UTC](https://discourse.aurelia.io/t/managing-dev-and-prod-settings-for-a-spa-client/2240/2 "2019-02-07T20:41:06Z")

</div>

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:

```auto
webpack --env.prod

```

translates to (kind of):

```auto
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 😄