CODEWITHSUNDEEP
reactjscreate-react-appproductiondevtools
code_Knight
code_Knight

Reputation: 281

Reactjs:How to hide node modules and webconfig in the devtools on production app?

I've created a React.js application running npx create-react-app my-app and I don't want the complete project to be available in the devtools when in production mode.

How can I disable or hide node modules and webconfig in the sources tab(devtools)?

I checked in other deployed react application which does not show static folder or the entire project; how can I achieve same?

Below, a screenshot from the console of my browser's "Sources" tab, showing some directories I would like to hide to the public;

devtool image

Upvotes: 8

Views: 8224

Answers (4)

Dipanjan Panja
Dipanjan Panja

Reputation: 533

just run

npm run build --nomaps

Upvotes: 0

Abhijeet Ahuja
Abhijeet Ahuja

Reputation: 5950

GENERATE_SOURCEMAP=false react-scripts build

this will not generate sourcemap (.map) files in the final build.

Upvotes: 12

devserkan
devserkan

Reputation: 17608

You see your full code in devtools because of source mapped files. It is a great way to debug your code in development or even for some people in production mode.

Without sourced maps, when an error occurs you can't easily find where this error is coming from in your bundled files. If you don't want to see your code like this in production you can simply delete the files after the built. Remove the .map files in your static/css and static/js folders. So, with this you can hide your unbundled source code. But, bundled .js and .css files will be always there. There is no way to hide them since this is frontend.

As told in the comments if your concern is really a security issue, then you can't do this on frontend. Your code always will be seen, at least its minified and uglified but there will be. So, do your security stuff in backend.

Upvotes: 12

Rohith Murali
Rohith Murali

Reputation: 5669

When you run npm run build the webpack bundles all your js files into a single main js file. Your development files, ie, react code in es6 wont be available in the build folder after production build.

Upvotes: 0

Related Questions