How to hide HTML/CSS and most importantly, app.js (Firebase code) from public?

Question

I am new to web development and by inspecting my website's source code through Chrome, for instance, I am able to see all the files, from HTML to js files that have API keys used to communicate with Firebase. Of course, this information shouldn't be public, so how do I hide it??

I am using Firebase Firestore for the database and Firebase Hosting to host the website.

Answer 1

Client-side code is called "client-side" for a reason. You make a request from the client and the server responds. That response is delivered to the client and the client then parses the results. There is nothing you can do to hide or encrypt the response because, if you did, the client couldn't parse it.

Any/all proprietary code should be stored and executed on the server using one of the many server-side architectures (.php, ASP.NET, Java, etc.).

Answer 2

You could minify/uglify/obfuscate your files.

http://javascript2img.com/

http://www.differencebetween.info/difference-between-minification-and-obfuscation