The Simple Way to Remove JS Console Logs in Production

During the building and testing phase of a site, console logs can be a really quick way to test things like fetched JSON data from a server or the return value from a function. There are browser plugin extensions that add debugging tools, but sometimes a simple console.log is quicker.

When you're creating the production build it's really easy to forget to go through and manually remove every console log from your code and all those comments will be readily available it was is supposed to be your final product. I want to walk you through an automatic "set it and forget it" way to strip all the console log notifications from your code at production time.

I'll be starting with a boilerplate React app using Create React App to get up and running quickly, but this code can be added to any project that has a "build" script in your package.json file. If you're not familiar with Create React App, there are good tutorials all over the place on Dev.to. Open up a terminal in any code editor with Node installed and run

npx create-react-app tutorial-app
cd tutorial-app
npm start

That will launch a new window running the default Create React App index page. Back in your code editor, find the "App.js" file and at the top of the App function (before the return) add any console log. For instance:

function App() {
  console.log('A debugging message that is for my eyes only');
  return (
    <div className="App">
...rest of your code

If we save that, open up the console in our web browser and click select the "Console" tab, you will now see our debugging message in the console window.

That works great for testing, but when you have the app finished and you create the optimized production build for deployment using Create React App's "build" command in the terminal and test it:

npm run build
serve -s build

The same message appears which is definitely not ideal.

We're going to take advantage of one of the global variables that is injected by Node at runtime. By using the 'process.env.NODE_ENV', we can check to see if we are using the 'production' or 'development' environment when we are using our two 'start' and 'build' scripts.

To keep all our our code clean, lets create another file in the same folder and call it 'config.js'. In that file, put the following line:

if (process.env.NODE_ENV === 'production') console.log = function () {};

That line is checking to see if the injected Node variable is 'production' and if it is, we overwrite the default console.log function with our own function. In this case, that function is empty and returns nothing. We can now import that file into our app by importing config.js into the App.js file:

import logo from './logo.svg';
import './App.css';
import './config.js';

If we save our app and restart the development server (npm start), our 'A debugging message that is for my eyes only' shows up in the console. But if we stop the development server and run our build script ('npm run build') and serve the production version of the app so we can test it locally ('serve -s build') our console log is now automatically stripped:

This is a really simple example and the process.env.NODE_ENV line can be added into any file in your project, but it's a really easy way to automate console log removal for your production builds. To extend this out to any other type of app with a build process (like Webpack), you can simply add '--mode production' to your 'build' script and that will have the same functionality.

Special shout out to Walkator for the header image.