0

There are several blog posts that explain why switching from grunt or gulp to building with just plain npm is a good idea for example this one by Cory Hourse or this one by Keith Cirkle. One thing these blog posts do not explain is how I can easily do environment configuration. For example a common requirement is to have different REST API locations. During development the server might be running on localhost:8080, but on production it should be accessed through a relative URL such as /api or /rest/api and the port or protocol are different for development and production.

There are several solutions for this. For example grunt supports template strings like <% %> and <%= %> and there are grunt or gulp plugins like in this question about grunt-ng-config. These solutions are specific to Angular (which I am using), but I am not necessary looking for an AngularJS specific solution.

I also know of the angular-environment plugin, but as far as I can see this does configuration at run time and I am looking for something that can do this at build time.

So what I am looking for is something that allows me to configure my application at build time either by replacing some template strings or by generating a Javascript file with some variables that I can read at run time.

One requirement is that it should be OS independent. So I do not want to use UNIX specific tools such as sed to rewrite a file. And due to different variable expansion (e.g. % vs. $) a solution should not rely on environment variables.

Is there an existing solution or a best-practice for this?

Community
  • 1
  • 1
lanoxx
  • 12,249
  • 13
  • 87
  • 142

1 Answers1

0

due to different variable expansion (e.g. % vs. $) a solution should not rely on environment variables

this cuts off your best solution. Why not rely on env vars? node provides 

process.env

to access env vars. You could create custom gulp / grunt tasks that use process.env instead of the "different variable expansions" you refer to.

You can use, for example, Jade templating to pass env var values to your HTML at build time. This would generate your index.html on the fly as part of the build process and add relevant classes based on env vars.

For example, according to the value of an env var you might set a class on the HTML tag.

This might reflect the customer.

Then you could have some CSS

.customer1 .myimage {
  background-image: url("customer1.png");
}

.customer2 .myimage {
  background-image: url("customer2.png");
}

or you could use JavaScript to detect which class was added to head during the build.

danday74
  • 52,471
  • 49
  • 232
  • 283
  • As far as I can tell environment variables are platform dependent, so `%` on windows (batch) and $ on Unix (bash). Do you have a suggestion how to solve that? The suggestion with jade looks interesting I will take a look if I can use that. – lanoxx Apr 15 '16 at 19:20
  • Handlebars is also good for server side I believe and u can use it with plain HTML format – danday74 Apr 15 '16 at 20:39
  • The % and $ thing, are you referring to reading the vars ? Can't u just use process.env.envvarname to read them where envvarname is the name of the var? – danday74 Apr 15 '16 at 20:43
  • Is it possible to create javascript or json files rather then html with these emplate engines? – lanoxx Apr 16 '16 at 13:38
  • jade and handlebars are meant for server side HTML templating - these technologies can be used client side but, client side, there are better solutions such as angular (which has handlebars built in) - there are other server side templating libs for other file types - just need to sniff around! – danday74 Apr 16 '16 at 13:48