# [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:

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))

    // 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).

    // 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.

    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.

        {
          "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

        cd <your-project-dir>

1. run `firebase init`

        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`**.
:::
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, ...)

    firebase deploy --only hosting


5. Check the hosting URL
After the deployment we could access the web app by URL in following format:
- PROJECT_ID.web.app