Hello Devs,
In this blog post I am going to tell you something about hiding ReactJS code in production server.
Table of content
- Introduction
- What makes your source code visible in the browser
- Hide your ReactJS code using
.envfile - Hide ReactJS code using package.json file
- Hide ReactJS code using cross-env library
- Custom JavaScript file to hide ReactJS code
- Conclusion
1.Introduction
I am assuming that you have developed a ReactJS application using create-react-app (CLI tool for setting up a boilerplate setup to make React apps.)or your own webpack configuration and also deployed it in some hosting platform like Netlify, Vercel, Heroku, Azure, AWS etc.
But have you ever opened your website and in developers tool of your browser, have you ever checked the source tab of it.
If not! Please go to your website and check whether your ReactJS codes are visible to public or not like below.
If you have your code visible like this, then you are in the correct place in this Planet to hide your ReactJS codes.
By the end of this blog post I will show you what are the different possible ways to hide the ReactJS codes in production environment and their advantages/ disadvantages.
If you already know how to hide the ReactJS codes what I would recommend you to have a glance at this blog and the other possible ways and let me know in the comment whether you are knowing that or not.
2.What makes your ReactJS source code visible in the browser
Its map files, but what are they ?
If you are in hurry to remove only hide your reactjs code from production then go to next topic Hide your ReactJS Code
When you are building reactjs code, babel converts JSX into the native JavaScript code (minified JavaScript file) which is difficult to debug withing your components when any error comes, so webpack and babel creates a map file (map files are JSON blob which are non readable by Humans).
A sourcemap is a mapping between the generated/transpiled/minified JavaScript file and one or more original source files. The main purpose of sourcemaps is to aid debugging. Basically, if there’s an error in the generated code file, the map can tell you the original source file location.
Now back to the code,
We run npm run build command to create a build folder of your ReactJS app which we deploy to run our application in Production.
Have you ever checked what this build folder consists of ?
Build folder consists of the minified version of you ReactJS application which includes HTML, CSS, and JavaScript files. It also includes map files.
Please check you map files inside build\static\js.
NOTE : if you deploy this build file then your code will be visible in the browser.
so you can delete the map files manually and then deploy the build folder, but that's not the correct way of doing so and thats not the way any developer likes to do.
In your localhost (dev environment) webpack auto generates the sourcemap files so that you can see the line numbers of the error(if any) in your code
So, without wasting time, lets begin
Here are different ways for hiding your ReactJS code from browsers,
3. Hide your ReactJS code using .env file.
create .env file in the root of your ReactJS application (the place where src folder is there not inside the src folder or else in the same path where package.json is defined)
Now, add below line of code in it
GENERATE_SOURCEMAP = false;
and then make a build of your ReactJS app using command npm run build
What it will do is, it will create a build folder without the map files[link of above topic of map file]. You can go inside the build\static\js
This way to generating build folder is not Operating System dependent.
Deploy the app now and you cannot see the code in source tab in developers tool of your browser
4.Using package.json file.
The way of remove map files using this way is OS dependent
lets open the package.json file and go to script object and change your build command like below,
2.1 In Windows OS:
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build"
//The && DOES NOT work in the PowerShell but WORKS in cmd, so make sure in which CLI you are writing npm run build
2.2 In Linux OS:
"build": "GENERATE_SOURCEMAP=false react-scripts build",
2.3 configure build command to auto delete the map files.
2.3.1
"build": "react-scripts build && rm build/static/js/\*.map",
//creating and deleting .map files
2.3.2
"build": "rimraf ./build && react-scripts build && rimraf ./build/\*_/_.map"
2.3.3
"build":"react-script build && del build/static/js/\*.map"
2.4 use postBuild command to auto delete map files.
"build":"react-script build"
"postBuild":"rimraf build /\*_/_ .map"
//this will delete all the .map file post build generation
//not the recommened way becaue why to generate the map file if you are deleting it again
NOTE: What is prebuild and postbuild ?
"prebuild": "echo I run before the build script",
"build": "react-scripts build",
"postbuild": "echo I run after the build script",
//prebuild and postbuild runs automatically before and after build command respectively
2.5 using regex to delete the map files from build folder
"build": "node scripts/build.js && yarn run delete-maps",
"delete-maps": "yarn run delete-map-files && yarn run delete-references-to-map-files",
"delete-map-files": "find ./build -name '_.map' -delete",
"delete-references-to-map-files": "find ./build -regex '._\\.\\(js\\|css\\)' -exec sed -i -E '\\/[\\*\\/]#\\ssourceMappingURL=main(\\.[0-9a-f]+)?\\.(css|js)\\.map(\\\*\\/)?/g' {} +"
NOTE: "Removing only the .map files" sadly isn't enough. The build also enerates a asset-manifest.json file that contains references to that map files.
5.using cross-env library
install cross-env library in devDependency
npm install --save-dev cross-env
Just use NPM package cross-env. Super easy. Works on Windows, Linux, and all environments.
then ,
"build": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
Notice that you don't use && to move to the next task.
"scripts": {
"build": "cross-env NODE_ENV=production OTHERFLAG=myValue webpack --config build/webpack.config.js"
}
Notice that if you want to set multiple global vars, you just state them in succession, followed by your command to be executed.
6.Build you custom js file to delete map files
"build": "react-scripts build",
"postbuild": "node ./delete-sourcemap.js",
Create a new script called delete-sourcemap.js in your project's root folder:
const fs = require('fs')
function deleteMaps(dir) {
fs.readdir(dir, function (err, files) {
files.forEach((file) => {
if (/\.map$/.test(file)) {
fs.unlinkSync(dir + file);
} else {
fs.readFile(dir + file, "utf8", (err, data) => {
let result = data.split("\n");
console.log(result.length);
if (result[result.length - 1] !== undefined && result.length > 1) {
fs.writeFileSync(
dir + file,
result.slice(0, result.length - 1).join("\n")
);
}
});
}
});
});
}
["./build/static/css/", "./build/static/js/"].map(deleteMaps);
Conclusion
Awesome! Now you become an expert in hiding the ReactJS code from the Production environment. I hope you have now a very clear idea that why the ReactJS codes are visible in browser and the basic reason behind them.
Thank you for reading this far. This is a brief introduction of Hiding ReactJS code in Production Environment.
If you find this article useful, share this article. Someone could find it useful too. If you find anything technically inaccurate please feel free to create a issue.
Hope its a nice and informative read for you.
VISIT https://www.capscode.in/blog TO LEARN MORE...
See you in my next Blog article, Take care!!
Thanks,
CapsCode
Top comments (3)
And you would want to hide your code... why exactly?
To make troubleshooting and debugging harder, duh!
So typically you won't want to include sourcemaps in your production build as all it does it jack up your bundle size and how much data has to be delivered to the user.
Source maps should be disabled by default in prod builds and only enabled when there is an production issue that for some reason can't be solved locally.