# Step by Step how to deploy flutter on Firebase Hosting

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Please Follow me on LinkedIn and GitHub</div>
</div>

%%[linkedin] 

### 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 none you can downloat it from their official website) installed, run this command in your terminal:
    
    ```typescript
    npm install -g firebase-tools
    ```
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068291196/eb4252a3-3e7f-4328-ba56-a90eda6fdd48.png align="center")
    
* After installation, verify that Firebase CLI is installed by running:
    
    ```typescript
    firebase --version
    ```
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068305740/dd004f9b-2bd4-4ac5-9ecd-8bd162e06aa7.png align="center")
    
    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/](https://firebase.google.com/)

Go to Console

Click Create Project

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068394736/fa8af3db-ac46-4ad2-ad52-269f049aae89.png align="center")

I named it flutter test deploy

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068426350/a3a4b361-66db-4dd5-8837-ecbcb3ee2b40.png align="center")

**  
Go to Hosting Tab**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068841588/e72d9f11-aa46-468b-91a8-8d13ad997cf9.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068927618/f9770b55-23d0-49c6-ab6f-a324d706e5b8.png align="center")

Just Click continue to console

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068949667/fc0ce428-5bcf-412e-8b11-a1cb876f1a8f.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068986591/63e63d2d-69bf-4f4c-9e50-37cb77b981ff.png align="center")

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

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Just Follow the instruction and we will proceed to the next step</div>
</div>

### 3\. **Log in to Firebase**

* Log in to your Firebase account by running in your cmd:
    
    ```typescript
    firebase login
    ```
    
* Follow the instructions to authenticate your Google account.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068540108/9c8c1907-2773-41be-af7d-1cbdc93fc1e0.png align="center")

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">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</div>
</div>

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068633892/0724b66d-a3f1-4b01-83d3-7d10bf04e50d.png align="center")

If successfully

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068644836/4395aa51-bdff-4e91-90fd-521905c9acc0.png align="center")

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

```typescript
firebase experiments:enable webframeworks
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068743900/aeec1e34-990b-46c7-b5d5-c16238aacc1b.png align="center")

### 4\. **Set Up Your Flutter Web App**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069151501/edc4f62a-7502-4ad0-9a99-32571e2f778c.png align="center")

* Ensure your Flutter app is ready for web deployment by switching to the `web` platform:
    
    ```typescript
    flutter config --enable-web
    ```
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729068810793/fe397974-70f3-49b6-9cc3-859052bad996.png align="center")
    

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Make sure the project directory is in your flutter project</div>
</div>

  

* Build your Flutter web app:
    
    ```typescript
    flutter build web
    ```
    
    This will generate a `build/web/` directory that contains the compiled files for your web app.
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069109947/4657487d-bfa5-4b33-aeff-65069fbd65e2.png align="center")
    
    again this is from bash but it the directory of my flutter project
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069329988/8282a8c2-e7bc-4010-8887-13f3456ce98c.png align="center")
    
    <div data-node-type="callout">
    <div data-node-type="callout-emoji">💡</div>
    <div data-node-type="callout-text">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 <code>flutter build</code> . to rebuild your changes and ready for deployment</div>
    </div>
    

### 5\. **Initialize Firebase Hosting**

* Navigate to your Flutter project directory in the terminal, and then initialize Firebase Hosting:
    
    ```typescript
    firebase init hosting
    ```
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069292762/bd30f10d-9422-4dd9-886a-618ffe8777c0.png align="center")
    
* When prompted:
    
    * Select your Firebase project.
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069304613/596a87dd-c2a0-4221-8131-40fa71bd6973.png align="center")
        
        Clieck Enter
        
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069568841/43891cc4-685f-47ef-af3a-0e157f9b6f59.png align="center")
    
    <div data-node-type="callout">
    <div data-node-type="callout-emoji">💡</div>
    <div data-node-type="callout-text">I choose<code> flutter-test-deploy</code> project.</div>
    </div>
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069619034/b2e91ab9-2e6e-4cd0-bcc3-4cf72f34238b.png align="center")
    
      
    type y and enter
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069678096/ccd7beca-06a6-4391-9a38-40446d2a7c75.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069692078/04ea2d47-2aec-4467-8504-9d9b9bfdcf1a.png align="center")

type n , as of now

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069731653/197bf5c4-4d36-49e2-81c1-0c81e55a9aa3.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069760628/79d1fbff-261c-4bbd-ac2c-2026244a8365.png align="center")

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">as you can see firebase.json and .firebaserc was generated</div>
</div>

### 6\. **Deploy to Firebase Hosting**

* Deploy your Flutter web app by running:
    
    ```typescript
    firebase deploy
    ```
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069862977/b193123f-8f05-49b0-93c3-5583e4dc2b85.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069871371/cc89208c-47bb-459f-9f82-f89fab3273c5.png align="center")
    
      
      
    
* 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:  

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729069991556/71f54691-5d25-417c-b657-9f65ed0b7f85.png align="center")

[Flutter Demo (flutter-test-deploy.web.app)](https://flutter-test-deploy.web.app/)

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">if you have question , you can message me via LinkedIn,</div>
</div>