Welcome Firebase Hosting Setup Complete

Firebase Deploy complete but website not displaying in ReactJS

How to solve: Welcome Firebase Hosting Setup Complete

If you’ve deployed your ReactJS app to Firebase Hosting but are only seeing the default message:

“Welcome Firebase Hosting Setup Complete. Now it's time to go build something extraordinary!”

Don’t worry—your deployment is likely misconfigured. Here’s how to fix it.

---

Step 1: Check Your firebase.json

Your firebase.json file tells Firebase where to find your built project files. If it’s pointing to the wrong directory, Firebase won’t serve your React app.

Solution

1. Open your firebase.json file.

2. Find the "public" property inside the "hosting" section.

3. Change it to:

   "public": "dist"
   

   If you are using Vite, the default build output is "dist". If you're using Create React App, use "build" instead.

---

Step 2: Build Your React App

Before deploying, ensure your project is built properly. Run:

npm run build

For Vite projects, use:

npm run build && cd dist

---

Step 3: Deploy Again

Once the correct folder is set and your project is built, deploy again:

firebase deploy

Now, your ReactJS website should display correctly! 🚀

If issues persist, check:
✅ Console errors in the browser
✅ Firebase Hosting logs using firebase hosting:channel:logs
✅ That your React app correctly references assets using relative paths

Hope this helps! 🎉