2

I need to minify my code on server. It tells me that npm run build do all the minifying stuff npm run build but on my server (of course I access it not via localhost) it shows all the code. I am doing npm run build in pom.xml in maven. My package json contains actual ver of react-scripts. package.json

All code is served with nginx.

Ok, I've seen this When does create-react-app obfuscate or minify code? and this GENERATE_SOURCEMAP=false Issue and read this https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-howgenerate where it tells me that Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files. So it tells me that source maps is the reason I see my code as is.

And there is a Firefox Browser without devTools where I turned off source maps

here I turned off source maps

and... It shows me the code as is!

here I marked red the div in the FF browser with turned off Source maps

Why it still shows me the code despite "npm run build makes build as minified"? Please tell me where I'm bad and how could I fix it? And BTW, everywhere it is written that *.env should be in the root directory. Root directory of whole project or only frontend folder?

Stanislas
  • 1,893
  • 1
  • 11
  • 26
deathfry
  • 626
  • 1
  • 7
  • 28
  • It feels like if you're asking multiple questions at the same time. Could you explain what you want to achieve and why? Also, if this is about build output, I would add a screenshot of your build-output folder. – Stanislas Feb 12 '21 at 19:00
  • @Stanislas I am trying to minify my code and to figure out why it behave certain way. What screenshot exactly do you need? – deathfry Feb 13 '21 at 16:27
  • did you ever figured out how to obscure your code files in a hosted environment? I'm trying to do the same thing – Felipe Centeno Jul 04 '23 at 16:47

2 Answers2

4

I get the sense that most of your question is actually related to confusion over what minifying code actually means.

Definition

Minification, also known as minimization, is the process of removing all unnecessary characters from JavaScript source code without altering its functionality. This includes the removal of whitespace, comments, and semicolons, along with the use of shorter variable names and functions. Minification of JavaScript code results in compact file size.

Source: Why Minify JavaScript Code?

Applied to Create React App

In your case, the npm run build command will execute react-scripts build which is provided by Create React App. The documentation explains what this does:

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. If necessary, classnames and function names can be enabled for profiling purposes. See the production build section for more information.

Source: Create React App: npm run build

When npm run build is run, it will create a build folder. Inside ./build/static you'll typically find your minified code (javascript, css, media, ...).

In ./build/static/js you'll likely find the following files:

- [hash].chunk.js
- [hash].chunk.js.map
- main.[hash].chunk.js
- main.[hash].chunk.js.map
- runtime-main.[hash].chunk.js
- runtime-main.[hash].chunk.js.map

Note: the exact output will vary on your version of Create React App.

What are Source Maps?

As you'll have noticed above, the build folder contains a *.js.map file for each .js file, these are source maps.

The reason these are generated is for debugging purposes. If you were to try and debug your code using the developer tools of your browser, you'd have a hard time understanding your minified (and possibly uglified code). By adding these .map-files, your browser can load these (by using an HTTP header) and represent your code as if you were looking at the original code.

You can find more information here: MDN - Use a source map

Developer tools "Inspector"

Every major browser has a way of viewing or debugging your application using "developer tools". These developer tools usually show a version of your code that is modified to be easier to read as a developer.

If you wanted to verify if your HTML code is minified or not, there are 2 things you could check:

  • Check your ./build/index.html file and ensure that only the build folder is being hosted by your web server
  • Instead of using the "Inspector", view the page source instead (usually you can see this via right-click on the page and selecting "View Page Source")
Stanislas
  • 1,893
  • 1
  • 11
  • 26
  • thank you for brief answer. Maybe you're right and the main thing I wanted to is to remove "readability" of my frontend code. The check for minify failed: page source on my localhost shows plain manifest json and on server it tells me that there is no enough access rights. – deathfry Feb 14 '21 at 08:56
3

Well,

  1. How could we check if we see the code or not, is code minimized or not?

We should go on server and in sources type js like file extension. If they are plain to see - minimizing (obfuscating and uglifying) is not working (that was my case)

  1. We need to delete source maps to forbid user to see our code.

Another solution is to create a new file in your project's root directory named .env and include the following inside the file. This will remove any .map files from your build/static/js folder the next time you run build.

doesn't work for me. I've created permission.env and added

GENERATE_SOURCEMAP=false

into it and then run

npm run build

I've attached screenshot where I searched in generated build for *.map extension files. They are here even we created the *.env file.

here we see that maps files are generated

So I've added

  },
  "scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

in my package.json and run npm run build once again. We can see there are no map files - so that command helped us.

now there are no map files

deathfry
  • 626
  • 1
  • 7
  • 28