Table:

• Step 01 | Setup a project on Firebase Console
• Step 02 | Setup a new GitHub Repository of hosting the code
• Step 03 | Set Up Firebase Hosting
• Step 04 | Start Migrating frontend code and backend code to based on Firebase file structure
• Step 05 | Start Tailoring the hosting configuration and Backend Code
• Step 06 | Setting up GitHub Action workflow for testing deployment
• Step 07 | Using my own domain
• Comments

Image source: by Wei Chu

After developing my website on my local machine and testing the functions with a local server, it is time to find a cloud server that will be able to host my backend components so that data will be requested through https methods when my audiences access my website through my custom DNS.

The following is a list of backend components that be needed to complete this backend hosting:

1. Server: I chose Firebase as hosting server, which is powered by GCP. The reason why I chose was mainly because of the free-tier credits ($300) given by Google, and I don't really wanna setup another email account to get the free credits from Azure or AWS .
2. Application: Continuing using Node.js to handle the core logic of my website and and APIs as it relatively more lightweight and suitable for the simplicity of my web project.
3. Database: Continuing using MongoDB Atlas as my database host because I like the flexible schema feature it has as a NoSQL database. NoSQL DB is quite useful when I wasn't sure about my data structure and it paves the way for scaling if the app if moving into bigger and more dynamic design. Another reason why I chose MongoDB is that it also has free tier services.

Step 01 | Setup a project on Firebase Console

Step 02 | Setup a new GitHub Repository of hosting the code

Following-up steps after creating a new repo:

1. Go to VS Code and clone the newly created repo to your local machine.
2. Open up a new bash terminal in the VS Code and go the major step 03 for starting setting up all you need for Firebase Hosting.

Step 03 | Set Up Firebase Hosting

Before we start doing anything, it is important to acknowledge that which kind of website we are hosting. “Is it static or dynamic? “ (Please see the call out box below.) There are clear instructions from the documents of Firebase.

Firebase Hosting can serve both static and dynamic content. For dynamic content, you can use Firebase Functions (Cloud Functions for Firebase) to handle server-side logic and generate dynamic responses.

Here I followed the instruction that is for hosting a dynamic website as my website requires HTTP request through API. The following are the setting up steps that I have gone through:

1. Install Firebase CLI: If you haven't installed the Firebase CLI, do so by running:
2. Initialize Firebase Hosting: Navigate to your project directory and run:
3. Initialize Firebase Functions: Navigate to your project directory and run:
4. Deploy Your Site: Normally deploying your site is by running the following command:

Step 04 | Start Migrating frontend code and backend code to based on Firebase file structure

Image source: by Wei Chu

After the Firebase tools are configured on your machine, you will noticed roughly 3 things in your repository:

1. “Public” folder - This will be the destination where all the frontend code files should be in. Therefore, the html, css and js files for the main page and subpages will be cloned from the local hosting repo to this folder.
2. “Functions” folder - This will be the destination where all the backend code files should be in. The default name of the backend API connection file is “index.js” in the new repo for Firebase hosting, which is equivalent to the backend API connection file “db.js” in my local hosting repository.
3. firebase.json file - The firebase.json file is the cornerstone of the Firebase Hosting project. It's a configuration file that defines how the web app, static content and dynamic functions is deployed to Firebase architecture. The file will be tailored to meet the needs of my project. It references the files placed in the Public and Functions folder.

The following shows the actual file structures of the repository for local hosting and for firbase hosting.

• Repo for local hosting: weichudev.web.local

• Repo for Firebase hosting: weichudev.github.io

Step 05 | Start Tailoring the hosting configuration and Backend Code

1. Tailoring the Configuration JSON file

   firebase.json

2. Configuring The Dynamic Endpoint

   The index.js file here is the main entry point for a Node.js application that sets up and configures an Express server. It includes middleware for handling CORS, JSON body parsing, and routing. It exports the Express app as a Firebase Cloud Function named “api”.

   Index.js

   💡 Making sure the environment variables like username and password for connecting to the MongoDB are saved in the Github Action secret as part of the deployment automation process.

3. The HTTP Request Routing File

   The code is the same as the local hosting one, the comments.route.js file defines the routes for handling HTTP requests related to comments in the Firebase function app. It uses Express.js to define and handle these routes. Its role is as following:

   • Routing: Defines endpoints for creating, updating, and deleting comments.
   • Middleware: Uses Express.js middleware to handle requests and responses.
   • Database Operations: Interacts with the MongoDB database to perform CRUD operations on comments.

   comments.route.js

4. Database Collection Modeling

   Same as the local hosting, the Comment.js file in the Models folder defines the schema including collection name, attributes and value types that will be stored in my MongoDB collection.

   Comment.js

5. Dependency Configuration for Deploying the Backend Function

   Comparing with the dependency for local hosting, the requirement is more specific and complex for deploy Firebase function. Here is the breakdown of the key part in the dependency code:

   • These scripts in the scripts section are used to automate various tasks related to development, testing, and deployment of the Firebase functions.
   • When testing with local hosting, I found mongoose has compatible issue with the older version of Node.js, and somehow with the latest v.23 version as well. The package has no problem with v.22 in the end, therefore I specify the Node.js engine version here to avoid any issues of incompatibility.
   • Making sure all the packages that the index.js is depending on are included in the dependencies section.
   • The devDependencies section lists the development dependencies for the project. These packages are only needed during the development and testing phases, not in production.
   • The "private": true field indicates that the project is private and should not be published to the npm registry. This setting is primarily used to prevent accidental publication of the package.

   package.json

Step 06 | Setting up GitHub Action workflow for testing deployment

firebase-hosting-deploy.yml

1. The typical format of a GitHub Action Workflow starts with on section followed by jobs section.
2. In the on section, the trigger behaviour will be defined. Here I simply push the commits into the main branch as there is no collaboration and sophisticated workflow to edit my web code. ( However, there is a plan to stage the development & deployment of my other project with more through approach with GitHub Action. Thus, please watch this space! ). In order to prevent the updated content of my website from directly being deployed and going live, I am create a manual trigger workflow_dispatch.
3. In the jobs section, the task defined here focuses on the building workflow to deploy the web hosting and API function to firebase.
   • Checkout code: Uses the actions/checkout@v2 action to check out the repository code.
   • Set up Node.js: Uses the actions/setup-node@v2 action to set up Node.js version 22.
   • Install dependencies: Changes directory to functions and runs npm install to install Node.js dependencies.
   • Install Firebase CLI: Installs the Firebase CLI globally using npm install -g firebase-tools.
   • Set environment variables: Creates a .env file in the functions directory and sets environment variables (DB_USERNAME and DB_PASSWORD) using secrets from the repository.
   • Authenticate with Firebase: Deploys the functions and hosting to Firebase using the Firebase CLI and an authentication token stored in the FIREBASE_TOKEN secret.

Step 07 | Using my own domain

Image source: Firebase Documentation / Hosting

1. Buying my own domain

   I started my DNS provider hutting by finding the top 5 providers. I discovered the following ranking of those providers according to Top10.com:

   • HOSTINGER
   • SCALAHOSTING
   • FASTHOSTS
   • IONOS
   • BLUEHOST

2. Choosing IONOS

   I narrowed the options down to between Hostinger and IONOS based on how many reviews that was given about these 2 providers. In the end I chose IONOS. I have to be honest, it was because it was the cheapest and most straight forward when I was trying to choose my domain. Technically, Hostinger has better service plan but the scenario is mainly based on if the DNS will be shared between multiple website and other benefits regarding scalability ( watch this video if you want to know more about the differences between IONOS' offering and Hostinger's). For my web project, it is a fairly simple project , and I just want to experiment my first project about full-stack development, I think IONOS suits my requirements for now.

   1. Go to IONOS main page and sign in
   2. Click “Add product” after you have successfully logged in.
   3. Search the domain that you prefer and chose the one that is not registered and matches your budget.
   4. Following the checking out steps and complete the DNS service purchasing.

3. Add Your Custom Domain
   1. Go to Firebase Console: Open the Firebase Console and select your project.
   2. Navigate to Hosting: In the left-hand menu, click on "Hosting".
   3. Add Custom Domain: Click on "Add custom domain" and enter your custom domain name.
4. Verify Domain Ownership
   1. Get Verification Code: Firebase will provide you with a TXT record that you need to add to your domain's DNS settings to verify ownership.
   2. Add TXT Record: Go to your domain registrar's website (IONOS in this case) and add the provided TXT record to your domain's DNS settings.
      1. Go to IONOS dashboard and choose “Domains & SSL”
      2. Click the 3 dots icon at the far end on the right of your domain record, and then choose “Show details”
      3. Choose “Modify DNS settings ” under the list item called “Target”
      4. The record of your DNS will show up. Adding in the record that firebase has requested in the verification instruction.
   3. Verify: After adding the TXT record, go back to the Firebase Console and click "Verify".
5. Update DNS Records
   1. Get A Records: Firebase will provide you with A records that you need to add to your domain's DNS settings.
   2. Add A Records: Repeating the same steps for “Verifying Domain Ownership”. Go to your domain registrar's website and add the provided A records to your domain's DNS settings.