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

小开

最佳答案

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

小开

Full example:

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

小开

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.

小开

As a note: if you would like to have Server-Side Rendering (SSR), type No and set up your rewrites as follow:

"rewrites": [
{
"function": "angularUniversalFunction",
"source": "**"
}
]

After all, whatever you will choose you can always change this in a firebase.json file.

小开

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.