---
description: Steps to Install the Admin Panel on Firebase
---

# Admin Panel Firebase

**Step 1: Create a Web Project in Firebase & Enable Hosting**

* Go to the [Firebase Console](https://console.firebase.google.com/).
* Create a new Firebase project or use an existing one.
* In the **Build** section, select **Hosting** and click **Get Started**.

<figure><img src="https://2092128983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtcHWM7dAtXaNrlqZkrQ0%2Fuploads%2FZ7cmb1dbq6qotW2TgSn4%2FXnip2024-11-29_14-38-01.jpg?alt=media&#x26;token=55603ffc-fa43-43c8-9206-e355192a54b5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2092128983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtcHWM7dAtXaNrlqZkrQ0%2Fuploads%2FqfrOivqJPaTiYOnqyLSF%2FXnip2024-11-29_14-38-42.jpg?alt=media&#x26;token=1097d11d-e290-4d6c-8803-5b8cc796a30e" alt=""><figcaption></figcaption></figure>

***

**Step 2: Copy Firebase JavaScript Code**

* Once hosting is set up, Firebase will provide you with JavaScript configuration code.

<figure><img src="https://2092128983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtcHWM7dAtXaNrlqZkrQ0%2Fuploads%2FdNoZ0npzmbmaRi43nbsL%2FXnip2024-11-29_14-40-43.jpg?alt=media&#x26;token=5256abef-abb3-421f-84da-7dd580e5f0a9" alt=""><figcaption></figcaption></figure>

* Copy this code and insert it into your admin panel HTML file, just above the `<script>` tag where Firebase is initialized.

<figure><img src="https://2092128983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtcHWM7dAtXaNrlqZkrQ0%2Fuploads%2F5ft4tW3c385OEagYi1Ey%2FXnip2024-11-29_14-42-14.jpg?alt=media&#x26;token=767bbb03-d265-4ec9-9623-fae87d392a93" alt=""><figcaption></figcaption></figure>

***

**Step 3: Test the Admin Panel Locally**

* Open the admin panel HTML file in your browser to ensure:
  * DNS creation works as expected.
  * The list of DNS entries from Firestore displays correctly.

***

**Step 4: Prepare Firebase Hosting for Deployment**

1.  Log in to Firebase using the CLI:

    ```bash
    firebase login
    ```
2. Create a new folder on your desktop for the project.
3.  Open the folder in your terminal and initialize Firebase Hosting:

    ```bash
    firebase init
    ```
4. During the setup:
   * Use your keyboard arrows to navigate to **Hosting**. Press **Space** to select it, then **Enter**.
   * Choose **Use Existing Project** and select the name of your Firebase project.
   * When prompted for the public directory, set it as `public`. Firebase will generate a default `index.html` file.

***

**Step 5: Replace the Default File with Your Admin Panel**

* Delete the `index.html` file in the `public` folder.
* Place your admin panel HTML file in the folder.

***

**Step 6: Deploy Your Admin Panel**

1.  Run the following command in the terminal:

    ```bash
    firebase deploy
    ```
2. Once deployment is successful, Firebase will provide you with a URL to access your admin dashboard.

Your admin panel is now live and accessible through the generated URL! 🎉



