I've deployed my single page vue js web application on Google Firebase. When the source files are requested, firebase returns index.html instead of the .js files the app needs to run. I tried reconfiguring the rewrite for the web application
Old, matches all requests to index.html:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
New, intended to match all requests except file requests to index.html:
"rewrites": [
{
"source": "!**/*.#(js|css|jpg|jpeg|png)",
"destination": "/index.html"
}
]
Now, whenever I go to the link for a js file, i get a 404 error.
Any ideas?
Ok so after many hours of struggling, I discovered the solution was to upgrade Firebase CLI from 4.1.0 to 4.1.1
Related
I'm trying out Solid. I hosted a simple web app on firebase that shows the index.html file, but only shows a 404 error for other routes. Solid JS stores its index.html folder in dist/public, along with other files.
404.html favicon.ico manifest.json ssr-manifest.json
assets/ index.html route-manifest.json
The routing works fine in my development server, but not on firebase or netlify. It looks like both firebase and netlify have config options that let you specify redirects, but what html file do I redirect to?
If you ran firebase init your project should have a firebase.json. Here's an example from one of my projects. Notice the rewrites array. It says every link to my website should be handled by index.html, which is where React project is served from. Solid-js should work similarly
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Documentation here https://firebase.google.com/docs/hosting/full-config#rewrites
How can I use SvelteKit and firebase hosting? firebase hosting requires the html file to be called Index.html while SvelteKit calls it app.html. I think it has something to do with SvelteKit adaptors
You can configure Firebase to serve the file you want.
"hosting": {
// ...
// Serves app.html for requests to files or directories that do not exist
"rewrites": [ {
"source": "**",
"destination": "/app.html"
} ]
}
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?
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!
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.