create-react-app is showing all my code in production, how to hide it?
JavascriptReactjsCreate React-AppJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
Make this change in package.json file and you are good to go.
scripts: {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}
Solution 3 - Javascript
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"
}
Solution 4 - Javascript
Or you can use GENERATE_SOURCEMAP=false react-scripts build on linux/mac
Solution 5 - Javascript
In in package.json (Windows)
"scripts": {
...
"cleanBuild": "rimraf ./build/*",
"build": "npm run cleanBuild && set \"GENERATE_SOURCEMAP=false\" && react-scripts build ",
...
}
Solution 6 - Javascript
Delete all the .map files (from js/ and css/ folder) before uploading to the production server
Solution 7 - Javascript
in package.json put the following code
scripts: {"build": "GENERATE_SOURCEMAP=false react-scripts build"}
Solution 8 - Javascript
I found a very simple solution that is:
npm run build nosources-source-map
For more information about differents ways: this is the link
Solution 9 - Javascript
you cant remove access to your code. You can use https://obfuscator.io to give headhash to hacker or code leecher.
Solution 10 - Javascript
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"
Solution 11 - Javascript
On Windows, using package.json:
scripts: { "build": "set 'GENERATE_SOURCEMAP=false' react-scripts build" }