Add Environment Variables in a Netlify Deployment

AM

Aman Mittal ā€¢ September 01, 2020

3 min read ā€¢ 589 words

Recently I migrated my blog (the one you reading right now) from Gatsby to Next.js for some specific reasons. The first reason, me being curious about how Next.js works and how is the developer experience. The second one, I want to have minimal effort and spend less time in managing a blog's UI and spend more time on writing posts. Lately, the vice versa has been the reality.

To not write every CSS element from scratch for responsive design, I am using Chakra UI for this blog which is a UI component library for React apps. It serves the purpose.

The idea for the post#

The idea of the post came from a problem of my own. Since I am a fan of minimal effort, this blog has been running from a GitHub repository deployed with Netlify.

There are many advantages to this bare infrastructure such as free HTTPS certificate, using a custom domain, and so on. This way, Netlify manages continuous deployment runs the build command from a Gatsby or a Next.js rendered site. It also triggers a deployment whenever there is a new commit pushed in the GitHub repository.

The problem that leads me to use an environment variable#

That said, let's get back to the main topic. After deploying the blog with 90+ posts, I ran into an issue that is known as "Allocation failed - JavaScript heap out of memory" in Node.js world.

The issue occurs when the deployment build runs out of memory. Node.js does not handle this by rolling back and moves forward with the build which eventually concludes in the build to fail.

Regardless of what stack or framework you use to deploy your site, if the deployment instance is using a node server, one day you might run into an issue as shown below.

ss1

The good "Old space" problem in V8#

Diving further I got to learn a new thing even though I've been using Node.js since the starting of my own developer career. This issue occurs when the memory consumption of garbage collection in V8 reaches its max limit. If the limit is exceeded, V8 kills the process.

More information on this issue can be found on Stackoverflow here. It also explains, when to increase the memory and when to avoid.

Increasing the memory limit with Environment Variable#

According to Chris McCraw's answer here, a Netlify build (if not using an Enterprise plan) should not exceed the limit of 3GB for reliability. In the same thread, there is a proper solution and that leads to the use of environment variables.

If you face this problem using the same approach with Netlify as I did, or for some other reason you want to use environment variables, here is how to get started. Step one is to go to your deployment on Netlify and click the option Deploy Settings.

ss2

This is where all the deployment-related settings are stored. On the next screen, observe a sidebar and under the tab Build & deploy there is a sub-tab called Environment. Click on that and then click on the button Edit variables. Now, you can add the key and value for each environment variable as shown below.

ss3

Further reading#

Here is a list of all the links I came across when resolving this issue. Might be helpful:


šŸ¦ Share on Twitter ā€¢ ā˜• Buy me a Coffee ā€¢ šŸ’Œ Subscribe Newsletter

About the author

šŸ‘‹ Hey! Iā€™m Aman Mittal. Iā€™m a software developer and a technical writer.

This website is a collection of all posts I've written in my journey of learning web and mobile development.

Ā©2020 Aman Mittal

BlogNewsletterTwitterBuy me a coffee