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"
} ]
}
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
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 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.
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
I expecting see my firebase website but instead of the web app, I seeing this image. I think I followed the Firebase Hosting docs.
Here's my firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
After running firebase deploy, it says:
Deploy complete!
What did I miss? :(
Thanks,
Adi
This is infact your website. When you run Firebase init it prepopulates the public folder (which you selected to be your dist directory) with the sample site you are seeing. You must place all of your HTML, CSS, and JavaScript into the dist directory and the run firebase deploy --only hosting