Cloudflare Pages and updating the Node.js version

April 20, 2022

TLDR: I explain the story here, if you want to go to solution, go a little below.

In the last post, I mentioned, my will to blog and Cloudflare's automagical ability to setup auto deployments from Github Repository. But it still took me some time to figure that what I was looking for was there all along.

If you are from the same time as me, you'll probably see a cryptic error mentioning that Node.js version is not supported by Gatsby.

You may think that Cloudflare Pages Build system doesn't support any higher versions and start deliberating some other options such as Github Actions, which might give you more control over the node version and get your site up and running. But this option has it's own downsides.

It turns out that Cloudflare Pages unlike it's Worker's product, doesn't have a Github Action for it. Hence, the workflow I brainstormed turned out to be something like the following

  • Generate Github Artifacts through a Github Actions Workflow
  • Once generated push the artifacts to a branch on the same repository or a different repository
  • Let the Cloudflare Pages listen to that branch/repository so it can auto deploy the static artifacts

As you can see, it's cumbersome and who needs to maintain a separate build process.

Thankfully, there's an easier way to do this.

Easiest Solution

The easiest solution I found for this problem was just tell Cloudflare to use a newer Node.js version than the default one it currently uses. This is possible, by changing the NODE_VERSION environment variable in the settings of your Cloudflare Pages project.

There are range of configurable environment variables that Cloudflare offer for different languages and runtimes it support. You can take a look on Build Configuration to learn more about these.

Yes, So No Extra Complicated Build Processes required, thanks for the configurability of Cloudflare Pages.

Conclusions

So I guess the conclusion of this post is, it always pays to look deeper into the product and see if they have any native solutions to the problem.

In short, Read The Manual and Save Some Time :)


Profile picture

Written by Hannan Ali uses this blog to jot down his thoughts on code and more You can follow him on Instagram