71

I have kind of a basic question about webpack and react that I can use help with (around code obfuscation/uglification).

I am using create-react-app for my application and it appears to create a bundled build for production (after running yarn build).

And in that file it seems that everything is put into a main.JS file and main.CSS file Etc. I push this live using "firebase deploy" (in my case). I would like my code to be uglified and not be completely readable by any developer out there.

But when I go to look at my apps in Chrome it doesn't show main.JS or any other of the bundles files. It just shows every single individual file and exactly the code that I've written. Any idea why this is? Why doesn't it show the uglified combined main.js file under the 'sources' tab in chrome? Is this to do with the source map?

Kyle Pennell
  • 5,747
  • 4
  • 52
  • 75

6 Answers6

102

There is a better way to make sure source maps are not included. Create .env file in your project root folder and add GENERATE_SOURCEMAP=false. You will get you build without source maps.

Viacheslav Luschinskiy
  • 1,309
  • 1
  • 10
  • 8
  • 2
    If you are only concerned about production, create a `.env.production` file with `GENERATE_SOURCEMAP=false` – Ken Lin Aug 04 '23 at 01:56
83

React minifies the code during the build and generates source maps. JS ends up being sort of obfuscated as a byproduct of minification, not because of secrecy. That way, the end users are able to load scripts faster than if they were not minified, and you (and everybody else) get to navigate around original code when you (or they) open Developer Tools.

If you take a look in build/static/js directory after the build, there are pairs of .js and .map files. JS files are loaded with your website, and .map files are loaded on demand, when Developer Tools are opened.

To disable sourcemap generation, run your build with GENERATE_SOURCEMAP environment variable set to false.

GENERATE_SOURCEMAP=false npm run build

or

GENERATE_SOURCEMAP=false yarn build

or make it part of build script in package.json

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

If you omit the sourcemap generation, .map files will not end up in production, and your original source code will not be available for anyone (including you).

jokka
  • 1,832
  • 14
  • 12
  • It gives me 'GENERATE_SOURCEMAP' is not recognized as an internal or external command! when adding to `package.json`, but works fine from `.env` file – Roshdy Jan 29 '19 at 07:42
  • 7
    @Roshdy If you are using windows, the syntax is `set GENERATE_SOURCEMAP=false && react-scripts build` :D – alistair Oct 05 '19 at 11:13
  • @aabbccsmith actually i just added it to .env file and worked like a charm – Roshdy Oct 10 '19 at 06:07
16

Just build it with --nomaps parameter:

npm run build --nomaps
JemDzem
  • 161
  • 1
  • 3
  • aak this didnt work? I can still open individual pieces of code when I want to obfuscate. Apologies if you were solving a different problem than that. – R Claven Apr 30 '23 at 00:07
10

this helped me:

"scripts": {
    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",   
  },
zahra zamani
  • 1,323
  • 10
  • 27
7

Try this:

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

it worked for me and didn't show the .map file anymore in production, but it still shows every single individual file and exactly the code that we've written, plus the node_modules folder.

maybe it's a firebase thing, cause we are using the free version of firebase or other free deployment services like Now, surge, netlify, or whatever? I am not sure either.

Khairani F
  • 248
  • 2
  • 7
  • 1
    #solved I just manually deleted all `.map` files on my build folder and then deploy them to the server. Now, the code, that intentionally I wanna hide, dissapeared from the sources tab on devtools and my web still worked fine. Nice. – Khairani F May 28 '19 at 09:11
  • deleting the .map files were helpful for me too, guess adding to the build deployment will be the next step to ensure .map files are not built. – Janan Tan Aug 31 '21 at 13:12
1

Obfuscating React code...

Well... I've been trough a journey trying to obfuscate react code, and StackOverflow didn't get my search parms quite right :(

Therefore I ended up here instead of "Obscurify react code in production by automatically changing all the function and variable names".

So for you guys that are lost trying to obfuscate your code... Terser is the way.

As I pointed you here :)

Beserrovsky
  • 31
  • 1