Installation instructions

Create a new Firebase project

1., Go to the Firebase console

2., Click on the Add project section

3., Enter the name of your new Firebase project

4., Customize the unique identifier of your project if necessary

5., Click on Continue

6., Enable Google Analytics for the project

7., Click on Continue

8., Choose or create a Google Analytics account

9., Click on Create project

10., Wait until the project is created

11., Click on Continue

12., Upgrade the billing plan to Blaze - Pay as you go (to have access to all the features)

13., Set a budget alert to avoid unexpected bills

Setup the Firebase project

Authentication

1., Select the Authentication menu on the sidebar

2., Click on Get started

3., Click on the Sign-in method in the top navigation bar

4., Click on Email/Password and toggle the first Enable button

5., Click on Save

Firestore Database

6., Select the Firestore Database menu on the sidebar

7., Click on Create database

8., Select the Start in production mode option

9., Click on Next

10., Select your Cloud Firestore location

11., Click on Enable

12., Wait until the database is created

Storage

13., Your default Storage bucket is created automatically

Hosting

14., Select the Project Overview on the top left corner

15., Click on the </> white circle (next to the iOS and Android options)

16., Enter the App nickname for your Web app

17., Enable the Also set up Firebase Hosting for this app option

18., Click on Register app

19., Save the content of the firebaseConfig object (it will be required later, during the setup process)

const firebaseConfig = {
  apiKey: "AIzaSyCKxMHj800xVfJPqk2BgBMe7seL5hJv-LU",
  authDomain: "testing-f123f.firebaseapp.com",
  projectId: "testing-f123f",
  storageBucket: "testing-f123f.appspot.com",
  messagingSenderId: "123456789000",
  appId: "1:123456789000:web:4189ac5a701f8687e0ba7a",
  measurementId: "G-VPEZMZES2T"
};

20., Click on Next

21., Click on Next

22., Click on Continue to console

Google Cloud Platform

Create service account

1., Go to the Google Cloud Platform Console

2., Select the Service Accounts menu on the sidebar

3., Select your recently created Firebase project

4., If your project does not appear in the recent project list, then click on SELECT PROJECT, navigate to the ALL tab, and select your project from the list

5., Click on the + CREATE SERVICE ACCOUNT

6., Enter the github-action-deployment text as Service account name

7., Enter the github-action-deployment text as Service account ID

8., Click on CREATE AND CONTINUE

9., Select the Editor role from the list

10., Click on + ADD ANOTHER ROLE

11., Select the Cloud Functions Admin role from the list

12., Click on CONTINUE

13., Click on DONE

Download the JSON key file

14., Click on the recently created service account email in the list
github-action-deployment@{project_id}.iam.gserviceaccount.com

15., Select the KEYS in the top navigation bar

16., Click on ADD KEY

17., Select Create new key

18., Select the JSON option

19., Click on CREATE

20., Private key saved to your computer (it will be required later, during the setup process)

Setup GitHub repository

1., Create a new, private GitHub repo

2., Select the Settings in the top navigation bar

3., Select the Secrets menu on the sidebar

4., Create the following repository secrets

• GCP_SA_KEY -> copy the content of the GCP service account JSON file
• FIREBASE_API_KEY -> enter the apiKey value of the firebaseConfig object
• FIREBASE_AUTH_DOMAIN -> enter the authDomain value of the firebaseConfig object
• FIREBASE_PROJECT_ID -> enter the projectId value of the firebaseConfig object
• FIREBASE_STORAGE_BUCKET -> enter the storageBucket value of the firebaseConfig object
• FIREBASE_MESSAGING_SENDER_ID -> enter the messagingSenderId value of the firebaseConfig object
• FIREBASE_APP_ID -> enter the appId value of the firebaseConfig object
• FIREBASE_MEASUREMENT_ID -> enter the measurementId value of the firebaseConfig object

Deploy the code to Firebase

1., Push the code to the repo

2., Select the Actions in the top navigation bar

3., Wait until the deployment process is finished

4., Your related:chat project is now ready to use 🎉🎉🎉

Final thoughts

You can find the public URL of your Web app in the Firebase Console Hosting menu. By default, Firebase generates two links. Click on one of them to see your live Web app.

You may experience some loading time during the first few minutes because the Firebase infrastructure needs some time to warm up.

---

© Related Code 2021 - All Rights Reserved