I use firebase.json to rewrite any request to /index.html which have link to external css in the same directory.
firebase.json:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
However, when I go to sub url like example.com/user, the index.html the linked css did not imported. And the script resource also did not imported, instead console spit this error:
failed to load module script: expected a javascript module script but the server responded with a mime type of "text/html"
I searching in firebase docs, and find the header config that
Applies a CORS header
I did not understand, is this what I need ?
Do I need to use absolute path instead ?
I only use firebase hosting not cloud function.
Any help would appreciated 🙏
Related
I currently have the following configuration:
// firebase.json
{
"hosting": [
{
"rewrites": [{
"source": "/articles{,/**}",
"destination": "/articles"
},
{
"source": "**",
"destination": "/index.html"
}]
}
]
}
If I go to mysite.com/articles/<articleID> I'm taken to mysite.com when I'd expect to be taken to mysite.com/articles. What am I doing incorrectly?
I'm following this documentation.
I was able to resolve the issue after taking the following steps:
Change my source from /articles{,/**} to /articles/**
Change my destination from articles to articles.html which is a valid local file
Realize that changes to firebase.json don't change the behavior of the Firebase Hosting emulator until it is restarted.
I believe there are two possible causes.
You have set hosting as an array instead of an object (although I am not completely sure if that is an issue)
Secondly, as you can see in the documentation you shared, just above the heading Direct requests to a function, it says that the destination file must exist and as mysite.com/articles doesn't evaluate to a local file, it is caught by the second rewrite rule and redirected to index.html.
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)
}
]
I want to create a website which will work on any pathname, like domain.com/abc, domain.com/xyz and so on.
But I want to serve from home page only. The content will be generated dynamically.
I think it is possible using firebase.json file, but how do I do that?
I have tried redirect, but that didn't work as pathname wasn't preserved.
This should be configured by default, but here you go:
"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"
} ]
}
The appropriate section in the documentation can be found here.
This (rewrites) will serve content from the specified destination but not redirect to another URL.
I was trying to have my ionic single page application to have a url navigation, everything will work fine if I do
project-id.com/#/register/id.
If I enter this url I will be in the correct page and url changes to
project-id.com/register/id (I think this is because ionic doing locationStrategy:'path')
however if I want to do no # with just
project-id.com/register/id
It will try to get my static assets with project-id.com/register/blah
i.e instead of getting
project-id.com/cordova.js, it will do
project-id.com/register/cordova.js.
Now if I do
project-id.com/register/somemore/id
it will go fetch
project-id.com/register/somemore/cordova.js
I've tried many rewrites, but none of it worked,
my current one is the default rewrite. This will make every static assets become index.html
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
Any idea?
it turns out I need to give absolute path like /assets/js/something.js instead of assets/js/somthing.js
I'm using Webpack to build my React project, and I deploy it with Firebase hosting. It's a SPA, the index.html loads a single JS bundle, it all works great.
Except that sometimes, I get this error from some users:
SyntaxError: Unexpected token <
File https://tribeez.com/aa298947341ff919a5feecdc7367a6145a4a7d87.js line 1
col 1 in [anonymous]
It means that the JS bundle returned some HTML instead, and that happens when the file does not exist, thus returning the content of my index.html.
My firebase.json is quite basic:
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
So I was thinking, it must be when a visitor's browser is trying to fetch an older version of the JS bundle, but how can this happen? How can it load an older version of index.html (from its cache then) but can not load its related JS bundle from its cache too?
Should I tell Webpack to always create the JS bundle with the same filename and let Firebase Hosting handle the caching? Or should I handle this differently?