7

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!

BunkBedNoob
  • 367
  • 1
  • 4
  • 15

3 Answers3

8

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:

Flutter build directory

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

Firebase Project Directory

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

Firebase Project Directory 2

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.

Dharmaraj
  • 47,845
  • 8
  • 52
  • 84
  • If i created a folder named 'flutter_web' inside the public folder and put all the build files including page-3.html to that newly created folder then what will be the url to access the page-3.html?? – KJEjava48 Jan 19 '23 at 12:58
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.

PatrickMahomes
  • 844
  • 1
  • 6
  • 8
0

Use Firebase multisite hosting to retain your current site and you can setup and deploy your flutter app on app.example.com.

You'll need to direct the user to the app url to use the app.

Both sites need to be in the same project, if you use Firebase Authentication this will work across the sites.

Darshan Kassen
  • 645
  • 7
  • 19