---
# System prepended metadata

title: '[SPIKE] Firebase web app frontend onboard'
tags: [olympus]

---

# [SPIKE] Firebase web app frontend onboard

###### tags: `olympus`

## Overview
After the development is completed of the frontend, we have to publish it to a hosting server. The easiest way is by [Firebase Hosting](https://firebase.google.com/products/hosting) service.

## Before the first step
1. Setup the Firebase project and web application:
    We have to create a new firebase project and apply a new web app on this project, by [Terraform](https://hackmd.io/gV7oFkG6QNS1bvE5FXOjCA) or just follow the [official way](https://firebase.google.com/docs/web/setup#create-project).
    After completed you can check the console, it might look like this:
    ![](https://i.imgur.com/OvArYNH.png)

2. Apply the `FirebaseConfig` for your web app:
    You can by `.env` file or just embed it in your source code([the succurity problem?](https://groups.google.com/g/firebase-talk/c/VpRO2KDquIM?pli=1))
    ![](https://i.imgur.com/FFmU1SU.png)
    ```javascript=
    // firease/index.ts

    import { initializeApp } from "firebase/app";
    import { getAuth } from "firebase/auth";

    const FIREBASE_CONFIG = {
        apiKey: "AIzaSyA5XYzkW3IyhvWIgC9UUPNCHbdRSjCQkXg",
        authDomain: "olympus-cms-5764.firebaseapp.com",
        projectId: "olympus-cms-5764",
        storageBucket: "olympus-cms-5764.appspot.com",
        messagingSenderId: "1077837381112",
        appId: "1:1077837381112:web:5e14d096f8b2ae1945aa0d"
    }

    // Initialize Firebase
    const app = initializeApp(FIREBASE_CONFIG);


    // Initialize Firebase Authentication and get a reference to the service
    export const auth = getAuth(app);
    ```
    
3. Access the firebase service
Here is a login example, we can use the `signInWithEmailAndPassword` SDK provided by [firebase-js-sdk](https://firebase.google.com/docs/web/setup).
    ![](https://i.imgur.com/8QOpNgA.png)
    ```javascript=
    // src/routers/Login.tsx

    const doFirebaseLogin = (e: any) => {
        e.preventDefault();
        signInWithEmailAndPassword(auth, username, password)
            .then((userCredential: UserCredential) => {
                // const user: User = userCredential.user
                dispatch(login({
                    username: username,
                    password: password
                }));
                navigate("/home");
            })
            .catch((error) => {
                setLoginError(error.errorMessage);
            })
    }
    ```

## [Deploy your frontend application to Firebase Hosting](https://firebase.google.com/docs/hosting?authuser=0&hl=en)
1. Install Firebase CLI
    Here, we would use [Firebase CLI](https://github.com/firebase/firebase-tools) to access our Firebase project. After installation of Firebase CLI, we can manage our application by it.
    
2. Login to Firebase
    Of course, you have to register a gcp or firebase account before you login.
    ```bash=
    firebase login
    ```

3. Initialize the firebase project

    - By manual editing [firebase.json](https://firebase.google.com/docs/hosting/full-config?authuser=0#public)
        <details>
            <summary>Project structure illustration</summary>
            <img src="https://i.imgur.com/PjHAkUz.png"/>
        </details>
        
        Just copy this json text to your **firebase.json** in your project root directory.
        
        ```json=
        {
          "hosting": {
            // "public": "public", 
            "public": "build", 
            // if you run `npm run build` to build your code, please make sure
            // the value "public" shoud be set to "build"
            "ignore": [
              "firebase.json",
              "**/.*",
              "**/node_modules/**"
            ]
          }
        }
        ```

    - By CLI
    
        0. go to your project directory
        ```bash=
        cd <your-project-dir>
        ```
        1. run `firebase init`
        ```bash=
        firebase init hosting --project="<your-project-id>"
        ```
        2. It will ask you some question for generate the **firebase.json** file.
            :::warning
            ⚠️ If you'll use the `npm run build` command to build your app, **please make sure change it to `build`**.
            ![](https://i.imgur.com/yyqExpm.png)
            :::
        3. Finally, there are 2 files would be generated in your project root directory: `firebase.json`([link](https://firebase.google.com/docs/hosting/full-config?authuser=0)) and `.firebaserc`([link](https://firebase.google.com/docs/cli?authuser=0#project_aliases))
            <details>
            <summary>project structure illustration</summary>
            <img src="https://i.imgur.com/X2alpDp.png"/>
            </details>

    <details>
        <summary>🧐 Some details</summary>
    <ul>
        <li>
        The <b>firebase.json</b> provides configuration for Firebase Hosting, and the primary setting is <code>public</code> . The <code>public</code> attribute specifies which directory to deploy to Firebase Hosting, so if you get a “Firebase Hosting Welcome” page instead of your web app, please make sure the <code>public</code> attribute is set correctly.
        </li>
        <li>
        The <code>npm run build</code> command would build your code to the <b>build</b> directory by default, so if you don’t specify the build directory generated by <code>npm run build</code> , please make sure the <code>public</code> attribute is set to <code>build</code> in your <b>firebase.json</b> file.
        </li>
            
    </ul>
    </details>

    
4. Deploy to Firebase Hosting
    Here the `--only hosting` argument is for specifing the deploy service it could be any firebase services(e.g. functions, ci, ...)
    ```bash=
    firebase deploy --only hosting
    ```
    ![](https://i.imgur.com/0aN7Ba5.png)

    
5. Check the hosting URL
    After the deployment we could access the web app by URL in following format:
    - PROJECT_ID.web.app
    ![](https://i.imgur.com/WO5j7LC.png)

    