3

I'm using create react-app and noticed that with my builds the client can see my exact code as I see it when I'm editing. I would like to prevent this to (at least a little bit) deter clients from easily cheating in my game. If they can see how everything works that easily, they will be more likely to alter the client code. When I go to Facebook.com which uses React, I see that in Chrome source inspector I can't access the clean neat files, just a bunch of code jammed together. How can I achieve this with create-react-app? Also, how can I remove the comments before I build? I assumed, when I built this would happen, because why would the client need to see your comments, but it does not.

PurplePanda
  • 629
  • 9
  • 29
  • 1
    I think *[that question](https://stackoverflow.com/questions/49123885/when-does-create-react-app-obfuscate-or-minify-code)* might be related. Check the `GENERATE_SOURCEMAP` env – Ramiz Wachtler Jul 18 '18 at 04:47
  • use the production build. `create-react-app` has a `build` command that kicks off the prod build (aka `yarn build` or `npm run build`). That minifies the code so you have small bundle files to download on production websites. Code minifying gives you the effect of "*a bunch of code jammed together*" – John Ruddell Jul 18 '18 at 05:02
  • Ramiz, that seems like it did the trick. If I remove the .map will that also get rid of all comments? There will be no possible way for the client to decipher my comments? Or do I need to use some third-party module to remove them before the build? – PurplePanda Jul 19 '18 at 03:26

1 Answers1

2

When you run react in the development mode using the create-react-app, the source code is not optimized for production. It offers more development purposes. You need to run yarn build to get the optimized version which will be minified and uglified as you like which will give you some amount of code hiding ability.

Gigarthan
  • 247
  • 1
  • 11