Firebase Deployment: My web appear in "project.firebaseapp.com" but not "project.web.app"

ONLINECAST

2 min read

·

05-10-2024

9

0

Share

Why My Website Is Showing on project.firebaseapp.com But Not project.web.app?

You've built a fantastic website, deployed it to Firebase, and are excited to share it with the world. But instead of seeing it at your custom domain project.web.app, you're stuck with project.firebaseapp.com. This can be frustrating, especially if you've already configured your project to use the .web.app domain. So, what's going on, and how can you fix it?

The Problem:

Firebase Hosting offers two primary domain options for your projects: .firebaseapp.com (the default) and .web.app. While .firebaseapp.com is reliable and always works, .web.app offers a more professional and memorable URL. The issue arises when your site is correctly deployed on Firebase but doesn't display on the .web.app domain.

Scenario and Code:

Let's imagine you're building a simple website using HTML, CSS, and JavaScript. You've created a public folder containing your files and successfully deployed them to Firebase using the Firebase CLI.

firebase deploy 

After deployment, you visit project.firebaseapp.com and see your website working perfectly. However, navigating to project.web.app leads to a "Page Not Found" error.

Analyzing the Issue:

The most likely reasons for this problem are:

1. Incorrect Project Configuration:

   • Missing firebase.json configuration: Make sure your firebase.json file includes the correct hosting section. This section tells Firebase where to find your website files and how to configure your hosting:

   {
     "hosting": {
       "public": "public",
       "ignore": [
         "firebase.json",
         "**/.*",
         "**/node_modules/**"
       ],
       "rewrites": [
         {
           "source": "**",
           "destination": "/index.html"
         }
       ]
     }
   }
   

   • Incorrect hosting settings: Double-check the public and ignore values in your hosting configuration. They should accurately reflect your project's file structure and exclude unnecessary files.

2. Missing Firebase Project: If you're deploying a new project, ensure it's correctly linked to Firebase and has a dedicated Firebase Hosting plan.

3. Domain Issues:

   • Unverified domain: If you've already registered a custom domain and intend to use it, make sure you've verified it with Firebase.
   • Incorrect DNS settings: Verify your DNS records are correctly pointing to Firebase.

Troubleshooting and Solutions:

1. Verify Project Configuration: Thoroughly review your firebase.json file, ensuring it accurately reflects your project's structure and includes the necessary hosting configuration. If you're unsure, you can consult the Firebase documentation on hosting configuration.
2. Redeploy Your Project: After ensuring your firebase.json is correct, redeploy your project using the firebase deploy command.
3. Check Firebase Project Settings: Access your Firebase project settings and confirm the existence of a dedicated hosting plan. If you're unsure, consult the Firebase documentation on setting up hosting.
4. Manage Domains:
   • Verify Custom Domain: If using a custom domain, ensure it's correctly registered and verified with Firebase.
   • Update DNS Records: Verify your DNS records are accurately pointing to Firebase. You can use the Firebase documentation or consult your domain registrar for specific instructions.

Additional Tips:

• Use the Firebase CLI: The Firebase CLI is a powerful tool for managing Firebase projects and includes helpful commands like firebase init for setting up a project and firebase deploy for deploying your website.
• Consult Firebase Documentation: The Firebase documentation is your best friend. Use it to find detailed information about setting up hosting, managing domains, and troubleshooting common issues.

Remember: If you're still struggling, the Firebase community forums are a great resource for getting help from fellow developers and Firebase experts.

By following these steps and referencing the resources provided, you should be able to identify and resolve the issue preventing your website from appearing on your desired project.web.app domain.