Hide ReactJS Code From Browser

Hello Devs,

In this blog post I am going to tell you something about hiding ReactJS code in production server.

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.

codeinbrowser

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.

image of map files

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

image of the build folder without map files

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);

source

7.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 capscode.in/blog TO LEARN MORE... See you in my next Blog article, Take care!!

Thanks, CapsCode

Hide ReactJS Code From Browser

Table of contents

1.Introduction

2.What makes your ReactJS source code visible in the browser

3. Hide your ReactJS code using .env file.

4.Using package.json file.

5.using cross-env library.