ArrowLeft Icon

Disable Source Maps in GatsbyJs V2 for Production.

📆 · ⏳ 3 min read · · 👀

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

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.

{
"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. 👋

EnvelopeOpen IconStay up to date

Get notified when I publish something new, and unsubscribe at any time.

Need help with your software project? Let’s talk

You may also like

  • # projects# engineering

    I built my own in-house Newsletter system

    Discover how I transformed the need for a newsletter system, sparked by Revue's shutdown, into a fulfilling side project. Dive into the my journey of conceptualizing, breaking down, and building a custom newsletter system that seamlessly integrates with my website's content workflows.

  • # linux

    SystemD Timers vs. Cron Jobs

    Explore the world of task scheduling in Linux as we compare the classic Cron Jobs with the modern SystemD Timers. Learn when to use each method and how to set them up to automate your Linux system tasks effectively.

  • # engineering

    Incremental Static Regeneration: Dynamic Websites with SSR and Cache Headers

    Step into the world of web development magic as we unravel the fascinating tale of Incremental Static Regeneration (ISR). Join me on this journey where we'll explore how to leverage Server-Side Rendering (SSR) with smart cache headers to build dynamic websites that load with lightning speed. Buckle up – we're about to give your website a turbo boost!