DEV Community

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

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
 
myogeshchavan97 profile image
Yogesh Chavan

@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
 
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

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

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