Welcome to the final chapter of my three-part blog series on creating a personal web portfolio! In this post, i will talk about deployment and hosting the application on firebase. If you've missed the earlier steps, dive in to ensure you're up to speed on crafting your online showcase. Let's wrap up this portfolio journey! 🚀

Deployment

Having completed the development of your personal portfolio, the next step involves deploying it online so it can be accessed by yourself and others.

Creating your firebase account

Setting up a Firebase account is a straightforward process. If you already have a Google account, navigate to https://firebase.google.com/ and log in using your Google account credentials.

It's important to note that Firebase operates on a billing model, charging for the services it provides. However, there exists a predefined threshold for both traffic and data usage, referred to as the "free tier." Our objective is to stay within this free tier.

By hosting our website on Firebase, especially considering the static nature of the site, the anticipated traffic and usage remain below the free tier limits. This means that we can effectively leverage Firebase for hosting without incurring service charges.

Creating the firebase project

Access the Firebase console and initiate a new project. Upon entering the project name, toggle off Google Analytics by clicking the switch icon.

Proceed to the project console, select "All Products," and then navigate to "Hosting." Click on "Get started" within the Hosting section. Follow the outlined steps to seamlessly integrate Firebase into your application and execute the deployment process on the Firebase platform via the command line.

You can watch this video for a more step-by-step demonstration of deploying your application to firebase 👇️.

Taking deployment a step further

Having accomplished the deployment of your Angular application on Firebase, you might assume it's a wrap, right? Well, only half right. Inevitably, a few days down the line, you'll think of enhancements to your deployed portfolio. The conventional routine involves making changes, committing them, pushing to the GitHub repository, and then executing firebase deploy for deployment. However, this manual process can become quite a pain, particularly when iteratively refining your project's codebase.

You can optimize the deployment workflow for your Firebase application by implementing automation through a predefined action triggered by push events in your GitHub repository. Automating workflows is essential for minimizing manual, repetitive tasks, and accelerating feature integration and delivery, which are core principles of CI/CD. And GitHub Actions is a free tool to facilitate this streamlined and automated deployment process.

GitHub Actions automates workflows in your GitHub repository. It allows you to define custom CI/CD (Continuous Integration/Continuous Deployment) processes directly in your repository. With predefined or custom workflows, GitHub Actions helps automate tasks like building, testing, and deploying your code, enhancing efficiency and development experience.

Firebase makes it easy to create GitHub Action scripts for automated deployment through the command line. For a comprehensive walkthrough, refer to the linked video for a detailed demonstration on the setup process.

Summary

Upon completing the development of your Angular-built web portfolio, the next step is deployment, and Google Firebase stands out as a one hosting service option. Leveraging Firebase's "free tier" enables you to host your web portfolio without incurring service fees. The Firebase Command Line Interface (CLI) offers user-friendly commands for straightforward deployment.

Furthermore, GitHub Actions can be employed to run workflows for automating tasks such as application testing and deployment to Firebase. This integration ensures an efficient and automated deployment pipeline for your Angular web portfolio.

If you're curious to see the finished product, here's a link to my web portfolio!