Hide the Source Code in React from Dev Tools [3 different ways]
Tags: javascript, react, devops
Published: 2022-10-02 18:24:24



On moving the code to production, it was identified that the whole source code of the React app, including the project structure is visible in the dev tools (inspect) source tab. _It may be an security issue of exposing your whole code in production or its not appreciated._
After exploring, I identified why this happens and a solution for it to hide them.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mcsl5ha1zv4n8zrf6w5.png)

## **Why is the source code visible?**
  Build files are created to deploy the app to production. While generating the build, by default React app will create the source “.map” files because react-script source map is enabled. These map files will have a reference to our source code. 

  That is the mapping between the generated JavaScript file and the original source file. In development time, it will be easy to identify the error in your original file. 

 Your browser will use the “.map” files to reconstruct the original source code visible in your browser. So to avoid this, the “.map” files should be removed. Removing those map files will also reduce the build size.

We can remove or avoid the creation of those map files either way.

- Through .env file
- Through package.json
- Using postbuild script

## 1. Through .env file

- Create a `.env` file in the project root folder.
- Add `GENERATE_SOURCEMAP=FALSE ` in the created env file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxc1n1phqxahfb2mokin.png)

After that, build your project through _`npm run build`_ and deploy your app. It will avoid creating the map files during your build. Now you will not find the whole source code in the browser.

## 2. Through package.json
Edit your _package.json_ build script like the below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxqntk6em6c2f6m0nufg.jpg)

You have to modify your build script in your package.json by adding generate source map to false.

```
#windows
build: set \"GENERATE_SOURCEMAP=false\" && react-scripts build
#linux
build: GENERATE_SOURCEMAP=false react-scripts build
```

It is also another way of mentioning the build to avoid creating the map files by setting the source map to false.

## 3. Using postbuild

In this approach, it will first create the build files and then post the build, the “.map” files inside the _build/static/js_ and _build/static/css_ will be removed.

_rimraf_ is used to remove the folders and files recursively. It’s like the rm -rf command in Linux.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2564go3d8lrhptwln8o8.jpg)

Add the postbuild script `"postbuild":"rimraf build/static/**/*.map"` to the script and run `npm build` . It will initially create the build “.map” files in the build folder and will remove those files post build. On deploying the app to production, you will not find the complete source code.

## Conclusion
So there are many ways to achieve the same. In the first two approaches, we avoid creating those map files initially, and in the last approach, we remove the “.map” files inside build/static/js and build/static/css after creation post the build.
It will hide the source code from _inspect> sources tab_ in browser and also this will make your build faster and also reduce a lot of space in the build folder.


**_Feel free to comment your opinion or provide your suggestions_**😊.**_Hope this post was helpful, thanks for reading._**

> This post was originally published [here](https://medium.com/dev-genius/how-to-hide-the-source-code-in-react-from-dev-tools-3-ways-60c8aea1d299)

> [Linked In] (https://www.linkedin.com/in/jeevaramanathan)