How can I do h2 server push with firebase/google cloud functions? I want to implement something like this - h2 server push only with firebase functions. The polymer team says they did it here - Polymer HNPWA - but looking at the functions code, I don't see that they actually are. Any help/direction appreciated.
One way to configure H2 Server Push, is to set the 'Link' header to indicate what resources you want to preload.
You can actually do this through the firebase.json file, like its done for the Polymer HNPWA example: https://github.com/Polymer/hn-polymer-2/blob/master/firebase.json
For instance:
"headers": [
{
"source": "/*",
"headers": [{"key": "Link", "value": "</myscript.js>;rel=preload;as=script,</mydocument.html>;rel=preload;as=document"}]
}
]
indicates that for any request against /*, a push of myscript.js and mydocument.html will be triggered.
Hope it helps.
Related
I deployed a new version of a web app that included some new Firebase functions. The new Firebase functions were inaccessible upon deployment.
I was able to find the root cause by familiarity with Firebase's configuration: the function requests were intended to route through the main app domain, and be redirected on the Firebase server to their final destination. (This should have been set up with Firebase's 'rewrites' section of firebase.json, but wasn't.)
A partial view of my rewrites section of firebase.json:
"rewrites": [
{
"source": "/getPlaces",
"function": "getPlaces"
},
...
{
"source": "**",
"destination": "/index.html"
}
]
In plain English, this says, "Firebase server: every time you get a request routing to https://my.app/getPlaces, I want you to not route to that address within my app; I want to invoke my Cloud function instead. Otherwise, route normally."
Yet when I look at the Functions tab of my Firebase console, all I see is this:
Under 'Request', it says https://us-central1-my-app.cloudfunctions.net/getPlaces. That gives me just one of the ways to access my function; the other is https://my.app/getPlaces, as defined in rewrites. I need to know all of the addresses that Firebase will respond to, not just the default one using cloudfunctions.net.
Is it possible to see the entire configuration for the deployed Firebase functions anywhere in the web UI, ie console.firebase.com or console.cloud.google.com, where redirects from rewrites like this can be seen?
I have an api set up on Google Cloud Functions (https://europe-west1-myproject-name.cloudfunctions.net/api/v1/ical.ics).
This works well, but I wish to set up a "friendly" domain name for the api. :)
According to Googles documentation this is seems easy, but it does not seem to work for cloud functions outside the USA, eg. europe-west1.
I have updated the firebase.json file with the below code according to documentation.
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/api/**",
"function": "api"
},
{
"source": "**",
"destination": "/index.html"
}
]
}
When accessing https://myproject-name.web.app/api/v1/ical.ics
I get redirected to https://us-central1-myproject-name.cloudfunctions.net/api/api/v1/cal.ics with error 403 and the below error message.
Error: Forbidden
Your client does not have permission to get URL /api/api/ical.ics from this server.
I must be overlooking something really basic here, since this seems like a really easy operation? :)
Kind regards
/K
As stated in the documentation (see blue text block):
If you are using HTTP functions to serve dynamic content for Firebase
Hosting, you must use us-central1.
You will also find a similar warning in the doc you refer to in your question about "Serve dynamic content and host microservices with Cloud Functions" (See blue text block as well):
Firebase Hosting supports Cloud Functions in us-central1 only.
It is not completely the answer you are looking for since it is not possible with Firebase Hosting.
But it is possible to get a custom domain in front of your cloud functions hosted in EU by using Cloud Run.
I followed this guide:
https://cloud.google.com/endpoints/docs/openapi/get-started-cloud-functions
And after that i added the custom domain under the Manage custom domains on Cloud Run.
Is there a way to use a custom domain for firebase cloud functions http hooks.
The default url for cloud functions looks something like this:
https://us-central1-my-awesome-app.cloudfunctions.net/ios-oauth/
And
I would like to make it look like this:
https://myawesomeapp.com/ios-oauth/
I looked around if there was some other people looking for the same solution and sure enough I found this:
https://stackoverflow.com/questions/43482224/firebase-cloud-functions-custom-domain
I have contacted firebase support to get some answers about this.
And I was forwarded to this part in the documentation.
https://firebase.google.com/docs/hosting/functions#create_an_http_function_to_your_hosting_site
You can use your own domain with the firebase-cloud-functions. The way to do is is using the firebase-hosting.
Connect custom domain to firebase hosting
Add custom function routing to firebase.json
{
"hosting": {
"public": "public",
// Add the following rewrites section *within* "hosting"
"rewrites": [{
"source": "/bigben", "function": "bigben"
}]
}
}
Deploy to firebase
The accepted answer is correct, and I created this repository last year to demonstrate the functionality: https://github.com/cjmyles/firebase-react-express
In order to retain the HTML pushState functionality as per https://firebase.google.com/docs/hosting/full-config#rewrites you may want to extend the rules to allow all other requests through to your index.html page, which solves the issue #Boris was facing in his answer.
"rewrites": [
{
"source": "/api/**",
"function": "app"
},
{
"source": "!/#(api)/**",
"destination": "/index.html"
}
]
This shouldn't really be needed as the rewrite rules are meant to match the first occurence of a request (so the order matters), but this worked for me by allowing all non-api related requests through.
Please note: At the time of writing this the Firebase documentation states: Firebase Hosting supports Cloud Functions in us-central1 only.
If anyone else runs into this, Thomas Bulva's answer is correct but for me, I also had to remove the below snippet from the firebase.json file. .
It was redirecting any request to the index.html page. My https://us---<>.cloudfunctions.net URL was working fine; when I did /helloWorld it would take me to "Hello from Firebase!" But if I tried the same from my custom domain, it would fail. Removing this fixed it.
{
"source": "**",
"destination": "/index.html"
},
While attempting to get CORS working with Cloud Functions for Firebase, I tried to follow the official example here: https://github.com/firebase/functions-samples/tree/master/authorized-https-endpoint
However, even following the tutorial instructions as exactly as possible, I still get this error in the console:
I never got CORS working, but the workaround I found was to use hosting redirects for the functions. That way, HTTP function calls are not cross site at all.
https://firebase.google.com/docs/hosting/functions (See "Direct Hosting requests to your function")
{
"hosting": {
"public": "public",
// Add the following rewrites section *within* "hosting"
"rewrites": [ {
"source": "/api/bigben", "function": "bigben"
} ]
}
}
Note: I have to define a redirect for every endpoint. Is there a way to have general rewrites? e.g.
"source": "/api/*", "function": "*"
Try following this ?
https://stackoverflow.com/a/42756623/6650162
Handling CORS in Google Cloud Functions
Hope that helps!
For the code examples in the firebase docs, it says to initiate a url rewrite like so:
"hosting": {
// Add the "rewrites" section within "hosting"
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
}
What do I do when I want to pass a parameter to the index page? I tried:
"hosting": {
// Add the "rewrites" section within "hosting"
"rewrites": [ {
"source": "/item/**",
"destination": "/item.html?i=$1"
} ]
}
But that doesn't do anything..
I have also tried the answer below:
"hosting": {
// Add the "rewrites" section within "hosting"
"rewrites": [ {
"source": "/item/:item",
"destination": "/item.html?i=:item"
} ]
}
but that just returns a 404 page.
I know this is an old question but I had a similar issue and didn't find an answer so thought I'd share how I solved it.
{
"hosting": {
// Add the "rewrites" section within "hosting"
"rewrites": [ {
"source": "/item/**",
"destination": "/item.html"
} ]
}
I solved my issue by rewriting the dynamic URL to the static html page. Since it's a rewrite the URL will stay as the source URL pattern and not change to the destination URL like a redirect would.
We can then read the source URL through window.location.pathname with Javascript on the item.html page. You can then use .split('/') to return an Array to choose the part that you need.
Hope this helps to anybody looking for a similar solution.
I have just received an email from Firebase support with the follwing:
Update From Firebase support:
Your use case is not possible with Firebase Hosting alone. You will need to make use of Cloud Functions as well to do so. Firebase has just recently released a native Firebase Hosting + Functions integration which makes it possible to perform server-side processing so you can redirect URLs to a function where you can write code to dissect the path and generate whatever response you want. You may check our documentations out to know more about it in detail.
https://firebase.google.com/docs/hosting/functions
I have emailed them back to see if this is something that will be added in the future as it seems a little overkill to run to processes for one page.
Update 28/07/2017
Since this is not supported, I have filed a feature request for you. However, I am not able to share any details or timelines for now. We'll keep your feedback in consideration moving forward though.
In the meantime, you may keep an eye out on our release notes.
Have a great day.
https://firebase.google.com/support/releases
I ran into this same issue as well. Although this isn't possible with rewrites, I found it is possible with redirects:
"redirects": [
{"source": "/user/friendly/url.html",
"destination": "/userunfriendly.html?myid=42",
"type": 301
},
"hosting": {
// Add the "rewrites" section within "hosting"
"rewrites": [ {
"source": "/item/:item",
"destination": "/item.html?i=:item"
} ]
}
Give that a try.
FireBase Allows for Static web hosting. It also has some Custom Behaviours
https://firebase.google.com/docs/hosting/url-redirects-rewrites
Redirects:: this is only for page forwarding
Rewrites:: when you want to show the same content for multiple URLs [ it is there for URL reversing ].
It also provides control over the MIME types of the HTTP requests.
Now, from the Question above I see you are trying to Query for a DOM object from the page which is what Dynamic web hosts provide.
https://www.quora.com/How-are-dynamic-websites-hosted-1