---
description: Host Admin Panel In Firebase
---

# Firebase Host

## Install the firebase-tools CLI <a href="#d31b" id="d31b"></a>

🏃‍♀Skip this step if you already have firebase tools installed.

If you do not have `npm`, you must install that first.

_☝Note: If you are not sure whether `npm` is installed on your machine, run `$ npm -v` , and see if it lists a version number. If it does, then you already have `npm`. If it says “command not found”, you need to install it._

After npm install past this command in your terminal

```
npm install -g firebase-tools
```

`firebase-tools` is now installed!

## Initialize Firebase hosting for your Flutter project <a href="#id-0277" id="id-0277"></a>

Open a terminal and navigate to the root directory for your Flutter app and run this command to login:

```
firebase login
```

☝&#xFE0F;_&#x4E;ote: If you are already logged in and want to re-login as a different account, first logout with:_

```
firebase logout
```

Follow the command prompt and the link in your browser. Accept the permissions by clicking **Ok**. When you return to your terminal you should see that you are now logged in:

<figure><img src="https://miro.medium.com/v2/resize:fit:828/format:webp/0*JZ_gkqDtOFpGnTtJ" alt=""><figcaption></figcaption></figure>

Next, run this command from the root directory of your Flutter app to initialize your Firebase project:

```
firebase init
```

<figure><img src="https://miro.medium.com/v2/resize:fit:828/format:webp/0*F4TQYa2f-9bAaW3X" alt=""><figcaption></figcaption></figure>

Use the arrow keys to navigate the cursor to **Hosting** and hit the spacebar to select it, then press enter. Now you will see this screen:

<figure><img src="https://miro.medium.com/v2/resize:fit:828/format:webp/0*KnlTgdXeNMDAMpna" alt=""><figcaption></figcaption></figure>

Select **Use an existing project** by pressing Enter. Use the arrow keys to select the project you made in step 1.

Next, enter `build/web` as the public directory and press enter, then enter **y** (for yes) to select the single page app option:

<figure><img src="https://miro.medium.com/v2/resize:fit:828/format:webp/0*mYMsKK4g65KGh71f" alt=""><figcaption></figcaption></figure>

☝️Note: After this step, 2 new files are created (`.firebaserc` and `firebase.json`) in your root directory. Check and make sure they are there. If not, check for errors in the `firebase init` step and retry.

## Build and deploy! <a href="#id-6922" id="id-6922"></a>

Build your app for web:

```
flutter build web
```

This builds the necessary files in `<root-directory>/build/web`.

Add this code to your `firebase.json`

```
 "rewrites":  [
      {
        "source": "**",
        "destination": "/index.html"
       }
   
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
```

<figure><img src="https://content.gitbook.com/content/RTIkM7mLrmv2QWvtQw9Y/blobs/lAhNXP9Lw3OI7mwsXqpB/Orban%20Vpn%20-%20Add%20app%20-%20Firebase%20console%20-%20Google%20Chrome%2021-02-2024%2013_52_50.png" alt=""><figcaption></figcaption></figure>

Finally, run:

```
firebase deploy
```

