I'm kinda new to Javascript development myself. Lately, I've been working on a web app using React and ExpressJS. Express will deliver the static bundled(using Parcel) files of front-end React page. The code organisation is something like this:

> dist\    
>     [static files here] 
> node_modules \ 
> src \
>     client\
>        pontents\       
>        index.html
>        index.js
>     server\
>       models\
>       routes\
>       index.js

The build process works fine and I get a perfectly working web app. The problem is that Google Chrome's Source developer tool exposes all of my source code for the client. Exposed source code files

Some googling led me to terms such as blackboxing and obfuscation. But I have a hard time understanding them. Some explanation of them and advice on hiding source files will be helpful. Thanks!

I'm kinda new to Javascript development myself. Lately, I've been working on a web app using React and ExpressJS. Express will deliver the static bundled(using Parcel) files of front-end React page. The code organisation is something like this:

> dist\    
>     [static files here] 
> node_modules \ 
> src \
>     client\
>        pontents\       
>        index.html
>        index.js
>     server\
>       models\
>       routes\
>       index.js

The build process works fine and I get a perfectly working web app. The problem is that Google Chrome's Source developer tool exposes all of my source code for the client. Exposed source code files

Some googling led me to terms such as blackboxing and obfuscation. But I have a hard time understanding them. Some explanation of them and advice on hiding source files will be helpful. Thanks!

• javascript
• reactjs
• npm
• parceljs

• You cannot hide any file that's getting loaded on any page. Browser need it to run your website. Obfuscation is making your code harder to read essentially modifying your meaningful variable name like username to a. – josephting Commented Mar 20, 2019 at 6:13
• But this seems to expose all of node_modules! Including the packages' source code! – Nandhakishore Commented Mar 20, 2019 at 6:16
• Your browser needs the source code of each library in order to run them. If there are third-party libraries that you don't need at runtime, consider putting them under devDependencies in your package.json – Arnaud Christ Commented Mar 20, 2019 at 6:58

6 Answers 6

Finally got it. I had to include --no-source-maps in parcel build mand

parcel build ./src/client/index.html --no-source-maps

If you don't set the following option, your react source code (not minimized) will be visible. You need to turn off the GENERATE_SOURCEMAP flag.

in package.json

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

Basically a web browser need to download your .js files in order to work. You cannot prevent this. However, in the published react project, the js files are minified so you dont need to worry about exposing your source code.

You can blackbox your web app by using a service like HideJS to create an interactive stream of your site, instead of actually piling the code on their end.

The code never reaches their puter, so it's not possible to see it.

Set the below property in .env

GENERATE_SOURCEMAP=false

Rebuild