Search code examples
firebasevue.jsnuxt.jsfirebase-hosting

firebase.json rewrite for root to serve index.html with different server funciton


I have an SPA, created with Vue2. Step-by-step I'm migrating routes to Nuxt(SSR)+Vue3. With firebase hosting I serve the migrated routes via a different hosting function:

firebase.json:

"rewrites": [
    {
        "source": "/migrated-route",
        "function": "nuxtServer"
    },
]

For the root route I tried analogue:

"rewrites": [
    {
        "source": "/",
        "function": "nuxtServer"
    },
]

The above doesn't work - it seems as there is an index.html on root level of the dist folder firebase will just serve it w/o running nuxtServer. How can I accomplish it to use nuxtServer for serving the nuxt-generated html?


SOLUTION: Following Doug Stevenson's answer below it was super simple to make this work:

  • Rename public/index.html ~> public/app.html
  • In vue.config.js add indexPath: "app.html"(*)
  • In firebase.json change the rewrite rule for "**" to point to "/app.html"

(*) for the old vue2 routes we're using Vue CLI3, but this should work the same with Vite or any other cli


Solution

  • it seems as there is an index.html on root level of the dist folder firebase will just serve it w/o running nuxtServer

    Just delete or rename index.html. Firebase Hosting is behaving as documented with respect to rewrites:

    Firebase Hosting only applies a rewrite rule if a file or directory does not exist at a URL path that matches the specified source or regex URL pattern. When a request triggers a rewrite rule, the browser returns the actual content of the specified destination file instead of an HTTP redirect.

    This means that files are always served first when they match, then rewrite rules are applied. Your index.html matches "/", so you must make sure it doesn't exist if you want a rewrite to match "/" instead.