Staying relevant has always been essential for everyone regardless of the profession. It will help us perform better and more efficiently. We will need to grow faster, if not on par with the technology growth. With that, it will be wise to document the journey.

I came across an article written by Gwyn , and I thought it’s pretty interesting to validate my skills and knowledge. Also, it could help me build up my portfolio to showcase in the future. Besides, some hands-on challenges will definitely help sharpen my problem-solving ability.

Without further ado, let’s take a quick look at the objective of this challenge:
The project’s objective is to upload a static web page with a visitor counter with its count stored in a database. There should be source code management and CI/CD pipeline integrated.

These are the technologies involved:

1. HTML/CSS/JavaScript
2. Visual Studio 2019
3. Microsoft Azure
   1. Azure Blob Storage
   2. Azure Content Delivery Network (optional)
   3. Azure Function App
   4. Azure Cosmos DB
4. GitHub

I always prefer to tackle problems by breaking them into small steps:

1. Setup a Git Repository for all the project codes
2. Create a basic HTML page with enlightening contents
3. Once working locally, deploy to Azure Blob Storage - Static website
4. Create an API via Azure Function App - HTTP Trigger using Visual Studio
5. Connect the static website with the API via JavaScript
6. Once working locally, connects to Azure Cosmos DB for retrieval and update
7. Once connected, deploy the code to Azure Function App.
8. Ensure that Azure Function App works after deployment
9. Create a Test project for the API and ensure the application does not break after changes
10. Add CI/CD Pipelines using GitHub actions
11. Local to GitHub to Blob Storage (HTML/CSS/JS)
12. Local to GitHub to Azure Function App (API)
13. Include testing into the Azure Function App deployment

I have encountered some minor hiccups:

1. This page isn’t working (Unable to connect to Azure Cosmos DB)
   *Resolved by adding the Remote value for Azure App Service setting

2. Type Error: Failed to Fetch when using Fetch API
   *Resolved by adding required domain names into the Allowed Origins under CORS for the Azure Function App

It has been a while since I last developed a solution, and it has reignited my passion for development work. With that, I have concluded the challenge with a successful note.

Please feel free to drop me a comment/feedback/question if you have done a similar challenge.

I look forward to the next project.