How to redirect URLs in Firebase hosting?

 

Step 1: Set Up Firebase Hosting

 

To redirect URLs using Firebase Hosting, you first need to have a Firebase project set up with hosting enabled.

1. Create a Firebase Project:

• Go to the Firebase Console.
• Click on "Add project" and follow the prompts to create a new project.

1. Enable Hosting:

• After creating the project, navigate to the Hosting section.
• Click on "Get Started" to enable Firebase Hosting.

 

Step 2: Install Firebase CLI

 

The Firebase CLI (Command Line Interface) allows you to interact with Firebase Hosting from your local machine.

• Install Node.js:
  Make sure you have Node.js installed on your machine. You can download it from nodejs.org.

• Install Firebase CLI:
  Open your terminal or command prompt and run the following command:

  npm install -g firebase-tools

 

Step 3: Initialize Firebase in Your Project

 

You need to initialize Firebase in your project directory.

• Open your terminal in your project directory and run:

  firebase init

• Select Hosting:
  Move with the arrow keys to select "Hosting" and then press the space bar to choose it. Press Enter to confirm your selection.

• Associate it with your Firebase project:
  Firebase CLI will ask you to select an existing project or create a new one. Select the one you created in Step 1.

• Set up a public directory:
  You'll be asked to define a public directory. This is where your static files will live. Common choices include public or dist. You can type the name and press Enter.

• Configure as a single-page app (if applicable):
  If you are using a Single Page Application like React, Angular, or Vue, type Y when asked "Configure as a single-page app (rewrite all urls to /index.html)?", otherwise type N.

 

Step 4: Configure URL Redirects

 

To define URL redirects, you need to add them to the firebase.json configuration file in your project root.

• Open the firebase.json file:
  You should find the firebase.json file in your project root directory.

• Add redirect rules under the "hosting" key:
  Here’s an example of how to set up a redirect:

  
  {
    "hosting": {
      // Other configurations...
      "redirects": [
        {
          "source": "/old-url",
          "destination": "/new-url",
          "type": 301
        }
      ]
    }
  }
  

• Explanation:

  • source: The URL path you want to redirect from. It can include wildcards or regex patterns.
  • destination: The target URL path you want to redirect to.
  • type: The HTTP status code to use for the redirect. Use 301 for permanent redirects and 302 for temporary.

 

Step 5: Deploy Your Changes

 

To apply your changes, you need to deploy them to Firebase Hosting.

• Run the deploy command:

  firebase deploy

• Verify Deployment:
  Once completed, the terminal will output a hosting URL where you can verify your redirects.

 

Step 6: Test Your Redirects

 

To ensure your redirects are working correctly, visit the source URLs in your browser and verify that they redirect to the designated destination URLs.

• Check HTTP status codes using browser developer tools or online tools to confirm that the correct HTTP status codes (e.g., 301, 302) are being used for redirects as specified.