Search code examples
firebasefirebase-hostingfirebase-tools

Firebase CLI: "Configure as a single-page app (rewrite all urls to /index.html)"


I just used the Firebase CLI to init a static hosting project. What exactly happens when you enable the "configure as a single-page app" option? I'm looking for a description of exactly which files are modified, and what kind of effect this has on the Firebase backend.

Screenshot of firebase init command


Solution

  • That option simply sets a flag in the firebase.json file to redirect all URLs to /index.html.

    "rewrites": [ {
      "source": "**",
      "destination": "/index.html"
    } ]
    

    See the documentation of Firebase Hosting for more information, which also contains this fuller example:

    "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"
      } ]
    }