So let's say in my public folder in Firebase i have an index.html and a salon.html.

Now for a url like xyz/salon/43 I want to load salon.html and in the javascript I want to fetch salon 43 from the realtime database.

Right now I'm able to have urls like xyz/salon?id=43. I'm wondering if it is possible to do the former in Firebase hosting and if so how.

So let's say in my public folder in Firebase i have an index.html and a salon.html.

Now for a url like xyz.com/salon/43 I want to load salon.html and in the javascript I want to fetch salon 43 from the realtime database.

Right now I'm able to have urls like xyz.com/salon?id=43. I'm wondering if it is possible to do the former in Firebase hosting and if so how.

• javascript
• firebase
• frontend
• firebase-hosting

• 2 You could alternatively use dynamic hosting: firebase.google.com/docs/hosting/functions – Daniel Herr Commented May 31, 2017 at 1:23
• Thanks! I didn't know that cloud functions could be used that way. ...you can have a URL like /blog/<id-for-blog-post>. This URL pattern can be pointed to a function that dynamically uses the URL blog post ID parameter to retrieve content dynamically from your Firebase Realtime Database. – Chaitanya Nettem Commented May 31, 2017 at 15:04

3 Answers 3

You're looking for Firebase Hosting rewrites. From the documentation:

Use a rewrite when you want to show the same content for multiple URLs. Rewrites are particularly useful with pattern matching, as you can accept any URL that matches the pattern and let the client-side code decide what to display. Rewrite rules can be used to support apps using HTML5 pushState for navigation. When a browser attempts to open a specified source URL it will be given the contents of the file at the destination URL.

URL rewrites can be specified by defining a rewrites section within hosting in the firebase.json file:

"hosting": {
  // Add the "rewrites" section within "hosting"
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

2023 Update for Next.js

Add the "cleanUrls": true to "firebase.json" file as below

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

You could also allow the option - "Configure build to a single-paged app", or something that says like so during the process of 'firebase init hosting'. Once you click yes, the build will automatically write the piece of code, as written above, for you.