arrow-left arrow-right brightness-2 chevron-left chevron-right facebook-box facebook loader magnify menu-down rss-box star twitter-box youtube-box twitter white-balance-sunny window-close
How to Host a Flutter Web Project on Firebase Hosting
3 min read

How to Host a Flutter Web Project on Firebase Hosting

How to Host a Flutter Web Project on Firebase Hosting

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.

Project Setup

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 FlutterWeb or Counter:

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.

Summary

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:

Join our Discord!

Here's the GitHub Code for this article:

https://github.com/ohalliday/flutter-firebase