Firebase Hosting Setup Complete Issue

#firebase #netlify #deploy

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>

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

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.

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!!!