DEV Community

loading...
Cover image for How to Hide your React Source Code from Chrome Dev Tools when Deployed to Production

How to Hide your React Source Code from Chrome Dev Tools when Deployed to Production

myogeshchavan97 profile image Yogesh Chavan Originally published at blog.yogeshchavan.dev ใƒปUpdated on ใƒป2 min read

source_code.jpeg

Do you know that when you deploy your React application which is created using create-react-app or your own webpack configuration to a live website like Netlify, Vercel, Heroku etc,

your entire source code is visible to everyone from the sources tab of the dev tools.

This is not an issue with the create-react-app but all of the source code is added because of the source map which helps to easily identify the source of the bug that will occur on the live site in the future.

This is fine If the website source code is publicly available on GitHub.

But you definitely don't want everyone to see your entire source code If it's a private repository or you're working on a client project.

There is an easy way to fix it.

Create a file with the name .env in your project folder with the below code inside it:

GENERATE_SOURCEMAP=false
Enter fullscreen mode Exit fullscreen mode

Now, when you run ๐—ป๐—ฝ๐—บ ๐—ฟ๐˜‚๐—ป ๐—ฏ๐˜‚๐—ถ๐—น๐—ฑ or ๐˜†๐—ฎ๐—ฟ๐—ป ๐—ฟ๐˜‚๐—ป ๐—ฏ๐˜‚๐—ถ๐—น๐—ฑ command from the terminal, It will generate a ๐—ฏ๐˜‚๐—ถ๐—น๐—ฑ folder with minified files without a source map that you can deploy to the production.

Check out my this article to understand how to hide source map when using custom webpack configuration

Removing the source map also decreases the final bundle size of your application and so your application will load faster.

Thanks for reading!

Want to learn all ES6+ features in detail including let and const, promises, various promise methods, array and object destructuring, arrow functions, async/await, import and export and a whole lot more from scratch?

Check out my Mastering Modern JavaScript book. This book covers all the pre-requisites for learning React and helps you to become better at JavaScript and React.

Check out free preview contents of the book here.

Also, you can check out my free Introduction to React Router course to learn React Router from scratch.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

Discussion (16)

pic
Editor guide
Collapse
williamhenderson profile image
William Henderson

While this is a nice thing to do, and definitely good practice when deploying to production, you shouldn't rely on this alone to protect your source code as it can be easily found by prettifying the output main.js bundle.

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author • Edited

Even though you prettify the code, the prettified code is a minified code with all the variables names changed and is a single .js file with ES5 code which webpack creates from your React source code so it's not easily understandable.

Collapse
ender_minyard profile image
ender minyard

How/why is this good practice when deploying to production?

Collapse
williamhenderson profile image
William Henderson

If your project is open source then it makes no difference, but for closed source projects you don't want to ship your source code as part of your production build.

Thread Thread
ender_minyard profile image
Collapse
thebouv profile image
Anthony Bouvier

Just understand this doesnโ€™t make your source code totally unreadable. All your algorithms, any endpoint urls, bare strings, really everything is still viewable. Itโ€™s client side code. Donโ€™t hide anything there you donโ€™t want figured out. This merely obfuscates it. But all the source is there for the taking if it is client side.

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

That's true but it surely adds some levels of difficulty in understanding the code rather than the clearly visible source code.

Collapse
thebouv profile image
Anthony Bouvier

Totally. Just donโ€™t want to misdirect newbies who might think following this will protect their source code entirely.

Iโ€™ve taught many boot camps now and the material never covers client-server relationships or even โ€œhowโ€ the internet works. So just want to make sure new people understand client side code vs server side. Thatโ€™s all! :)

Collapse
atulgairola profile image
atul-gairola

I was looking for something like this for some time now. Thanks a lot Yogesh.
Just a quick question tho, does this in any way affect the SEO or performance of the website?

Collapse
amaanahmad profile image
Amaan Ahmad

Nothing will change in how the app runs.

The change will be in your debugging experience.

Source maps are helpful for debugging code. You write your code in TypeScript, and the compiler turns that source code into JavaScript. When your app is running in a browser like Firefox, the browser is running JavaScript. Even though the browser is running that JavaScript, if you open the debugger in Firefox, the debugger will display the TypeScript source code and will let you set break points in it. The debugger is able to do that because of source maps, which map the TypeScript source code to the JavaScript runtime code. That is what source maps do: they map the source code to the runtime code to enable source code debugging at runtime.

Answer source
Credits to: Elthel Mario

Collapse
amaanahmad profile image
Amaan Ahmad

Although React is not so great when you need an SEO-friendly website.
Another way would be using react server side rendering

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

@amaanahmad Yes, that's what Next.js provides

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

@atulgairola React is not a great choice If you're concerned about SEO. Try Next.js which is a react.js based framework for SEO

Collapse
atulgairola profile image
atul-gairola

Oh yes I forgot about that, thanks!

Collapse
andrewbaisden profile image
Andrew Baisden

Cool this is worth trying.

Collapse
myogeshchavan97 profile image