How can I deploy a flutter web application to an existing website hosted on Firebase?

Question

I have a website that I'm already hosting at www.example.com (custom domain) using Firebase Hosting. I already have various HTML pages on the site like example.com/page-1.html or example.com/page-2.html.

Now I need to build a web application example-web and put it in a page within the already existing site. Imagine example.com/page-3 should load the Flutter Web application only. I do not want my existing HTML pages to change or be affected by the Flutter single page web application.

Some things to note:

1. I already have iOS and Android applications built using the same Firebase project as the site being hosted on example.com. These mobile apps are also created with Flutter.
2. I have created a sample web application using Flutter and Firebase as well within the same project.
3. I need it to be on the same domain because I already have Firebase Hosting set up to read a variable and then load the Flutter web app using that variable. For example example.com/profile/username needs to load the flutter web app after reading the variable username.
4. I am simply confused about how to load the Flutter Web App build inside an existing Firebase Hosting website?
5. Should I be hosting the flutter web app in a different hosting link and load it inside an iFrame within my existing domain page?

Any help or guidance for this will be highly appreciated! Thank you!

Solution 1

You can simply paste all the files that Flutter generates in your Firebase hosting's public directory. Follow these steps:

1. Run Flutter Build:

flutter build web

It will generate build/web directory and it's content may look something like:

2. Copy build files in public directory: If you already have a Firebase hosting project, then I assume your public directory looks something like:

After copying all files from the Flutter build directory to the public directory, it should look like:

Do note that I've renamed index.html from Flutter to page-3.html and kept the original index.html as is.

That page-3.html file will look for main.dart.js file in the same directory so if you move that JS file to any other directory, let's say, /js/main.dart.js then don't forget to change that in page-3.html.

3. Serve the website:

Try serving your website locally using firebase serve --only hosting command.

You should have all existing pages as they were and Flutter app on http://localhost:3000/page-3.html. If the page returns 404 on /page-3 but works on /page-3.html then checkout this answer on cleanUrls.

PS: Make sure none of your files overwrite each other if they have same name.

Solution 2

When you run flutter build web in your project directory Flutter automatically creates an index.html file along with all of its dependencies, thus serving a Flutter web app is not that different to serving a normal page. All the files you need will end up in your project's /build/web folder, which can be served on its own at example.com/page-3.