In the next part of this series, I wrote the Azure Function to update the visitor counter in a Cosmos DB. I also added JavaScript to the website to call the Azure Function and display the visitor counter. This part was trickier for me as I was not as familiar with Cosmos DB or JavaScript.
Links to the full series:
- Azure Resume Challenge – Part 1: Creating the website and Azure resources
- Azure Resume Challenge – Part 2: Integrating CDN and HTTPS
- Azure Resume Challenge – Part 3: Adding the Visitor Counter (this post)
- Azure Resume Challenge – Part 4: Deploying with GitHub Actions
Using CosmosDB to store Visitor Count
In the challenge announcement post, Gwen suggested using CosmosDB to store the resume website’s visitor count. Normally I would not have used this, but Azure offers a free tier for CosmosDB with limited compute and storage capabilities.
I created the CosmosDB database using Core (SQL) as the API. I created the container to store my one record of the visitor count. The record has an id equal to “1” and a visitorCount property, which will be read and updated by an Azure function.
{
"id": "1",
"visitorCount": 8
}
The setup for a CosmosDB instance can be a bit complicated, and it was for me as I’m not as familiar with the service. In the future, I might simplify this by just using storage account table service.
Writing the Azure Function
Writing the Azure function was not particularly difficult. I took a CloudSkills course from Matt Allford on the topic and have previously written about Azure Functions:
- Getting Started with Azure Functions Tutorial [Example-Driven Guide]
- How to Export Teams PSTN Usage Records with Azure Functions
I did use the Azure CLI to create the Azure Function resource instead of using the Azure Portal. I wrote the function using PowerShell but will probably challenge myself to use Python in the future. The function name needs to be globally unique as Azure appends “azurewebsites.net” to this name. I also used the existing storage account where I’m hosting the static website.
By default, the az functionapp create created the function using version 2, so I specified using version 3 instead. I disabled application insights as I don’t need that level of detail in logging my application.
az functionapp create --name func-jbtresume-prod-001 `
--resource-group azureresume-rg `
--storage-account stjbtazureresumeprod `
--consumption-plan-location westus2 `
--os-type windows `
--runtime powershell `
--runtime-version 7.0 `
--functions-version 3 `
--disable-app-insights true
I create an HTTP function that the website will trigger using a JavaScript API call. The function itself has an input and output binding to retrieve data from the CosmosDB instance and update the visitorCount property. I did add a SQL query to retrieve the one record from the database to limit the data returned.
Check out my function.json file in my GitHub repo showing the HTTP trigger binding and the input/output bindings for CosmosDB:
JeffBrownTech / azure-resume-project / backend / VisitorCounter / function.json
I did code the function in the browser instead of using VS Code. The function verifies if it retrieved the record from CosmosDB. If it did, the function adds one to the count and outputs the new count in the HTTP response and updates the record.
While troubleshooting the upcoming JavaScript script, I converted the response to JSON before sending it back. This action may not be required, but it’s working for now, so I will leave it (famous last words!).
Check out the full function in my GitHub repo:
JeffBrownTech / azure-resume-project / backend / VisitorCounter / run.ps1
Coding the Website’s JavaScript
The resume website should update the visitor counter each time the site loads. This action is accomplished through JavaScript code. I have not worked with JavaScript in any great detail, so this was the hardest part. I reviewed multiple articles and ended up primarily copying what Gwen has in her GitHub repo.
In the A Cloud Guru Discord server channel dedicated for this challenge, another person mentioned configuring CORS for the Azure Function. CORS allows JavaScript code running in a browser on a different host/domain name to interact with the backend, in this case, the Azure Function.
There are some default origins configured under API > CORS for the Azure Function. I removed all of these and added the resume website domain to the list. I’m not sure if this is the right configuration, so this topic is something to research in the future.
If you’ve implemented the JavaScript code to your website, you can view the code in action by accessing the JavaScript console in the browser. For the Microsoft Edge Chromium browser, use the shortcut key Ctrl + Shift + J. This opens the Console tab and shows the output of the running code.
Next Steps
Working with CosmosDB and adding the JavaScript code to the solution was the hardest part for me. It took a bit of research to figure out how to code retrieving and updating the visitor counter. I did add a dynamic message, so if the function fails, the site displays a message saying it is still running or has failed.
My final step is to integrate GitHub Actions to auto-update the solution in Azure. I primarily want to update the website files when I make a change. Hopefully, I can integrate updating the Azure Function code as well.
