realworldazure/azure-resume

azure-resume

Structure

• Frontend folder contains the website
• main.js contains the visitor counter code

High Level Steps

Create a blank project called azure-resume in GitHub.

Clone it into /repo/azure

Clone the source starter project into /repo/azure - Link to Starter project

Copy both backend and frontend projects from the cloned starter project into your azure-resume project

Edit the index.html in the frontend folder in the azure-resume project

Create main.js in the frontend folder of your project

Create the Azure Function using the steps outlined in the video

Add the AzureResumeConnectionString variable to local.settings.json

Create the Counter.cs file

Update GetResumeCounter.cs

Issues and updates

1. Functions Core Tools - you will need to install the core tools from here Functions Core Tools. I used the v4 the self-contained platform image on my Mac, and it worked just fine.

2. Dotnet SDK v6 - updates required to the CosmosDB HTTP trigger

3. Function Core Tools flaky behaviour - I experienced some intermittent behaviour on my Mac when running the function locally using Functions Core Tools. It would, on occaision not work, reporting a host configuration change error, usually because a file change had been detected. Even when it hadn't. If this happens to you, try running dotnet restore, followed by dotnet build. And here is an example of the function running OK locally, you should see something similar With the browser showing..

And if you are still having trouble, try the following..

Uninstall and reinstall Azure Functions Core Tools

# Uninstall Azure Functions Core Tools
npm uninstall -g azure-functions-core-tools@4

#Clear the NPM cache
npm cache clean --force

#Install Azure Functions Core Tools
npm i -g azure-functions-core-tools@4 --unsafe-perm true

# Install dependencies
npm install

# Start function with verbose logging

func start --verbose
Note your version of azure-functions-core-tools may be different to the latest at the time of writing *@4

Setting up CI/CD with GitHub

Steps are as follows

1. In the root folder of your project, create a .github directory
2. cd into it
3. make a directory called workflows
4. cd into it
5. create a frontend.main.yml file
   touch frontend.main.yml
6. create a backend.main.yml file
7. create the SP used for deployment
   az ad sp create-for-rbac --name <yourspname>-sp --role contributor --scopes /subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/azureresumedr --sdk-auth
8. Follow the steps in this article