Let’s consider you have a production-ready React.js application that is created using create-react-app, a comfortable environment to build a single-page app. Or you have created a web app using your own webpack configuration and deployed it with a hosting platform like Azure, AWS, Vercel or Netlify, etc.
Now, you found out that your React.js code for the website is visible to the public through the browser’s developer tool.
This will be fine if you have made the source code publicly available on GitHub but if it is a private repository you might want to hide the entire source code.
If your web application code is visible to the public in this way, this article will help you to keep your code protected. However, before going to the answer first understand what makes the source code visible to the public through the web browser, and is it really possible to completely hide your source code?
When you start creating the front-end web application with React.js, you might automatically generate the source maps using the “create-react-app” CLI command. The command generates a bundle file along with the “source maps” files.
The same thing can happen with any other bundle and if you do not pay attention to these files, the app source code will get publicly available. This may cause big trouble for the client projects making them vulnerable to reverse engineering.
Business organizations put their time and resources into app development that has most of its logic on the client side. With source code accessibility, anyone can copy the source code, modify it and publish it or may dishonor the name of your web app.
So is there any way to fix it?
Yes, there are many ways to fix this problem but not completely. In fact, even if you obfuscate your source code or hide it using certain tricks, you can only add some level of difficulty to the code, so that it is not completely accessible to the client side.
In reality, it's impossible to completely hide your source code from the client side.
However, it's not the professional way, here are a few ways to make your source code invisible to the browser.
Create a file with the name .env inside your project folder ( not inside the src folder) with the same path where package.json is defined and add the below code inside it:
Now build your app using npm run build or yarn run build from the terminal. It will generate a build folder without a source map, that you can deploy to the production.
Change your build command in the script object as:
Next, you can also use a package called cross-env. It injects your environment variables and works with Windows, Linux, and other environments.
And then add the following command.
Set it for the multiple global variables.
Some popular obfuscators are,
These obfuscators offer features such as variable renaming, string extraction, and encryption, dead code injection, control flow flattering, and other code transformation techniques to confuse the human readers further.
Though you can make the source code complicated by adding certain levels of difficulty so it will be hard to understand by humans. But the browser may develop the capability to undo it in the future.
Well, for now, you can use the tricks in this article to hide your React.js code.
And if you want to accelerate your web app development with React.js try using DhiWise React web builder- The only ProCode and the LowCode platform that empowers developers to build single and multi-page apps in a few clicks.
Sign up now!