Environmental Configurations for Frontend Development


Every developer is going to have their own environment configuration tuned to their needs to get their work done. Setting up client-side configurations can be tricky because you can't leverage server-side operations. Here is a quick and easy way to setup up environmental configurations on the client side for your front-end development team.

Create an environmental _env.js file in the root of the client side app directory. Add environment specific code into the _env.js and attach it to the window.

window.__env = {  

In the index.html file load the __env.js in the header

<script src='/__env.js'></script>  

Then in the index.html declare your default environmental variables.

<script src='/__env.js'></script>  
window.GLOBALS = {  
HOST: window.__env['HOST'] != undefined ? window.__env['HOST'] : 'foo.com',  
PORT:window.__env['PORT'] != undefined ? window.__env['PORT'] : 3000,  

And make sure that the developers on your team add the /__env.js file to the their .gitignore otherwise a nightmare can happen.