create-react-app is showing all my code in production, how to hide it?

Question

In my chrome sources tab, I am able to view all my files by exact folder location. How can I hide them?

These weren't the problem in my previous project, which were made without using create-react-app.

you can't do anything. it's a feature – Aseem Upadhyay Jul 19 '18 at 06:37 — Aseem Upadhyay, Jul 19 '18 at 06:37

Xarvalus · Accepted Answer · 2020-07-16T09:51:29.447

98

It seems to be correct behaviour in create-react-app according to Issue #1632.

This is expected. You can delete .map files from the build output if you want to disable it, although you'll get console warnings about them missing.

There is no harm in leaving them in though in my opinion. Client code is already available to the user’s machine so there’s no secrets in it.

Also ensure you have proper production build, the output of npm run build/yarn build is the one which should be deployed to your server.

If you want to completely disable generation of source maps use:

scripts: {
  "build": "GENERATE_SOURCEMAP=false react-scripts build"
}

You can also specify GENERATE_SOURCEMAP=false parameter via .env configuration files or use in plain console command GENERATE_SOURCEMAP=false react-scripts build.

edited Jul 16 '20 at 09:51

answered Jul 19 '18 at 06:35

Xarvalus

2,873
1
19
29

1

only removing *.map files didn't do it. But, commenting out the service worker too did the trick. – Sabbiu Shah Jul 19 '18 at 07:00
2

@SabbiuShah Service Workers are vital part of React app as they stand for caching, optimising, fast-loading and offline working. Please keep in mind that not using them is a huge drawback. – Xarvalus Jul 19 '18 at 07:04
But, I don't want to show exact code. In your suggestion, what can be done? – Sabbiu Shah Jul 19 '18 at 07:09
1

@SabbiuShah JS code is always available, generally on production build should be available only minified one. Still though, there is no guarantee someone would not steal your code (as this is specific case for client-side). If you feel that you need additional protection you might consider using code obfuscation, eg with [webpack-obfuscator](https://github.com/javascript-obfuscator/webpack-obfuscator). – Xarvalus Jul 19 '18 at 07:14
Yeah, I know that. I just want the code to be minified in client side, so that it gives hard time for anyone trying to steal the code. But, in this case, exact folders with file structure, everything are shown. javascript is accessed from bundle####.js, which is minified (by default by create-react-app), then, why and how is it showing all the exact files and folder – Sabbiu Shah Jul 19 '18 at 07:21
3

@SabbiuShah I could only guess as I cannot see your server, but it is possible the *.map's get somehow cached and that's why after deleting them you still see the code on production, but it's nothing certain. – Xarvalus Jul 19 '18 at 07:25
1

Yeah! you're right. While accessing site in private mode, the content weren't showing now... Thanks :) – Sabbiu Shah Jul 19 '18 at 07:34
What is the point of `GENERATE_SOURCEMAP`? Why is it default to True? – Dec 23 '20 at 07:53
2

the [build command for windows users](https://stackoverflow.com/a/61967190/6908282) should be this: `"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build"` – Gangula Feb 07 '22 at 16:02
I have added it to the build command, but it still shows the code. Do you have a clue? – lingar Sep 21 '22 at 14:16

score 36 · Answer 2 · answered Feb 18 '20 at 18:43

36

Make this change in package.json file and you are good to go.

scripts: {
  "build": "GENERATE_SOURCEMAP=false react-scripts build"
}

answered Feb 18 '20 at 18:43

Uddesh Jain

1,064
2
15
16

Thanks a lot! I can say that this works on my MacOS. – Sheikh Wahab Mahmood Apr 11 '23 at 12:06

score 28 · Answer 3 · answered Jul 15 '20 at 17:34

28

Here are three ways to hide code.

1. Using .env File.

GENERATE_SOURCEMAP=false

2. Using command line.

GENERATE_SOURCEMAP=false react-scripts build

3. Using package.json

scripts: {
  "build": "GENERATE_SOURCEMAP=false react-scripts build"
}

answered Jul 15 '20 at 17:34

M. Hamza Rajput

7,810
2
41
36

4

What is the point of `GENERATE_SOURCEMAP`? Why is it default to True? – Dec 23 '20 at 07:54

score 7 · Answer 4 · answered Sep 16 '19 at 17:39

7

Or you can use GENERATE_SOURCEMAP=false react-scripts build on linux/mac

answered Sep 16 '19 at 17:39

Dash

742
7
19

This was pretty helpful! – thiloilg Jan 29 '20 at 18:22
What is the point of `GENERATE_SOURCEMAP`? Why is it default to True? – Dec 23 '20 at 07:53
I asked this to @dan_abramov a while ago but couldn't get an answer. – Dash Dec 24 '20 at 13:01
@user14358266 As I know, source map is the one which is in the attached screenshot in the question. Sourcemap will automatically gets generated to when you build the project. Source map could be useful to debug your code after the project gets deployed. If you don't want it to get generated you should do what's in the accepted answer. Refer this article to get a better understanding -> https://dev.to/myogeshchavan97/how-to-hide-your-react-source-code-from-getting-displayed-in-chrome-dev-tools-when-deployed-to-production-41j7 – Sankha Rathnayake Jul 22 '22 at 16:22

Enspire Technologies · Answer 5 · 2020-06-05T18:47:15.213

3

In in package.json (Windows)

"scripts": {
...
    "cleanBuild": "rimraf ./build/*",
    "build": "npm run cleanBuild && set \"GENERATE_SOURCEMAP=false\" && react-scripts build ",
...
}

edited Jun 05 '20 at 18:47

answered Jun 05 '20 at 16:13

Enspire Technologies

31
4

What does the build: do can you please provide an explanation – mohammed nathar Dec 24 '20 at 11:07

score 2 · Answer 6 · answered Feb 02 '23 at 06:14

Among below three methods, I prefer the last one because I don't want to worry about OS.

1 - Delete the map files and then deploy the build folder(not a professional way).

2 - Change the build command in the package.json as:

// For the Windows OS
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build"

// For Linux OS
"build": "GENERATE_SOURCEMAP=false react-scripts build"

3 - Create or update .env file by adding

GENERATE_SOURCEMAP=false

score 1 · Answer 7 · answered Aug 06 '18 at 09:30

1

Delete all the .map files (from js/ and css/ folder) before uploading to the production server

answered Aug 06 '18 at 09:30

Ravin Gupta

783
7
13

Rahul kalivaradarajalu · Answer 8 · 2020-10-12T06:52:41.047

1

On a windows machine, this helped me

"build": "set 'GENERATE_SOURCEMAP=false' && react-scripts build",

Incase you are using react-app-rewired you can try the below.

I have used a package called as cross-env. It can inject your environment variables.

"build": "cross-env GENERATE_SOURCEMAP=false react-app-rewired build"

edited Oct 12 '20 at 06:52

answered Oct 12 '20 at 06:17

Rahul kalivaradarajalu

552
6
16

score 1 · Answer 9 · answered Mar 22 '21 at 04:53

1

in package.json put the following code

scripts: {"build": "GENERATE_SOURCEMAP=false react-scripts build"}

More information follow this blog

answered Mar 22 '21 at 04:53

KIRAN

39
1

score 1 · Answer 10 · answered Mar 29 '21 at 15:09

1

I found a very simple solution that is:

npm run build nosources-source-map

For more information about differents ways: this is the link

answered Mar 29 '21 at 15:09

Danielprz21

13
4

score 1 · Answer 11 · answered Apr 11 '21 at 16:44

1

you cant remove access to your code. You can use https://obfuscator.io to give headhash to hacker or code leecher.

answered Apr 11 '21 at 16:44

jon

1,494
3
16
29

score 0 · Answer 12 · answered Mar 18 '22 at 15:39

0

On Windows, using package.json:

scripts: { "build": "set 'GENERATE_SOURCEMAP=false' react-scripts build" }

answered Mar 18 '22 at 15:39

Jeffrey Storer

11
3

score 0 · Answer 13 · answered Sep 21 '22 at 15:10

For those who tried to add the variable and it still generates the map files:

It's important to be aware that

the build command for windows users should be this:

 "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build"

As said @Gangula at the comments.

If not - it can cause the the map files will be generated.

See here

score 0 · Answer 14 · answered Aug 13 '23 at 15:20

0

Just update your .env file with GENERATE_SOURCEMAP=false

answered Aug 13 '23 at 15:20

SaimumIslam27

971
1
8
14

create-react-app is showing all my code in production, how to hide it?

14 Answers14

Here are three ways to hide code.

Linked

Related