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.
5 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" } ] }
-
2With 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 Jan 24, 2018 at 4:32
-
1How 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
**
May 22, 2018 at 7:12 -
1Thanks for flagging. I added the more complete example from the linked documentation to help reduce that risk. Dec 5, 2019 at 16:04
-
1If 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– Mars2024Apr 6, 2022 at 17:40
Full example:
{
"hosting": {
"public": ".",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
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
.
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.
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.