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.
Top comments (9)
search/replace on folder with the editor is better and even faster than your solution
That's a good solution too, but I think you'd have to search/replace every time you went to build the app. I personally was looking for a set it/forget it solution and this did the trick for me.
Every time, when you install packages, not when you build.
How about eslint and some git actions to prevent merging bad code in production releases?
That's definitely on my radar too! ;)
Wow, what a great tip, Kevin. Thank you so much for sharing. Since I want to increase my quality of code this year to bring my skills to the next level, your tip will definitely help me out here.
Definitely ups your game when it comes to your app looking more professional. Good luck!
Great tips!
For me, I prefer writing new custom logging utilities over overriding global method console.log.
Perfect! This simple solution worked for me, but I changed the env var to process.env.REACT_APP_ENV so I only have to add this in my package file:
"start": "REACT_APP_ENV=production