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.
Related
I am following this
https://firebase.google.com/docs/hosting/functions (Use a Web Framework)
in order to rewrite a url in the form of http://<mycustom_domain>/<api_name> on Firebase hosting to the respective Cloud Functions that use Express(). The endpoint for the API is https://<google_cloud_function_url>/app/<api_name>
This rewrite works:
"rewrites": [ {
"source": "**",
"function": "app"
} ]
What I want to do is rewrite http://<mycustom_domain>/app/<api_name> to
https://<google_cloud_function_url>/app/<api_name>.
I have tried a few things such as
"rewrites": [ {
"source": "/app/**",
"function": "app"
} ]
In the hope that whatever path comes after /app is passed onto express as the API name but this does not work and express returns something like
Cannot GET /app/<api_name>
Any ideas how the rewrite should be written for this to work?
I'm trying to configure a web app to use hosting for all static resources, such as jpegs, pngs, etc. But I want to route all requests to a cloud function to monitor traffic for various security reasons.
I managed to achieve this for all routes except the home route using this:
"hosting": {
"public": "public", //without this everything goes through function, with it the base url is treated like a static get for index.html
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "sendWebApp"
}
]
}
The problem I'm facing is with the home route/base url request. It's ignoring the rewrite for "myurl.com" but uses the rewrite for "myurl.com/whatever-I-type-here". How can I get it to route to the function for the base url as well?
(For clarity.)
EDIT: How can I get firebase hosting not to treat the base url as a static request for index.html?
Firebase Hosting by default will always send index.html from the declared public folder when a request is made to the base URL. The only way to override this is to remove the index.html or don't include the "public" declaration in firebase.json's hosting configuration.
Because static files ignore the rewrites configuration, you can simplify your rewrites to just:
"hosting": {
// ... other props ...
// Serves the function for requests to files or directories that do not exist
"rewrites": [ {
"source": "**",
"function": "sendWebApp"
} ]
}
Importantly, if you are accessing a directory of your site, like / or /dashboard/, the index.html in those directories will be served if they exist. This means that your configured rewrite rules will never be checked in these cases.
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.
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!
Took a free domain on freenom
Linked it successfully with a project on firebase
Added a target name to the domain
Added the target to
firebase.json
on running firebase deploy
Error : HTTP Error 404
Could someone point out what i'm doing wrong cause I followed all the steps on the firebase website but still am unable to get it running. The HTML file I want to host just has a H1 tag with "Hello World".
You do not require any special steps to deploy the site on custom website. Once your site is up on the default domain. Then the website gets automatically replicated on you connected custom domain. Hope this helps you.
This is my firebase.json file:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}