Taking a Flutter project to the web is an excellent way to reach a broader audience without needing an app store. When combined with Firebase Hosting, the process becomes not only simple but also incredibly fast and secure, with a generous free tier.

In this guide, we’ll walk through the step-by-step process of deploying an existing Flutter project to the web using Firebase Hosting.

Prerequisites

Before you begin, ensure you have:

  1. An existing Flutter project.

  2. The Flutter SDK installed and configured in your PATH.

  3. A Google account to access Firebase.

  4. Node.js and npm installed. They are required to install the Firebase command-line tool (CLI) in the next step. npm is already included in the Node.js installation. If you don’t have it, download the LTS version from the official website nodejs.org.

    Important: On the download page, choose the “Windows Installer (.msi)”. Avoid other options like Docker, which are for more advanced use cases. The installer will handle the entire setup process for you automatically.

Step 1: Set Up Firebase Environment (Only once per machine)

This step prepares your computer to communicate with Firebase. You only need to do this once; it’s not necessary to repeat it for every new project.

  1. Install the CLI globally via npm. This adds the Firebase commands to your system:

    npm install -g firebase-tools

  2. Log in to your Google account. This authenticates your machine:

    firebase login

    This command will open a browser window for authentication. Once logged in, you will remain connected for future projects.

Step 2: Set Up the Project in the Firebase Console

With the tools ready, the next step is to create a project in Firebase that will host our application.

  1. Go to the Firebase Console.
  2. Click “Add project” and give it a name (e.g., my-flutter-web-app).
  3. Follow the setup steps. It’s not necessary to enable Google Analytics for this tutorial.

Step 3: Build for the Web

Now that Firebase is ready to receive the files, let’s generate the production version of our Flutter app.

  1. Run the command below in the terminal, at the root of your project:
    flutter build web
    This command creates a build/web folder with all the static content (HTML, CSS, JS) that will be published.

Tip: You can test locally before deploying with flutter run -d chrome.

Step 4: Initialize Firebase in Your Flutter Project

With the build ready and the project created in the console, let’s connect your local project to Firebase.

  1. In the root folder of your Flutter project, run the initialization command:

    firebase init

  2. Follow the prompts that appear in the terminal:

    • “Which Firebase features do you want to set up?”
      • Attention: Select the option Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys. This is the correct option for the free plan. Do not choose “App Hosting,” as it requires a billing plan.
    • “Please select an option:”
      • Choose Use an existing project and select the project you created in the previous step.
    • “What do you want to use as your public directory?”
      • This is the most important part! Type build/web.
    • “Configure as a single-page app (rewrite all urls to /index.html)?”
      • Type y (Yes). This is crucial for Flutter’s navigation to work.
    • “Set up automatic builds and deploys with GitHub?”
      • Type N (No). The setup with GitHub Actions, while very powerful for automating deployment, is a more advanced topic that we will not cover in this tutorial.
    • “File build/web/index.html already exists. Overwrite? (y/N)”
      • Type N (No). It is essential to keep the original index.html file generated by Flutter.

At the end, two new files will have been created in your project. They are the foundation of the Firebase configuration for this folder:

  • .firebaserc: Acts as a “label” that connects this local folder to your specific project in the Firebase console.
  • firebase.json: This is the main configuration file for Hosting. It defines which folder will be published (build/web) and other rules, such as the necessary rewrites for single-page applications (SPAs) like those made with Flutter to work correctly.

Step 5: Deploy!

Everything is ready. With just one command, your site will be live.

firebase deploy

After completion, the terminal will show the Hosting URL. This is the link to your Flutter project, now live on the web!

Congratulations! You have successfully deployed your Flutter application to the web quickly and efficiently with Firebase Hosting.

Updating Your Application

Once the initial setup is done, the process to update your site is much simpler. Every time you make a change to your Flutter code, just repeat two steps:

  1. Generate the new build:
    flutter build web
  2. Deploy the new version:
    firebase deploy

And that’s it! Firebase will take care of updating the files on the server.