Firebase Hosting - Flutter Web App hosting of extra .html page

Viewed 589

I am currently working on a Flutter web app that is being hosted on Firebase. The web-app has an image upload function for the user, that uses another HTML page that is living in the assets folder (doing this because I use some JS libs on this page - that I didnt find for dart). This html page gets called from dart in an extra window - locally this works fine - i am just opening the page at localhost/assets/html/uploadImage.html and the window appears. However this does not work when hosted on Firebase. Here i am calling /assets/html/uploadImage.html - but just get a blank page. I kind of understand that static files do get hosted differently on Firebase, than on local - but I dont understand what I am doing wrong right here. Is there something configurable to have that one extra page hosted as well?

Happy to hear your thoughts!

2 Answers

A different approach would be to add the html to the web folder and launch it from there such that when you launch it you will have yourdomain.web.app/my.html

Flutter Web / Firebase Hosting Only

If you are trying to serve up static HTML files for only flutter web, you can put them in the web build folder.

You will also need to adjust your firebase hosting rewrite rules so that your app does not automatically redirect from the static html file back to the app.

The following example will allow users to visit your app.com/example/staticwebpage.html without getting redirected back to the flutter app.

  "rewrites": [
    {
      "source": "/example/staticwebpage.html",
      "destination": "/example/staticwebpage.html",
    },
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]

Serving HTML on Flutter iOS & Android

If you need to serve HTML files on iOS and Android Flutter apps, you will need to use one of these packages. They will serve the pages in an in-app web browser.

Related