Firebase Hosting rewrites not working properly - firebase

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.

Related

hosting: how to rewrite path to parent directory index.html

I have a URL structure with the following pattern, which are just aliases of each other.
example.com/products/sku/index.html
example.com/product/sku/product-slug/index.html
However, I wouldn't like to upload the same index.html file twice for accomplishing this when hosting under firebase.
I have tried to add the following to firebase.json without luck
{
"hosting": {
"rewrites": [
{ "source": "/products/*/*", "destination": "../index.html"}
]
}
}
Which would basically just take a request to example.com/product/sku/product-slug/index.html and render as example.com/product/sku/index.html, however that doesn't seem to work as the relative file seems to not be found.
Ideally something like this would be ideal:
{ "source": "/products/:sku/**", "destination": "/products/:sku/index.html"}
Is there any way to achieve this kind of behaviour on firebase hosting?

Wrong page loading by default on firebase link. How do I change the default page that loads? | Firebase hosting

Question
I just set up firebase. However, when I load the link that firebase provided it gives me an 'Error 404'. Now I know that the website is hosted correctly, because when I ran the local host, I then entered the following extension on the end of the url: '/html/index.html' - and it worked.
However, firebase is not finding the correct page to load.
How can I change the page that loads by default, when someone visits my website?
For context
I am pretty sure I know what firebase is doing here. When I first ran the local host, it was running the default index.html that firebase provided. Now that I have deleted that default index.html. It doesn't know where to look to find the page to run.
My index.html is within a folder that is within the public folder. The name of that internal folder is html.
This is the current set up of the file structure and my attempt to fix the problem so far (based on advice of Renaud):
Update
I have now implemented the following, but it is loading #404
As explained in the doc for Hosting configuration, in order to redirect the traffic to your index.html page (or to another html file), you need to add the following to the firebase.json file which is at the root of your project directory:
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
OR
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/mySpecificHomePage.html"
}
]
},
As explained here, "the public attribute specifies which directory to deploy to Firebase Hosting. The default value is a directory named public, but you can specify any directory's path, as long as it exists in your project directory."
Update following your update (screenshot of your Firebase project file structure):
If I am not mistaking you should do as follows:
"hosting": {
"public": "html",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
Note that rewrites is within hosting!

Firebase Hosting rewrites to Cloud Functions

I want to rewrites all URL end with "api/(funcName)" to call cloud function (funcName).
In firebase.json I set rewrites rules as follows.
"rewrites": [
{
"source": "api/:funcName",
"function": ":funcName"
},
{
"source": "**",
"destination": "/index.html"
}
]
but it's not working.
I got
Error: Forbidden
Your client does not have permission to get URL /:funcName/api/(funcName) from this server.
(funcName) is the real function name I don't want to show here.
Your rewrite should include the exact name of the function. The rewrite system doesn't support named wildcard routes like you use in Express. If you want to wildcard all URLs with a prefix, use the glob syntax supported by Firebase Hosting as described in the documentation.
{
"source": "api/**",
"function": "funcName"
},
Where "funcName" is the name of your function as exported by your code.
I'm not exactly sure how you got it to throw that error message, but from what I can quickly see the error message comes from Cloud Functions, or from something between Firebase Hosting and your Cloud Function.
Given where the error message comes from, Firebase Hosting won't be able to hide it for the response.

Firebase Hosting rewrite doesn't redirect to Google Cloud Run

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

Firebase Functions Custom Domain with Single Page App

I have a Firebase hosted single page app.
I also have 3 Firebase functions (contact, plans, features) that the app and external sources make requests of.
My app has a custom domain, which I'd like to access my functions via.
This is my current firebase.json config
{
"hosting": {
"public": "www",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
So currently all traffic goes to my app and routing is handled via my SPA. Access to my functions currently has to be done via the cloudfunctions.net URL which isn't ideal.
How can I add URL rewrite entries to this config so that my functions are accessible via my custom domain and my single page app handles the rest of the routes?
I have tried the following for the features endpoint:
"rewrites": [
{
"source": "/features/**",
"function": "features"
},
{
"source": "!/features/**",
"destination": "/index.html"
}
]
Where in my functions index.js I have:
...
exports.plans = functions.https.onRequest(plansApi);
exports.features = functions.https.onRequest(featuresApi);
exports.contact = functions.https.onRequest(contactApi);
But I receive 404 Cannot GET /features/123 as the response?
A few things:
Make sure that your featuresApi handler is matching for the full URL path (e.g. /features/123 not /123). Firebase Hosting forwards the full path to the function, not just the ** part.
Rewrites are resolved in order, so there's no need to do !/features/** for your second rewrite source. ** should be fine since if it matches /features/** it will already match the first rewrite and resolve to the function.
Based on the error message, it seems likely that (1) is the culprit here.

Resources