user6731135 user6731135 - 1 month ago 14
AngularJS Question

Visual Studio web.config transformation and grunt

I have an angular website that uses grunt to alter some environment configuration settings.

What I would like to have is app settings in the web.config that control these gruant variables. That way I can use web.config transformation whenever promoting to different environments.

Is this the correct approach? If so, how would I implement this? If not, what is a better solution?


I use Gulp, but the same logic will apply.

Firstly, using Web Config Transforms really isn't the right approach, I'm not even sure you could do that without writing a VS extension.

Grunt does have a environment variable plugin ( which will allow you to access Node environment variables.

This way you can place an object in your grunt file that has child objects holding each states values, e.g.

var settings = {
development: [
    { searchApi: 'http://dev.mysite' },
    { title: 'MySite (DEV)' }
qa: [
    { searchApi: 'http://qa.mysite' },
    { title: 'MySite (QA)' }
live: [
    {searchApi: 'https://www.mysite' },
    { title: 'MySite' }

You then do a loop of the relevant state array, and search and replace.

You can then either manually toggle the value when the grunt file runs, or you could wrestle with MSBuild and set the variable according to the current configuration. IIRC, Grunt is synchronous, so it should play nicely with MSBuild.


After leaving alone using Gulp/Grunt and MSBuild for a while, I came back to it and figured out a solution.

Firstly, you need a .bat file, in which you have the following code (for Gulp):

set NODE_ENV=%1
gulp --gulpfile gulpfile.js

Next, open up your solution properties and in the pre-build, add in:

CD $(ProjectDir)
CALL deploy.bat $(ConfigurationName)

This will call the .bat file, passing in the current configuration as an argument, which then sets the NODE_ENV value and runs gulp.

AFAICT, you have to do this as a batch, as sequential command calls seem to run in different contexts with MSBuild, so you lose the NODE_ENV value.

I suspect you can use a similar tack to also get MSBuild to run npm and bower, but that's an experiment for another day!