GPS's Azure Resume

This is my Cloud Resume Challenge built on Azure. It's a static website hosted on Azure Storage, with a visitor counter built on Azure Functions. The website is built with HTML, CSS, and JavaScript. The visitor counter is built with .NET and Azure Functions.

If you'd like to build your own, here is the YouTube video video.

Table of Contents

• Demo
• Pre-requisites
• Structure
• Setup
• Frontend Resources
• Backend Resources
• Testing Resources
• CI/CD Resources
• TO DO
• Contributing
• License

Demo

View it live here

Pre-requisites

I leverage Dev Containers for my development environment. If you'd like to use it, you'll need to install Docker and the Dev Containers extension for VS Code.

Structure

• frontend/: Contains the website.
  • main.js: Contains visitor counter code.
• api/: Contains the .NET API deployed on Azure Functions.
  • GetVisitorCounter.cs: Contains the visitor counter code.
• .github/workflows/: Contains CI/CD workflow configurations.
• .devcontainer: Contains the container configuration for VS Code.

Setup

1. Make sure Docker is running.
2. Open the project in VS Code.
3. Press Ctrl/Cmd + Shift + P to open the command palette.
4. Type "Reopen in Container" and select:
   • .NET API container for working with the Azure Functions backend.
   • JS Frontend container for working with the frontend.
   • Tests container for running tests.
5. VS Code will reload and you'll be in the container.

Frontend Resources

The front-end is a static site with HTML, CSS, and JavaScript. It includes a visitor counter that fetches data via an API call to an Azure Function.

• I used this template to create my site.
• This article explains how to use the JavaScript Fetch API to make an API call.
• Azure Storage Explorer is a handy tool for working with Storage Accounts.
• This is how you can deploy a static site to blob storage.

Backend Resources

The back-end is an HTTP triggered Azure Function with Cosmos DB input and output binding. The function retrieves a CosmosDB item, increments it, saves it, and returns its value to the caller.

• Create a Cosmos DB account
• Create an HTTP triggered Azure Function in Visual Studio Code
• Azure Functions Cosmos DB bindings
• Retrieve a Cosmos DB item with Functions binding
• Write to a Cosmos DB item with Functions binding
• Enable CORS with Azure Functions locally and once it's deployed to Azure.

Testing Resources

Testing is important. Though my tests are simple, they exist. I am using .NET but some of these resources will apply to any language.

• Getting Started with xUnit.net
• Testing Azure Functions

CI/CD Resources

• Deploy a blob storage static site with GitHub Actions
• Deploy an Azure Function to Azure with GitHub Actions
• Implement .NET testing in GitHub Actions

TO DO

• Implement tests into CI/CD.
• Create IaC files.
• Improve tests and tests documentation.

Contributing

Contributions are welcome! Please read the contributing guidelines first.

License

This project is licensed under the MIT License - see the LICENSE file for details.