DEV Community

Cover image for Firebase Hosting Setup Complete Issue
Chayti
Chayti

Posted on • Updated on

Firebase Hosting Setup Complete Issue

A possible reason of issue:
When we give commands of hosting, by mistake we write y and press enter for the following question:
What do you want to use as your public directory? y

Solution:
Step-1: For this, the index.html file inside your root folder is being changed. So, replace the contents of index.html file with code below. I am providing the code for index.html file here.



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My-react-app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>



Enter fullscreen mode Exit fullscreen mode

Step-2: At first delete dist folder, .firebase , .firebaserc , firebase.json.

Image description

Image description

Step-3: Open powershell & give the commands. If any of the following commands give error in your powershell then, open your gitbash terminal.

command-1: npm install firebase
command-2: npm install -g firebase-tools (This is a one time process. If you have already done it for any of your previous project. Now skip it.)
command-3: firebase login
command-4: firebase init

Then follow the steps perfectly:

  • Are you ready to proceed? Yes
  • Now from the options of screen select (by pressing keyboard up , arrow buttons, spacebar and enter) Hosting: Configure files for Firebase Hosting and (optionally)
  • Now from the options of screen, select: use an existing project and enter
  • Now select the app which you have already made for this project.
  • What do you want to use as your public directory? dist
  • Configure as a single-page app (rewrite all urls to /index.html)? Yes
  • Set up automatic builds and deploys with GitHub? No
  • File dist/index.html already exists. Overwrite? Yes (This question may not be asked to you.)

command-5: npm run build
command-6: firebase deploy

Step-4: After 3 minutes, go to your chrome browser & check your live link is working or not. Open your browser console tab. Then right click of your mouse in the refresh button and do empy cache and hard reload for 3/4 times.

Image description

Now your live link is working perfectly. right?

===================================
If you are still having a lot of issues to deploy in firebase you can also deploy to netlify. Netlify deploy for a react project is far easy for you.** Right? **

Follow this link to deploy a react project in netlify

Bingo!! That's all!!!

Top comments (16)

Collapse
 
bhtanvin profile image
BH Tanvin

Very Helpful...

Collapse
 
mahian profile image
Mahian ahmad

thank you mam

Collapse
 
jarzdev profile image
Javier

works!

Collapse
 
muhammadasif_wd profile image
Muhammad Asif

Yes, This is working perfectly.
Thank you so much.

Collapse
 
devalienbrain profile image
HASSAN - Alien Brain

Thanks..Very Helpful

Collapse
 
piasahmed profile image
Pias Ahmed

thanks

Collapse
 
acm_anik profile image
Anik C Mojumder

Didi dhanyabad, ekhon thik hoyeche.

Collapse
 
ahmadshopnil profile image
ABU SHALEH AHAMAD SHOPNIL

Thank you

Collapse
 
amirhamza645028 profile image
Md Amirhamza

Thank you so much

Collapse
 
freelancernizamc profile image
Md Nizam Uddin

Thanks❤👍

Collapse
 
hectorfernandezdev profile image
Hector Fernandez CloudparaTodo

Welcome to the community, on the future post how this post help to you.