How to handle dynamic links in firebase hosting?

Question

I used firebase hosting to host my website. Recently I implemented a proof concept website usually operates with index.html & style.js only.

Functionality Info: A single HTML+JS file used to host entire small scale website. I am able to modify html body content with javascript requests. But the problem is with reload button in browser. For example If I click about menu button then JS function will get the data for about from backend and shows. Show the url will be https://some.domain/about.

Now If I refresh the page,

1. It will go to 404 page by default.
2. I used below redirection in firebase.json. But the result is https://some.domain instead of https://some.domain/about with correct content page like what is showing while pressing about button.

Codes:

1. Changing URL by manually by history.pushState(null, null,/about);

2. Redirection firebase.json

   "redirects": [ { "source": "/about", "destination": "/", "type": 301 }]

I want to keep dynamic functionality at the same time I want to keep specific url in address bar with content for that specific url.

How can I get it done?

Answer 1

use rewrites:

When a browser attempts to open a specified source URL, it will be given the contents of the file at the destination URL.

"hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    // Serves index.html for requests to files or directories that do not exist
    "source": "**",
    "destination": "/index.html"
  }, {
    // Serves index.html for requests to both "/foo" and "/foo/**"
    // Using "/foo/**" only matches paths like "/foo/xyz", but not "/foo"
    "source": "/foo{,/**}",
    "destination": "/index.html"
  }, {
    // Excludes specified pathways from rewrites
    "source": "!/@(js|css)/**",
    "destination": "/index.html"
  } ]
}