Deploy Your Flutter Web Application to Firebase hosting
In the Flutter Engage 2021 Flutter team announced there new release Flutter 2.0. With the Flutter 2.0 update flutter support for the web platform has become stable.
With this, the Flutter team pushes the reusability of code to another level with the support of the web platform.
Our vision for Flutter is to be a portable UI framework for building beautiful app experiences on any platform. Today, as part of Flutter 2, we’re announcing that Flutter’s web support has hit the stable milestone.
(In the keynote Flutter Engage 2021)
Read about Flutter Engage 2021 from my old Stories: https://thilinaweerasinghe.medium.com/flutter-engage-2021-13bc352ce0f9
From this article you’ll see how to deploy web application in to Firebase Hosting.
There are simple steps:
- Create the Firebase project
Go to the Firebase console and Add new project and after that add a name to your project and click Continue.
Next click Create project.
Next click continue
After a few seconds, your project is ready! ✌️
2. Install the firebase-tools cli
(🏃♀Skip this step if you already have firebase-tools installed.)
🛑necessary that Node.js is installed on your machine.
Firebase CLI provides a variety of tools for managing, viewing, and deploy to Firebase projects.
Run this code npm install -g firebase-tools
For more info refer the Firebase CLI reference.
3. Initialize Firebase hosting for your Flutter project
Navigate to the root directory of your Flutter app and run this command to exec the login:
firebase login
this opens a web page where it’s possible to insert your credentials to authenticate to the system. Accept all permissions. A message of success informs you of the outcome of the operation.
Then initialize your Firebase project and run this command:
firebase init
This asks for which Firebase CLI features do you want setup for this folder. Move with the arrow key and press the ‘Space’ button to select Firebase Hosting and then click ‘Enter’ to confirm your choice.
Project Setup: Firebase hosting
Then select Use an existing project and click enter.
Project setup: Use an existing project
When the terminal ask for “What do you want to use as your public directory” insert build web and press enter.
Project setup: Hosting setup
In the end, a message informs you of the outcome of the operation.
✔ Firebase initialization complete!
4. Build and deploy the app
To build your app launch:
flutter build web
This creates the necessary files in /build/web folder.
At the end of the build process run:
firebase deploy
At the end of process, All the files are uploaded and hosted in your Firebase URL.
Configure Custom Domain
After upload your web application to firebase you can deploy your flutter web application to your own custom domain.
- First go to hosting section of your firebase console and click on add custom domain.
2. Then enter your domain and click continue.
3. After copy the values and go to domain provider.
4. Go to DNS section on domain providers web.
5. Go to A records and add your copied value records on the ipv4 Address text field and click on save button.
6. After configuration step you need to wait up to 24 hours until firebase actually verifies the ownership of your website and this may can take some time.
7. After above step you can see your connected message on the status column
8. Then you can use your custom domain.🧑💻
Using this method you can easily host your flutter web application using firebase hosting service. ✌️
Thank you!
