Strategy for Octopus variable substitution in config.js that is webpacked in jenkins

Question

I am working on an ES6 AngularJS project where I am using webpack to bundle everything into dist/app.js.

The CI/CD stack I am working with is SCM - Jenkins - Octopus:

1. Updates to my code are pushed to a repository

2. Jenkins clones the repository, calls npm install and gulp which uses gulp-webpack to bundle & minify everything from one entry point and puts it to dist/app.js

3. Post-build, Jenkins packages the app into a nuget pkg and pushes it to Octopus Deploy where the app is deployed to IIS

The octopus project is working in multiple environments and I have to have a way to replace some configuration variables depending on the environment. For that, Octopus provides a "Substitute variables in files" deployment steps.

When I didn't use a module bundler and ES6, I would just have a configuration file that sets some angular constants which I then used. I would have a config.js file and a config.template.js file. Octopus would replace the variables in the config.template.js file and I would just set it to replace config.js with config.template.js post-deployment.

Now however, I am just using a plain config.js that exports the variables I need to use, which I then import in the files where it is relevant (like a file that contains an angular controller function).

With this setup, I cannot do the substitution the same way I did it before, because my config.js will just get included inside dist/app.js. could anyone help me come up with a strategy on how to achieve this ? I was thinking to do the config.js - config.template.js swap before the build and then make Octopus replace the variables in the whole app.js bundle but that seems rather inefficient.

Answer 1

We had something similar in our build-process and were equally perplexed. We settled on an in-code token replacement solution using JS itself to determine if the token had been replaced so it will work in local-dev (pre-deployment).

We added code like this:

// config --------------------------
(function () {
    // These values will be replaced by Octopus during deployment.
    var configuredApiUrl = "#{Api:Url}";
    apiUrl = (configuredApiUrl[0] !== "#") ?
        configuredApiUrl : "http://api.local/v1";        
})();

Then we setup variable substitution on the output file.

I hope this helps!