Then you do it during the build time. You need to build your app, passing API keys (or whatever values that you need to be injected) as parameters to the build pipeline and have them replaced at the right places.
Injecting values during build
With Webpack, you can do this with the html-webpack-plugin. You can define arbitrary key value pairs with this plugin configuration and read this in your templates. The plugin will take care of replacing the correct value during build time.
For example, Lets look at the below
HtmlWebpackPlugin configuration, along with plugin options, we have also defined our own key value pairs
apiKeys. Then in your template file,
index.html, you can access this value as
htmlWebpackPlugin.options.YOUR_KEY_NAME. For example,
In the above example, I read the build time values and set them into
window scope so that I can access it anywhere in my script.
Providing environment specific values to build pipeline
With above setup, we moved the hardcoded API keys from code layer to build layer. But the values are still hardcoded. How can we avoid that?
By setting the values as Environment variables and letting node read and supply it to us with
process.env. Let’s change our
HtmlWebpackPlugin configuration a little bit:
With this, all you have to do is to set the correct environment variables in the machine, thus completely avoiding the hardcoded values in our code base.
If you want to supply different API keys for different environments, you can either pass in the values in command line when you invoke the build script or if you have a CI pipeline, define the environment values in the prod / dev build jobs.
As an alternative to setting up environment variables, you can also use the module dotenv to define the variables as a dot file in your project’s root folder. But remeber NOT to commit the dot file in Git, as it allows each system to supply it’s own environment variables.
So, that’s it. What do you think about this approach? Please let me know in the comment section.