Firebase CLI: "Configure as a single-page app (rewrite all urls to /index.html)"
Solution 1
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" } ] }
Solution 2
Full example:
{
"hosting": {
"public": ".",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Solution 3
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
.
Solution 4
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.
Solution 5
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.
Kayce Basques
Updated on December 06, 2020Comments
-
Kayce Basques over 3 years
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.
-
Teoman shipahi over 6 yearsWith this config localhost:5000/qqq renders but not localhost:5000/qqq/www how can I fix this issue? Second link does not renders index.html
-
Oliver Dixon almost 6 yearsHow can we also write an API/functions here then? So for example: 'somewebsite.com/api' which would also be redirecting to a function but also has a root somewebsite.com using
**
-
Frank van Puffelen over 4 yearsThanks for flagging. I added the more complete example from the linked documentation to help reduce that risk.
-
Mars2024 about 2 yearsIf you're using React, this will allow your JS to redirect to each route as intended if you are using React Router as your routing system