How can I hide code from the Edge browser in React?

Question

I have developed a dummy React application using create-react-app.

Stackbliz Reference

I know that when we do npm run build a build is created and there are map files included in the build. The map file maps between the transpiled JavaScript file and the original source file.

So I tried deleting the map file and it didn't work. Also, I feel this is not the right way. So I wanted to know how to hide the code from the browser in Dev Server.

I tried using the package.json with GENERATE_SOURCEMAP=false, but it still didn't do the trick.

Answer 1

GENERATE_SOURCEMAP=false this will hide your code in browser

"build": "GENERATE_SOURCEMAP=false env-cmd -f .env.production react-scripts build",

for production use env name .env.production

for dev use env name .env.development and command to run build npm run build:dev

 "build:dev": "GENERATE_SOURCEMAP=false env-cmd -f .env.development react-scripts build",

• if you have same env for all environment or don't have env remove .env.production and .env.development from script

BEFORE -----

AFTER -----

Answer 2

For GENERATE_SOURCEMAP=false you can try creating a .env file and put it in that or you can try running GENERATE_SOURCEMAP=false npm start or GENERATE_SOURCEMAP=false npm run build

Answer 3

Create a file .env.production in your project directory (where package.json is located).

Then put in there:

GENERATE_SOURCEMAP=TRUE

Anorher way is package.json file:

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

And third is a command line use:

GENERATE_SOURCEMAP=false react-scripts build

I recommend using .env.production file.