React project firebase deploy showing welcome screen

Question

Deployed my react app on firebase through my VS code terminal, on clicking the url generated, it's showing me the attached firebase welcome screen. Please who knows how I can fix this the screen I'm getting after deploy

Answer 1

You've probably overwrote your index.html file in public folder.

If you use git just pull the older version of index.html if not just create a new react app and copy the code over. Now comes the deployment:

Delete these files/folders:

• .firebase folder
• .firebaserc
• firebase.json

Now initialize hosting

firebase init hosting

When you're prompted to to provide a public directory choose build When it say file build/index.html already exists. Overwrite? enter a big no

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: portfolio-a8639 (portfolio)
i  Using project portfolio-a8639 (portfolio)

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? Yes
? File build/index.html already exists. Overwrite? No
i  Skipping write of build/index.html

Now you're ready to deploy:

firebase deploy --only hosting

If you don't have a build folder just build the project:

$ npm run build

Answer 2

first of all delete your build folder .firebase, .firebaserc, firebase.json, package-lock.json .

Now write the command firebase init then follow the steps below -

• What do you want to use as your public directory? build ?
• Configure as a single-page app (rewrite all urls to /index.html)? Yes
• Set up automatic builds and deploys with GitHub? No
• File build/index.html already exists. Overwrite? Yes