DEV Community

Cover image for Hide ReactJS Code From Browser
capscode
capscode

Posted on • Originally published at capscode.in

Hide ReactJS Code From Browser

#javascript #webdev #react #productivity

Hello Devs,

In this blog post I am going to tell you something about hiding ReactJS code in 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 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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

2.2 In Linux OS:

"build": "GENERATE_SOURCEMAP=false react-scripts build",
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

2.3.2

"build": "rimraf ./build && react-scripts build && rimraf ./build/\*_/_.map"
Enter fullscreen mode Exit fullscreen mode

2.3.3

"build":"react-script build && del build/static/js/\*.map"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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' {} +"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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",
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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",
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Source

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)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

And you would want to hide your code... why exactly?

Collapse
 
johnjs_ profile image
js •

To make troubleshooting and debugging harder, duh!

Collapse
 
sgolovine profile image
Sunny Golovine •

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.

Read next

ivan_862363c9a8b0 profile image

Create Browser Extension with Vite + TS

Ivan N -

morewings profile image

Let’s create numeric range input with attached scale

Dima Vyshniakov -

salehmubashar profile image

Create a Dynamic Code Playground with SandPack + React!

Saleh Mubashar -

supminn profile image

Decoding StyleX: Meta's Cutting-Edge Styling System

Supriya M -