1

Correction made to my previous Question (Instead ofObfuscate, I'm actually trying to find out Uglify)

I've recently began to work on ReactJS, while I try to bundle to code in production.. I realized all the codes are in readable format. I'm aware of the approach below: Set false to generate sourcemap.

However, this way my code is still kind of readable in terms of my

  1. API Endpoint
  2. API keys

I'm trying to understand what is the proper way to fully uglify my code in production?

Tommy Leong
  • 2,509
  • 6
  • 30
  • 54
  • You can't obfuscate API endpoint and keys. They're designed to be public. – Guy Incognito May 23 '20 at 17:21
  • Even if code was completely hidden (which is impossible because it needs to run on the client), you could still open network tab and see all the information there. – HMR May 23 '20 at 17:21
  • You can't. Anything you send to the client will be visible. – Phix May 23 '20 at 17:22
  • adding to the chorus, things on your client have to be safely public. – bryan60 May 23 '20 at 17:26
  • 2
    My guess is that you are getting downvotes because people here don't like obfuscated code. It is still a valid question, however. – Jaap Joris Vens May 23 '20 at 17:30
  • Thanks for the responses. Well, understand the endpoints will still be revealed via network tab, that was just an example. I do see some react website has their code fully convert to unreadable format. Im curious to find out how that works. I don't find this an invalid question, please don't vote down / close? Help to explain and leave an answer to the rest will be helpful. (: – Tommy Leong May 24 '20 at 12:36
  • You can actually do so manually. Just use constants and put jibberish in there. Then, when you're accessing the endpoint you can just use the constant instead of a string. That way you keep the endpoints consistent without exposing the human-understandable strings in the API. – Antoni Silvestrovič Jun 05 '20 at 10:55
  • Correction made to my question. – Tommy Leong Jun 05 '20 at 10:55

1 Answers1

4

Here's how we can UGLIFY our code in ReactJS.

  1. Run npm run eject
  2. Run npm install uglifyjs-webpack-plugin --save-dev
  3. Go to webpack.config.js at your config folder (you should get this folder after eject)
  4. Search for keyword minimize: isEnvProduction then append the following at bottom
minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            parse: {},
            compress: {},
            mangle: true, // Note `mangle.properties` is `false` by default.
            output: null,
            toplevel: false,
            nameCache: null,
            ie8: false,
            keep_fnames: false,
          },
        }),
      ],

If you now build your app npm run build for production environment, and you shall not see your code via Inspect Element.

Tommy Leong
  • 2,509
  • 6
  • 30
  • 54