38 - Custom 404 Pages and Rewrites in Firebase Hosting

Introduction

Firebase Hosting not only simplifies web app deployment but also offers features for customizing error pages and managing URL rewrites. In this guide, we will explore how to create custom 404 pages and use URL rewrites to provide a seamless user experience with Firebase Hosting.

Prerequisites

Before you begin creating custom 404 pages and working with rewrites, make sure you have the following prerequisites in place:

1. Firebase Project

You should have an existing Firebase project set up with your web app deployed on Firebase Hosting. If you haven’t created a Firebase project or deployed a web app, you can do so in the Firebase Console.

2. Web App Files

Ensure you have the necessary files and assets for your web app, including the custom 404 page you want to use. This page should be created and ready for deployment.

Creating a Custom 404 Page

Firebase Hosting allows you to create a custom 404 page that users will see when they encounter a “Page Not Found” error. Here’s how to set it up:

1. Create a Custom 404 Page

Design and create your custom 404 page, such as “404.html.” This page should inform users that the requested page does not exist and can include links to other parts of your site or helpful information.

2. Deploy the 404 Page

Deploy the custom 404 page along with your other web app files using the Firebase CLI. Use the following command to deploy your entire project, including the custom 404 page:

Example of Deploying the Custom 404 Page


firebase deploy

Once deployed, the custom 404 page will be accessible at your Firebase Hosting URL when users navigate to non-existent pages on your site.

Configuring Rewrites for Friendly URLs

URL rewrites in Firebase Hosting allow you to manage and customize URLs, creating a seamless user experience. You can rewrite URLs to serve specific content or redirect users to different parts of your web app. Here’s how to configure rewrites:

1. Create a “firebase.json” File

In your project directory, create or modify the “firebase.json” file to specify your rewrites configuration. You can use a text editor or code editor to create this file manually.

Example of a “firebase.json” File with Rewrites


{
  "hosting": {
    "rewrites": [
      {
        "source": "/about",
        "destination": "/about.html"
      },
      {
        "source": "/contact",
        "destination": "/contact.html"
      },
      {
        "source": "/blog",
        "function": "blogApp"
      }
    ]
  }
}

In the example above, we define three rewrites:

“/about” is rewritten to “/about.html.”
“/contact” is rewritten to “/contact.html.”
“/blog” is rewritten to a Cloud Function named “blogApp.”

2. Deploy the Rewrites Configuration

After configuring rewrites in your “firebase.json” file, deploy the configuration along with your web app files using the Firebase CLI. This ensures that the rewrites take effect on your hosting site.

Example of Deploying Rewrites Configuration


firebase deploy

Your rewrites will be applied to incoming URL requests as specified in the “firebase.json” file.

Managing Redirects

You can also use rewrites to manage redirects for specific URLs. For example, if you change the structure of your web app or move pages to different URLs, you can set up redirects to maintain SEO and user-friendliness.

1. Set Up Redirects

In your “firebase.json” file, define redirects by specifying the source and destination URLs for each redirect. When a user accesses the source URL, they will be automatically redirected to the destination URL.

Example of Redirects in “firebase.json”


{
  "hosting": {
    "rewrites": [
      {
        "source": "/old-url",
        "destination": "/new-url",
        "type": 301
      },
      {
        "source": "/moved-page",
        "destination": "/new-location",
        "type": 301
      }
    ]
  }
}

In the example above, we set up 301 redirects for two URLs. The “type” attribute indicates a permanent redirect.

2. Deploy Redirects Configuration

Deploy the redirects configuration by running the Firebase CLI command. This ensures that the redirects are active on your Firebase Hosting site.

Example of Deploying Redirects Configuration


firebase deploy

Conclusion

Firebase Hosting allows you to create custom 404 pages, configure rewrites for friendly URLs, and manage redirects to enhance the user experience on your web app. With the provided examples and instructions, you can easily implement these features and create a seamless browsing experience for your users.

38 – Custom 404 Pages and Rewrites in Firebase Hosting