How to deploy on Firebase Hosting

1. Install Firebase CLI

First, you need to install the Firebase Command Line Interface (CLI) to interact with Firebase from the terminal.

  • If you have Node.js (Make Sure if you have none you can downloat it from their official website) installed, run this command in your terminal:

    npm install -g firebase-tools
    

  • After installation, verify that Firebase CLI is installed by running:

    firebase --version
    

    if no problem encountered, We are ready to go on to the next step

2. Create a Firebase Project

  • If you don't already have a Firebase project, create one in the Firebase Console. You’ll need this project to host your Flutter app.

Go to this link and login

https://firebase.google.com/

Go to Console

Click Create Project

I named it flutter test deploy

**
Go to Hosting Tab**

Just Click continue to console

and here we have site, If you click the link:

Site not found cause we did not yet deploy our flutter app

Just Follow the instruction and we will proceed to the next step

3. Log in to Firebase

  • Log in to your Firebase account by running in your cmd:

    firebase login
    
  • Follow the instructions to authenticate your Google account.

Type Y . Then it will automatically direct to the browser, if not just copy the link and paste it to your browser. Choose your account where your project created in #2

If successfully

4.Firebase CLI provides web framework support. To enable it, call the following:

firebase experiments:enable webframeworks

4. Set Up Your Flutter Web App

  • Ensure your Flutter app is ready for web deployment by switching to the web platform:

    flutter config --enable-web
    

Make sure the project directory is in your flutter project

  • Build your Flutter web app:

    flutter build web
    

    This will generate a build/web/ directory that contains the compiled files for your web app.

  • again this is from bash but it the directory of my flutter project

    as you can it generates a build folder on your Flutter app. Every time we change or modify our app, if we deploy for the next version we need to flutter build . to rebuild your changes and ready for deployment

5. Initialize Firebase Hosting

  • Navigate to your Flutter project directory in the terminal, and then initialize Firebase Hosting:

    firebase init hosting
    

  • When prompted:

    • Select your Firebase project.

      Clieck Enter

    I choose flutter-test-deploy project.

    type y and enter

Choose Asia if you are in Asia. Ask me why ?

type n , as of now

as you can see firebase.json and .firebaserc was generated

6. Deploy to Firebase Hosting

  • Deploy your Flutter web app by running:

    firebase deploy
    

  • After deployment, Firebase will give you a URL where your app is hosted.

7. Access Your App

  • Once the deployment is done, Firebase CLI will show the URL where your app is live. You can now access your Flutter app on Firebase Hosting.

HERE IS OUR OUTPUT:

Flutter Demo (flutter-test-deploy.web.app)

if you have question , you can message me via LinkedIn,

Updated on