Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 881
Kayce Basques Avatar asked Jun 06 '16 22:06

Kayce Basques


4 Answers

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"
  } ]
}
like image 134
Frank van Puffelen Avatar answered Nov 16 '22 22:11

Frank van Puffelen


Full example:

{
  "hosting": {
    "public": ".",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
like image 32
Andrew Stromme Avatar answered Nov 16 '22 22:11

Andrew Stromme


If you set it to yes, then all invalid URLs like www.example.com/some-invalid-url will be redirected to index.html of your site which is a good thing. You can also set it to your custom 404.html.

firebase.json

{

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

Bonus: set the cleanUrls to true to remove .html extensions from your deployed website urls else all urls without .html will redirect to index.html.

like image 19
GorvGoyl Avatar answered Nov 16 '22 23:11

GorvGoyl


Official Firebase explanation:

We had used that option last year (Q1 & Q2) but it seemed to do nothing, but nowadays when we apply it, definitely things work very different. The complete official explanation of what it does comes in here:

https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites

There's even some useful information about Headers usage in the next section of the same page.

like image 4
DavidTaubmann Avatar answered Nov 16 '22 22:11

DavidTaubmann