How To Hide ReactJS Code From Browser

Hello Devs,

In this article, I am going to tell you something about hiding ReactJS code in the production server.

Table of content

1. Introduction
2. What makes your source code visible in the browser
3. Hide your ReactJS code using .env file
4. Hide ReactJS code using package.json file
5. Hide ReactJS code using cross-env library
6. Custom JavaScript file to hide ReactJS code
7. 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 the 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 the public or not like below.

If you have your code visible like this, then you are in the correct place on this Planet to hide your ReactJS codes. By the end of this article, I will show you what are the different possible ways to hide the ReactJS codes in a production environment and their advantages/ disadvantages.

If you already know how to hide the ReactJS codes, 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

---

It's map files, but what are they?

If you are in a 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 within your components when any error comes, so Webpack and Babel create a map file (map files are JSON blob which is 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. 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 your ReactJS application which includes HTML, CSS, and JavaScript files. It also includes map files.

Please check your 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 that's 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, let's 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 the below line of code to it

GENERATE_SOURCEMAP = false;

and then make a build of your ReactJS app using the command npm run build

What it will do is, it will create a build folder without the map files. You can go inside the build\static\js and check that

This way of generating build folder is not Operating System dependent.

Deploy the app and now you will not see the source code in source tab in the developers tool of your browser

4. Using package.json file.

---

The way of removing map files using this way is OS-dependent lets open the package.json file and go to the 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 ? These are just the NPM commpands which you can configure as per your requirements in you package.json file. prebuild command runs before the build process and postbuild command run after the build process.

"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 the 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 the 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/command to be executed.

"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 your custom js file to delete map files

---

"build": "react-scripts build",
"postbuild": "node ./delete-sourcemap.js",

This creates 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 the browser and the basic reason behind them.

Thank you for reading this far. This is a brief introduction to Hiding ReactJS code in the 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 an issue.

Hope it's 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