In this article we're going to investigate how we can host a Flutter application on Firebase Hosting. We'll take our standard
Counter application and build this for production and use the Firebase CLI to deploy it directly to Firebase Hosting.
Prior to creating our project, we need to ensure that we're using the latest version of the Flutter SDK from the
beta channel and have Flutter web enabled. To do that, run the following commands in your terminal:
# Switch to Flutter SDK on the beta channel $ flutter channel beta # Get the latest version of the Flutter SDK $ flutter upgrade # Enable web support for your Flutter app $ flutter config --enable-web
Now, let's create a new Flutter project in the terminal:
# Create a new Flutter project $ flutter create fl_firebase # Open in VS Code $ cd fl_firebase && code .
Now that we've created our Flutter project, we can go ahead and create a new Firebase project.
Feel free to skip this step if you've already got a Firebase project that you'd like to use.
New Firebase Project
Head on over to the Firebase Console and click
Create a new Project. Add a name such as
Note that you'll be prompted to enable Google Analytics on your Firebase project. Feel free to skip this if you like.
Once you've done that, hit the
Create Project button. This may take some time, so make it an opportunity to grab a coffee!
Installing the Firebase Tools CLI
Now that your project has been created, we can now add Firebase to our Flutter application. On the Firebase dashboard, click the Web (</>) button as shown below.
After you've done that, it's time to register an app nickname. I'm going to call this one
FlutterWeb, but you can call it
Counter or anything you want:
Ensure that you've ticked "set up Firebase Hosting for this app". Next, click the
Register App button and then skip past the Firebase SDK section as we won't be using it within this article.
To host our app, we need to install the Firebase CLI (Command Line Interface).
Run the following command in your terminal to install / update the CLI:
$ npm install -g firebase-tools
Deploying to Firebase Hosting
To deploy our application, we'll need to associate our Firebase account with our app. To do this, run the following command in your terminal and log into your account:
$ firebase login
Then initialise your Firebase project in your app directory like so:
$ firebase init
You'll be asked which Firebase CLI features you'd like to set up, select
Hosting from the options. After that, select
Use an existing project and locate your project name from the list.
For the public directory, simply use
build/web, as this is where our
index.html file is located, and type
Yes to configuring as a single-page app.
You should see that Firebase initialisation is now complete! Now, prior to deploying our application on Firebase Hosting, we must build our web application. To do this, run the following command:
$ flutter build web
Doing this populates the
build/web directory with built files including an assets directory, which are both served together.
Now, we can deploy our application to Firebase:
$ firebase deploy
After your app is deployed, you should be able to view it by navigating to the hosting URL in your terminal. Once you navigate to that link, you should see the following:
Great! We can now see our application shows up in the browser. Now that you've familiarised yourself with Firebase Hosting, go ahead and share this link with your friends and family, and deploy your own production applications too.
In this article we've learned how to create a Flutter Web application from scratch, build it, and deploy it to Firebase Hosting with ease.
Feel free to share your production applications in our
developer.school discord channel by clicking the following link:
Here's the GitHub Code for this article: