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 websi...
For further actions, you may consider blocking this person and/or reporting abuse
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.
Even though you prettify the code, the prettified code is a minified code with all the variables names changed and is a single
.jsfile with ES5 code which webpack creates from your React source code so it's not easily understandable.How/why is this good practice when deploying to production?
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.
Why?
Why would you want to publicize your code?
Especially if it's commercial site. Although there may not be any secret logics or API keys (hopefully not any), but you always try to minimize sharing what's unnecessary.
yes but who can develop it ?
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.
That's true but it surely adds some levels of difficulty in understanding the code rather than the clearly visible source code.
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! :)
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?
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
Although React is not so great when you need an SEO-friendly website.
Another way would be using react server side rendering
@amaanahmad Yes, that's what Next.js provides
@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
Oh yes I forgot about that, thanks!
I added GENERATE_SOURCEMAP=false in .env but it didn't work.
In scripts, I added "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build" but this also didn't work.
I am deploying my app on heroku and chose github as a deployment method.
Please help!
For Heroku, you need to add environment variables from UI. Goto you app in heroku -> Settings -> Config vars and click on Reveal Config Vars and then add GENERATE_SOURCEMAP with value false and then reploy the app.
I did that as well but it isn't working. It works fine on netlify. I have deployed on netlify for now. But didn't work in heroku.
It does work on heroku. You might have missed something. Anyway, glad it's working on netlify for you.
Cool this is worth trying.
Thank you @andrewbaisden
i lost one of my project because of that :(
thanks
Oh, Sad to hear that.