I am currently developing a project where I need to host a Flutter web app alongside a static landing page, both under the same domain using Firebase Hosting. The structure I'm aiming for is as follows:
The landing page should be served from mysite.com/index.html.
The Flutter web app should be accessible at mysite.com/game/index.html.
I'm encountering difficulties in configuring Firebase Hosting to support this structure. Specifically, I am looking for assistance in two areas:
Directory Structure: How should I organize the directory structure within my Flutter project to properly accommodate both the static landing page and the Flutter web app?
Firebase Hosting Configuration: How do I configure the firebase.json file to correctly handle URL rewrites for this setup? I'm looking to ensure that:
Navigating to mysite.com serves the landing page.
Navigating to mysite.com/game serves the Flutter web app.
If anyone has experience with a similar setup or can offer examples of firebase.json configurations that work for this scenario, I would greatly appreciate your input. Additionally, insights into best practices for organizing the project directory in such cases would also be beneficial.
{
"hosting": {
"source": ".",
"headers": [
{
"source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
}
],
"rewrites": [
{
"source": "/game/**",
"destination": "/game/index.html"
},
{
"source": "**",
"destination": "/index.html"
}
],
}
Firebase Hosting shouldn't require any specific configuration for this.
Just move (or direct) the output from your Flutter build into the game subdirectory under your Firebase project directory, and run firebase deploy.