CODEWITHSUNDEEP
javascriptreactjscreate-react-app
Sabbiu Shah
Sabbiu Shah

Reputation: 1709

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

showing_all_files

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.

Upvotes: 97

Views: 73900

Answers (15)

M. Hamza Rajput
M. Hamza Rajput

Reputation: 10246

Here are three ways to hide code.

1. Using .env File.

GENERATE_SOURCEMAP=false

enter image description here

2. Using command line.

GENERATE_SOURCEMAP=false react-scripts build

3. Using package.json

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

Upvotes: 30

João
João

Reputation: 1

If the problem you are facing is happening when deploying a CRA - Create React App application on Vercel, try configuring your package.json with the following property:

"postbuild":"rimraf build/static/**/*.map"

After searching a lot this was the only way that actually worked for me. The options suggested here were not sufficient for my case.

Upvotes: 0

SaimumIslam27
SaimumIslam27

Reputation: 1188

Just update your .env file with GENERATE_SOURCEMAP=false

Upvotes: 0

Sanka Sanjeeva
Sanka Sanjeeva

Reputation: 3520

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

Upvotes: 4

lingar
lingar

Reputation: 603

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

Upvotes: 0

Jeffrey Storer
Jeffrey Storer

Reputation: 11

On Windows, using package.json:

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

Upvotes: 0

jon
jon

Reputation: 1808

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

Upvotes: 1

Danielprz21
Danielprz21

Reputation: 13

I found a very simple solution that is:

npm run build nosources-source-map

For more information about differents ways: this is the link

Upvotes: 1

KIRAN
KIRAN

Reputation: 39

in package.json put the following code

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

More information follow this blog

Upvotes: 1

Rahul Gul
Rahul Gul

Reputation: 582

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"

Upvotes: 1

Xarvalus
Xarvalus

Reputation: 3021

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

Gaeron:

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.

Upvotes: 106

Enspire Technologies
Enspire Technologies

Reputation: 41

In in package.json (Windows)

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

Upvotes: 4

Uddesh Jain
Uddesh Jain

Reputation: 1104

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

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

Upvotes: 38

Dash
Dash

Reputation: 812

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

Upvotes: 7

Ravin Gupta
Ravin Gupta

Reputation: 853

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

Upvotes: 1

Related Questions