I am trying to use the cleanUrls option to drop .html in routes. Works nicely locally with firebase serve. But once deployed to prod, .html is required.
My test site: https://maptennis.firebaseapp.com/
Click on Login will drive you to /login and gives a 404. Append .html to the URL and it will work.
My firebase.json config file:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public"
},
"cleanUrls": true,
"trailingSlash": false
}
Any insight here would be great.
I was facing similar issue. My firebase.json file looked like this:
{
"hosting": {
"public": "public"
},
"cleanUrls": true
}
I noticed I was using an older version of Firebase CLI. When I updated to the latest version and tried to deploy with same config file, following error occurred:
hosting: We found a hosting key inside firebase.json as well as
hosting configuration keys that are not nested inside the hosting key.
Please run firebase tools:migrate to fix this issue. Please note that
this will overwrite any configuration keys nested inside the hosting
key with configuration keys at the root level of firebase.json.
Error: Hosting key and legacy hosting keys are both present in
firebase.json.
I changed my json config file to this:
{
"hosting": {
"public": "public",
"cleanUrls": true
}
}
Deploy was successful and cleanUrls worked this time :)
Related
Trying to deploy my React app on Firebase. The problem is that after I deploy the app and connect to the default "app.web" domain I keep getting "Site Not Found" page. I followed the initial steps and bundled the app with parcelJS.
However adding /index.html at the end resolves my issue.
Connecting to the "firebase.com" domain works as expected without the need of adding "index.html" at the end.
My previous project which I now removed worked seamlessly without such issues.
What causes this behavior? Can I do anything to fix it?
Contents of firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
The rewrites are correct for a single page app. it maybe an issue related to your browser cache, try another browser or clear your one with Ctrl F5.
If issues persist, you should look at your react app and double-check any router paths and that you do have an existing public folder in the root with your index.html and your react app setup correctly.
As a last resort incase something severe maybe broken, you can create a new project folder and init your Firebase project into it and copy your react src folder over and rebuild your public folder, firebase.json, etc and redeploy with firebase deploy --only hosting
I am setting up a redirect(rewrite) with my firebase hosting so that I can call an api that is running from google cloud run here.
I have tried changing the rewrite string from "/api/**" (should catch all things to page.com/api/** and send that to the function). deleted the index.html and swapped to "**" to capture ALL paths including index. Nothing has worked so far.
My hosting firebase.json is setup like so, is there something wrong with this?
{
"hosting": {
"public": "dist/public",
"ignore": ["firebase.json", "**.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"run": {
"serviceId": "next-js-base-api",
"region": "us-central1"
}
}
]
}
}
I also tried with normal redirects to another page, this does not work, what determines when the firebase.json settings begin to propagate and work?
Update
I tried running the hosting emulator and with a modified rewrite "source": "/api/**" which had the following results. Navigating to /api returns non crash (doesn't redirect) with output in browser of cannot GET /api navigating to api/wkapi (a sub directory that is caught by the api endpoint) returns an unexpected error in the browser and
Error: Unable to find a matching rewriter for {"source":"/api/**","run":{"serviceId":"next-js-base-api","region":"us-central1"}}
in the console.
Make sure to update to the latest version of your Firebase CLI by running:
npm install -g firebase-tools#latest
This will enable you to rewrite to cloud run instances as you are trying to do.
Actually, I ran this just now and, looking at the logs of the deployed cloud-run helloworld container, found that custom-domain/helloworld is actually mapping onto container-domain/helloworld instead of simply mapping to container-domain/. To fix this, I had to add an additional app.get rule to my original Node.js program:
app.get('/helloworld', (req, res) => {
And then calling custom-domain/helloworld worked.
If all the above answers don't help you, the fix that worked for me was:
Look in the public directory in your project that firebase hosting uses.
Delete the index.html file that firebase created when going through
the firebase init steps.
After deleting the generated index.html file, it was able to run my cloud run containers with rewrites.
In my case, the cause for this was misspelling function in the firebase.json file, i,e:
"rewrites": [
{
"source": "**",
"function": "ngssr" // I had spelled this as "functions" (extra s)
}
]
how to deploy to other firebase hosting sites defined within the same project.
I created multiple firebase hosting "sites".
The command
firebase deploy
however always deploys to the first one.
How can I specify that the static files get deployed to another "site" (and domain).
Thanks
You have to add the other sites as deploy targets. If you have a second site named awesome-site-d3426:
$ firebase target:apply hosting awesome-app awesome-site-d3426
You'll likely have to do the same thing for the primary site.
Then tell Firebase what to deploy to which targets in firebase.json:
{
"hosting": [
{
"target": "awesome-site",
"public": "awesome-site/dist"
},
{
...
}
]
}
You can then deploy all the sites at once(firebase deploy) or a specific site:
$ firebase deploy --only hosting:awesome-site
To deploy to another site created in same firebase project.
Update your firebase.json file as folow
{
"hosting": {
"site":"<site-name>",
"public": ...,
"ignore": [
...
],
"rewrites": [
...
]
}
}
I expecting see my firebase website but instead of the web app, I seeing this image. I think I followed the Firebase Hosting docs.
Here's my firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
After running firebase deploy, it says:
Deploy complete!
What did I miss? :(
Thanks,
Adi
This is infact your website. When you run Firebase init it prepopulates the public folder (which you selected to be your dist directory) with the sample site you are seeing. You must place all of your HTML, CSS, and JavaScript into the dist directory and the run firebase deploy --only hosting
In older versions of Firebase, we could add a rules section to our firebase.json file, and upload new security rules on every deploy.
How do we use the firebase-tools v3 command-line tools to deploy database security rules?
This page says that it's possible: "Rules for Firebase Storage"
This page hints that the command line tools can do it, but firebase --help and firebase deploy --help don't seem to hint at how to do it? (Apologies if I missed it...)
(related: where is the canonical doc for everything that can go into firebase.json? I found it on the old Firebase site, but can't find it via search on the new docs.)
Thanks!
You can use firebase deploy --only database if you only want to update database rules. It will overwrite your existing rules.
You can check out Firebase CLI Reference for more info
You can use firebase deploy or firebase deploy --only database from the command line, BUT most important:
Please note hereunder firebase.json format: The "rules" entry is under "database" entry.
It was taken from Firebase Sample code.
{
"database": {
"rules": "database-rules.json"
},
"hosting": {
"public": "./",
"ignore": [
"firebase.json",
"database-rules.json",
]
}
}
To deploy a new set of security rules with firebase cli
firebase deploy --only firestore:rules
To deploy a new set of security rules, add a rules top-level key to your firebase.json.
Example firebase.json file:
{
"rules": "firebase_rules.json",
"hosting": {
"public": "doc",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
The firebase_rules.json is a JSON file that contains the security rules. Here's an example:
{
"rules": {
".read": false,
".write": false
}
}
When you run firebase deploy, it will send the contents of firebase_rules.json to the server, replacing/updating any rules configurations.