Generate firebase.json file for Firebase Redirects
We recently moved the user guide for Mail Merge and Form Notifications from the website labnol.org
to digitalinspiration.com
. As with any domain move, we had to manually setup 301 redirects so that the audience are automatically redirected to the new website should they happen to click any of the links that still point to the old domain.
Because the websites are hosted on Firebase, it is easy to setup 301 redirects through the firebase.json
file. All we need are entries in the redirects
array, one entry per redirect, specifying the source, the destination URL and it is also possible to define if the redirect is 301 (permanent) or a temporary 302 redirect.
{
"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
}
]
}
When you are migrating big sites, it can become difficult to maintain the firebase.json
file as 100s of URLs that may have to added in the redirects array. As as workaround, you can create a separate JSON file with all the redirects and then generate the firebase.json
file dynamically.
The firebase file is generated automatically from the redirects file before the assets are uploaded to Firebase hosting.
Step 1: Create a base file firebase.base.json
. As you can see, we have a few redirects setup already and the new redirect entries will be merged 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 with the links
property that contains an array of links. Each link entry will have the source regex pattern or glob, the description URL and the type of redirect (optional).
{
"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
that will read the the base file and generate a new firebase.json
file using redirects listed in 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: Inside the package.json
file, add a new entry in the script
section 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.
Amit Agarwal
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory