Environmental Configurations for Frontend Development

img

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 = {
HOST:'localhost',
POST:3000
}

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>
<script>
window.GLOBALS = {
HOST: window.__env['HOST'] != undefined ? window.__env['HOST'] : 'foo.com',
PORT:window.__env['PORT'] != undefined ? window.__env['PORT'] : 3000,
}
</script>

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