Add Environment Variables in a Netlify Deployment
Published on Sep 1, 2020
4 min read
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🔗
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🔗
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.
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.
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.
Here is a list of all the links I came across when resolving this issue. Might be helpful:
- The Stackoverflow thread that explains shortcomings of V8 in managing memory
- Features of Netlify + GitHub app
Browse all posts
I'm a software developer and a technical writer. In this blog, I write about Technical writing, Node.js, React Native and Expo.
Currently, working at Expo. Previously, I've worked as a Developer Advocate, and Senior Content Developer with companies like Draftbit, Vercel and Crowdbotics.