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!!!
Top comments (16)
Very Helpful...
thank you mam
works!
Yes, This is working perfectly.
Thank you so much.
Thanks..Very Helpful
thanks
Didi dhanyabad, ekhon thik hoyeche.
Thank you
Thank you so much
Thanks❤👍
Welcome to the community, on the future post how this post help to you.