Disable Source Maps in GatsbyJs V2 for Production.

Published on

Introduction

GatsbyJS in version 2 automatically includes source maps when you build your site for production using the yarn build command. This is a really handy feature that enables you to debug and view your code in production.

If your website or app is open source then you would not mind people being able to view your code directly when visiting your site, but if your code is a private source or some client projects for which you don't want to explicitly allow others to view your code, you would have to disable the generation of source maps when gatsby builds your site.

In this blog, we will see how to configure source maps settings for your GatsbyJs v2 websites i.e have source maps in development so that your life is a bit easy as a developer but disable them on production builds.

Customize Webpack

GatsbyJs uses Webpack for bundling the files, don't worry if you don't know how to configure Webpack because for this task we won't be doing any high-level configurations.

What we have to do is disable the devtool flag when we are in the production environment.

So, since now we know what we have to do, let's take a look at how we are going to do it.

We can modify the configuration options for Webpack in gatsby by exporting a function called onCreateWebpackConfig in the gatsby-node.js file. If you don't have a gatsby-node.js file then create a new one (most likely you would already be having that at the root of your folder).

Copy the snippet below in the gatsby-node.js file

title=gatsby-node.js
exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  const config = getConfig();
  if (config.mode === 'production') {
    // Turn off source maps in production
    actions.setWebpackConfig({
      devtool: false,
    });
  }
};

What's Happening

So first we are destructing actions and getConfig from this function from the list of available configurations.

We will first get the current config by calling the getConfig function, it has a lot of properties but the ones in which we are interested are devtool and mode.

{
	...
	devtool: 'source-map',
	mode: 'production',
	...
}

when NODE_ENV is set to production, we would get the mode value set to production in the config as well, so we would first check if this mode is production or not.

If it is production then we would call the method setWebpackConfig on the actions object and pass the devtool option to false (which is initially set to 'source-map').

And that's it, we have successfully disabled source maps for our website in production.

Note: GatsbyJS creates the public directory and it is usually not cleared automatically when you are running gatsby build, so to check the effects you have to clear the public and .cache directory (use gatsby clean command). You can add these scripts to your package.json file.

title=package.json
{
	"scripts": {
		...
		"build": "gatsby build --log-pages",
		"clean": "gatsby clean",
		...
	}
}

Pro Tip for Netlify

If you are hosting your site on Netlify then to see the changes, you have to clear the cache and deploy the site again. You can find this option on your dashboard.

Clear cache on Netlify
Clear cache on Netlify

TL;DR

We learn how to disable source maps in production for the GatsbyJS version 2 website.

More reading

See you in the next one. 👋

Updates straight in your inbox!

A periodic update about my life, recent blog posts, TIL (Today I learned) related stuff, things I am building and more!

Share with others

Liked it?

Tags

Views

You may also like

  • system-designdatabase

    Master-Slave Replication: Scaling Your Database for High Availability

    As businesses grow, their databases can become overloaded and slow, leading to a poor user experience. To address this issue, database administrators can use a system called master-slave replication, which allows for multiple copies of a database to be distributed across different servers. In this article, we'll explore the concept of master-slave replication, how it works, and why it's important for achieving high availability in your database.

    3 min read
  • system-designdatabase

    Exploring Master-Master Replication in Databases: How It Works and Its Benefits

    Master-master replication is a powerful technique that can help you improve the availability and scalability of your database system. But what exactly is master-master replication, and how does it work? In this article, we'll explore the details of this technique, including its benefits and some real-world examples.

    4 min read
  • system-design

    The Power of a CDN: Delivering Lightning-Fast Content

    Do you want your website to load faster for users all over the world? A Content Delivery Network (CDN) is the solution you've been looking for. This article will explore what a CDN is and how it works to speed up your website, giving you a competitive edge in today's fast-paced online world.

    3 min read