DEV Community

Cover image for Hide Your Source Code from Developer Tools while using React
Siddhant Khare
Siddhant Khare

Posted on

Hide Your Source Code from Developer Tools while using React

If you are building a Product using React & using create-react-app boilerplate to get started.

I have seen this mistake doing by many of the Startups i got offer for different roles and by some great products.

Here's One Thing you need to change. That, Source Code that is written by you or the developer team should not be visible to the client.

And, To Hide Your Source Code in Developer Tools, just update this one line in your package.json file.




"build": "GENERATE_SOURCEMAP=false react-scripts build"



Enter fullscreen mode Exit fullscreen mode

Demo On GitHub

Before Adding that Line:

React Source Code Visible in Developer Tool

After Adding that Line:

Hide Source Code in React

Some More Modern Frameworks Like next.js have fixed this issue in their boilerplates.

Live Demo: https://dont-use-default-boilerplate.vercel.app/

Source Code on GitHub: https://github.com/Siddhant-K-code/dont-use-default-boilerplate

Top comments (3)

Collapse
 
vaibhavpandeyvpz profile image
Vaibhav Pandey

Source maps are essential for debugging in the event of error reports. The mistake is actually not in generating them but to publish them to production server. Take for e.g., docs.sentry.io/platforms/javascrip... Sentry support demangling of symbols using sourcemaps generated during build.

Collapse
 
siddhantkcode profile image
Siddhant Khare

Yeah, I had the same point that mistake is to take sourcemaps to Prod. That's why I added the sourcemap false script to to the build script and not to the development script

Collapse
 
vaibhavpandeyvpz profile image
Vaibhav Pandey

There's is nothing wrong in building it in production. You ideally should build it, you can't use development sourcemaps to trace errors in production builds. The key is to exclude them from the publishing part.