CODEWITHSUNDEEP
reactjsfirebasedeploymentgoogle-chrome-devtoolshosting
Mr.Joony
Mr.Joony

Reputation: 713

How do I hide the source code when deploying react app with firebase?

this is my first post on stackoverflow. I'm writing because I couldn't find a clear answer to my question. I don't know if the title is the right way to put it but it's what I went with.

The Situation: I'm creacting a single-page-application with react and intend to build the back-end with node.js and express.js, but for now it's just react. I used create-react-app to create the project and I'm using Firebase for hosting.
The folder to deploy in the firebase.json file is set to build. So when I want to deploy my web app to firebase, I use the npm run build command first to create the build folder which will be deployed.

When I then go to my website, open the chrome developer tools and click on source I can see all my files inside a static folder. I see it just the way I formated it, as if I was inside my code editor. All the components. My entire folder structure. Basically the whole code of my app is viewable in it's entirety.
I was a bit shocked and confused so I checkt if this is normal. I went on big websites like youtube or twitter but I could find hardly anything in their source folder. When I view the source of twitter it does have some files which is just plain and open javascript but not alot. And also the folder structure is not visible. I need to view files using Ctrg + P. Most files look different too etc.
It's best if you just have a look at the source section for twitter in the dev tools. I don't really understand what I'am seeing but I notice it is diffrent when compared to my website's source.
Their webpack somehow doesn't map the bundle out into plain readable code. My bundles in the build folder are mapped into exactly what they were before being bundled. At least that is how it seems to me.

Simple and short: Source of my website shows everthing (all the files) just as it is and for everyone to see. Source of big websites it doesn't do that. Their's is somehow concealed. And I want to know what they did, how they did it and how I can do the same.

I have seen many people say that it isn't important if it is no security risk and I know a bit about obsfuscation, but I believe they do something else too.
I also want to emphesize that this isn't about if I need to do it or not. I want to do it but I dont now how or what. I haven't found any place were this was adressed completely so I really don't understand how it's done.

I am thankful for any help I can get.

Upvotes: 3

Views: 4904

Answers (2)

waghydjemy
waghydjemy

Reputation: 188

You are basically looking for a module bundler and there are a lot out there, the most used is https://webpack.js.org

It is very simple to use and there is an online tool to help generate the config file for different use cases https://createapp.dev/webpack/no-library

What webpack does, it will create a bundle.js for you so at the end your project will be just two files index.html and bundle.js

Upvotes: 0

Zahid Hasan
Zahid Hasan

Reputation: 622

put GENERATE_SOURCEMAP=false in the package.json scripts -> builds and then run npm run build. Hope it will work.

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

check this reference How to disable source maps for React JS Application

Upvotes: 3

Related Questions