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

Question

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;

Mounts

You may be using developer mode, production mode doesn't show any files. They are bundled together. – Policewoman

Thanks for the reply.How would i change it to production mode?I just ran npm run build,deployed the build folder on the server. – Mounts

May i know why this question is down voted?Although i have followed all the necessary info – Mounts

@Karthik https://mcmap.net/q/1248345/-reactjs-how-to-hide-node-modules-and-webconfig-in-the-devtools-on-production-app – Microprint

Answer 1

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.

Bula

I just removed .map files .Now,it is not showing node modules and web config in the devtools.But,i just want to know why .map was generated since it is not required. – Mounts

"Not required" is an arguable phrase. This is source-mapping and 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. – Bula

Answer 2

GENERATE_SOURCEMAP=false react-scripts build

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

Microprint

Answer 3

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.

Lasley

Thanks for the reply.When i run npm run build ,a build folder is generated with static folder having css and js folders where it contains two files one with minified and other with map extension.As you can see in the image attached in the question – Mounts

Yes, i can see that and? – Lasley

how can i proceed further,How to hide it in the devtools – Mounts

You cant hide the basic js or styles from users. Its always available. If you are concerned about information security, a reliable security can be provided from server side only. – Lasley

in any one of the react application on production it is not showing the folders such as config,webpack,node modules.I guess js with map extension is causing all this.beacuse its size is about 17mb. – Mounts

Yes, you are right. I missed to see that part. the node modules, and web pack are not supposed to be there, only the html, js, css and assets should be there. Can you ensure that, you dont have any of those except index.html in your public folder – Lasley

Answer 4

just run

npm run build --nomaps

Gadwall