Deploying and hosting your Flutter web app on Firebase.
- Introduction
Flutter web recently hits the stable milestone, meaning the web is officially another platform to build your flutter projects on. In this tutorial, we will learn how to deploy our flutter web app using firebase.
- Prerequisite:
Create and push your Flutter project to a GitHub repository.
Create a new project on the Firebase console to create a new project on the Firebase console visit Firebase console. With that out of the way let's dive into it.
- Download the Firebase CLI
To begin using Firebase in your project you need to download firebase tools. You can download firebase tools manually from firebase official docs.
Alternatively, if you have Node.JS installed on your machine running npm install -g firebase-tools
in the terminal would download firebase tools.
- Login to your Firebase account
After the installation of Firebase tools run firebase login
in your app directory to log in to your Firebase account. You would be prompted to grant permission to Firebase to link your Firebase account to your project.
- Initialization and project setup
To initialize a new Firebase project for hosting, run the following command from within your app's directory: firebase init hosting
Type in “Y” to proceed to project setup
select “use an existing project”. Projects in your Firebase will be displayed and you get to choose which project you want to deploy on
- Hosting setup
Set your public directory as build/web
and accept other prompts to configure to a single page app and set up automatic builds with GitHub.
You would be asked which GitHub repository you would like to set up a GitHub workflow, choose the GitHub repository with your in it. In the format user/repository name
.
It will set up an account FIREBASE_SERVICE_ACCOUNT for your project.
You can choose to run a build script before every deployment, set npm run build
as the build script to run. You can read more about the build script here.
Note: Running a build script is not compulsory.
If you do not wish to run a build script you could disagree and proceed.
- Final Step
At this point, firebase initialization must have been successfully completed. run flutter build web
in your app directory.
Finally, run firebase deploy --only hosting
to host. Wait for few seconds and you get a URL to your hosted web app.
Congratulations you have successfully hosted your web app.