How to Generate firebase.json file for Firebase Redirects

by

Hello, Guys welcome back to learn How to Generate firebase.json file for Firebase Redirects. We recently relocated the Mail Merge and Form Notifications user guides from labnol.org to digitalinspiration.com. We had to manually set up 301 redirects, as with any domain migration, so that the audience is automatically moved to the new website if they click any of the links that still lead to the old domain.

Because the webpages are hosted on Firebase, 301 redirects may be easily configured via the firebase.json file. All we need are entries in the redirects array, one for each redirect, providing the source and destination URLs, as well as whether the redirect is 301 (permanent) or 302 (temporary).

{
  "redirects": [
    {
      "source": "/page1",
      "destination": "https://digitalinspiration.com/page1",
      "type": 301
    },
    {
      "source": "/page2{,/**}", // also redirect pages ending with slash
      "destination": "https://digitalinspiration.com/page2",
      "type": 302
    }
  ]
}

Maintaining the firebase can be difficult when migrating large sites. 100s of URLs may need to be added to the redirects array in the json file. As a solution, you can build a separate JSON file containing all of the redirects and then dynamically produce the firebase.json file.

Before the assets are transferred to Firebase hosting, the firebase file is built automatically from the redirects file.

Step 1: Make a base file called firebase.base.json. As you can see, we already have some redirects in place, and any additional redirect entries will be integrated into this array.

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "redirects": [
      {
        "source": "/foo{,/**}",
        "destination": "/bar",
        "type": 301
      },
      {
        "source": "/firebase/**",
        "destination": "https://firebase.google.com/",
        "type": 302
      }
    ]
  }
}

Step 2: Create a firebase.redirects.json file containing an array of links in the links field. Each link entry will provide the source regex pattern or glob, the URL description, and the type of redirection (optional).

Create JSON Web Token (JWT) with Google Apps Script

{
  "links": [
    [
      "/email-google-form-responses-7263",
      "https://digitalinspiration.com/docs/form-notifications/email-multiple-people"
    ],
    [
      "/embed-qrcode-barcode-google-forms-021020",
      "https://digitalinspiration.com/docs/form-notifications/barcode-qrcode"
    ],
    [
      "/internet/google-forms-mobile-notifications/29203",
      "https://digitalinspiration.com/docs/form-notifications/phone-push-notifications",
      false
    ]
  ]
}

Step 3: Create a generate.js file that reads the base file and generates a new firebase.json file using the redirects.json file. All

const fs = require('fs');

const redirects = fs.readFileSync('firebase.redirects.json');
const { links = [] } = JSON.parse(redirects);

const linkMap = links.map((link) => {
  const [source, destination, permanent = true] = link;
  return {
    source: `${source}{,/**}`,
    destination,
    type: permanent ? 301 : 302,
  };
});

const firebase = fs.readFileSync('firebase.base.json');

const file = JSON.parse(firebase);

file.hosting.redirects = [...file.hosting.redirects, ...linkMap];

fs.writeFileSync('firebase.json', JSON.stringify(file, null, 2));

Step 4: Add a new entry in the script section of the package.json file to generate the file before the upload step.

{
  "scripts": {
    "generator": "node generate.js",
    "upload": "npm run generator && firebase deploy --only hosting"
  }
}

This will ensure that a new firebase.json file is regenerated before deployment.

JavaScript Objects Quick Reference

Leave a Comment