firebase deploy of create react app exposes all js code in the source tab?

Question

I have compiled my app via create react app: yarn build //code is minified and obfuscated as expected

I have then deployed the app via both firebase serve and firebase deploy.

my firebase.json:

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "build",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

All is deployed "almost as expected", with 2 caveats:

1. inside Chrome developer tools/ Sources tab, my entire js codebase is listed with no minification and or obfuscation!
2. my fonts are not being deployed as the media folder doesnt seem to transfer

The structure looks nothing like the build folder which contains the media... (necessary for fonts):

Am I setting something up incorrectly, deploying the wrong folder or possibly not ignoring something I should be? Exposing the entire js stack unminified and or without any obfuscation seems very "un-secure"...

Again, and as always any and all direction is greatly appreciated!

Answer 1

Strongly advise to refer to the create-react-app github discussion here about this matter but as a quick workaround you can add the following to your package.json scripts:

"scripts": {
    ...
    "build": "npm run build-css && react-scripts build && yarn run delete-maps",
    "delete-maps": "rm ./build/static/js/*.map && rm ./build/static/css/*.map",
    ...
}

This will however in the short run remove all of your source code from the Source tab in developer tools...

Answer 2

Prefixing GENERATE_SOURCEMAP=false to your build target works too (which obviously doesn't generate sourcemap). In package.json file.

GENERATE_SOURCEMAP=false react-scripts build