Building Azure Apps in Visual Studio 2017 Community

Azure is Microsoft’s cloud platform, a competitor to AWS, and the future of the IT world.  Inside Azure, I can do everything I could do from inside any workplace IT center, from the systems and access management, to collaborative software engineering. For this article, I will be showing you a small sliver of the last item. For this article, I will be assuming that you have already signed up for a free Azure account.

In this article, we will be exploring how to create a software application running in Azure that responds to an Http request. For this exercise, I will be using Visual Studio Community 2017.

Step 1. Getting Visual Studio 2017 Community and Azure Workload

If you haven’t installed Visual Studio 2017 Community then do that now. Make sure that when you are selecting your workloads from the install options, you select at least the “Azure development” option.

Adding the Azure Workload to Visual Studio 2017 community

If you have already installed VS 2017 Community then you will need to either:

Go into your apps and open up the Visual Studio Installer for 2017. Then select “modify” and then add the workload “Azure development” if you do not already have it installed.

Or, open Tools and Features which will open the prompt to add the  “Azure development” workload. Having Tools and Features in the menu is dependent on having the latest release updates for Visual Studio 2017 Community. In my case, I had installed this edition of VS before the option was added and therefore needed to use the VS installer to add the proper workloads.

Step 2. Install Azure Web Jobs Tools

Open Extensions and Updates from the Tools menu. Select Online and type azure in the search box. Install the Azure Functions and Web Jobs Tools.

Step 3. Install the Azure Functions CLI

At the time of writing this article, this is still a requirement. I would expect this to be resolved soon though. Once you have the workload and the Azure Functions and Web Jobs Tools installed, you will probably be greeted by the message below, just select Yes and move on.

We are now set up to actually start building an app now.

Step 4. Creating the Hello World Azure app

Open up VS 2017 Community and start a new project using the Azure Functions template. I named mine HelloWorld, you can name your’s whatever you would like.

Next, open up your local.settings.json file and replace this code:

{
    "IsEncrypted": false,
    "Values": {
        "AzureWebJobsStorage": "",
        "AzureWebJobsDashboard": ""
    }
}

with the code below:

{
    "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentTemplate.json#",
    "contentVersion": "1.0.0.0",
    "parameters": {
        "appName": {
            "type": "string",
            "metadata": {
                "description": "The name of the function app that you wish to create."
            }
        },
        "storageAccountType": {
            "type": "string",
            "defaultValue": "Standard_LRS",
            "allowedValues": [
                "Standard_LRS",
                "Standard_GRS",
                "Standard_RAGRS"                
            ],
            "metadata": {
                "description": "Storage Account type"
            }
        }
    },
    "variables": {
        "functionAppName": "[parameters('appName')]",
        "hostingPlanName": "[parameters('appName')]",
        "storageAccountName": "[concat(uniquestring(resourceGroup().id), 'azfunctions')]",
        "storageAccountid": "[concat(resourceGroup().id,'/providers/','Microsoft.Storage/storageAccounts/', variables('storageAccountName'))]"
    },
    "resources": [
        {
            "type": "Microsoft.Storage/storageAccounts",
            "name": "[variables('storageAccountName')]",
            "apiVersion": "2016-12-01",
            "location": "[resourceGroup().location]",
            "kind": "Storage",
            "sku": {
                "name": "[parameters('storageAccountType')]"
            }
        },
        {
            "type": "Microsoft.Web/serverfarms",
            "apiVersion": "2015-04-01",
            "name": "[variables('hostingPlanName')]",
            "location": "[resourceGroup().location]",
            "properties": {
                "name": "[variables('hostingPlanName')]",
                "computeMode": "Dynamic",
                "sku": "Dynamic"
            }
        },
        {
            "apiVersion": "2015-08-01",
            "type": "Microsoft.Web/sites",
            "name": "[variables('functionAppName')]",
            "location": "[resourceGroup().location]",
            "kind": "functionapp",            
            "dependsOn": [
                "[resourceId('Microsoft.Web/serverfarms', variables('hostingPlanName'))]",
                "[resourceId('Microsoft.Storage/storageAccounts', variables('storageAccountName'))]"
            ],
            "properties": {
                "serverFarmId": "[resourceId('Microsoft.Web/serverfarms', variables('hostingPlanName'))]",
                "siteConfig": {
                    "appSettings": [
                        {
                            "name": "AzureWebJobsDashboard",
                            "value": "[concat('DefaultEndpointsProtocol=https;AccountName=', variables('storageAccountName'), ';AccountKey=', listKeys(variables('storageAccountid'),'2015-05-01-preview').key1)]"
                        },
                        {
                            "name": "AzureWebJobsStorage",
                            "value": "[concat('DefaultEndpointsProtocol=https;AccountName=', variables('storageAccountName'), ';AccountKey=', listKeys(variables('storageAccountid'),'2015-05-01-preview').key1)]"
                        },
                        {
                            "name": "WEBSITE_CONTENTAZUREFILECONNECTIONSTRING",
                            "value": "[concat('DefaultEndpointsProtocol=https;AccountName=', variables('storageAccountName'), ';AccountKey=', listKeys(variables('storageAccountid'),'2015-05-01-preview').key1)]"
                        },
                        {
                            "name": "WEBSITE_CONTENTSHARE",
                            "value": "[toLower(variables('functionAppName'))]"
                        },
                        {
                            "name": "FUNCTIONS_EXTENSION_VERSION",
                            "value": "~1"
                        },
                        {
                            "name": "WEBSITE_NODE_DEFAULT_VERSION",
                            "value": "6.5.0"
                        }
                    ]
                }
            }          
        }
    ]
}

I am not sure why this is required but, as of the writing of this tutorial, if you attempt to publish without these settings, VS will throw an error. Hopefully, Microsoft will fix this soon and then I will remove this step.

Next, we will add an Azure function. Visual Studio provides some pre-built templates to start us out. For our example, select “Http Trigger”, because our application will be responding to Http requests. You will see a class HelloWorld.cs and it’s is prefilled with all the basic code to handle a Http request. If we debug this, a console window will open and near the bottom, a Url next to HelloWorld will be shown.

Copy the localhost line, paste into a browser and add “?name=[your name]”, hit enter and you should see a screen like this.

If you did see the expected message, great! We are now ready to publish our application.

Step 5. Publishing to Azure

Right click on our HelloWorld project and select Publish. At the publishing window, select publish again. Another window will open up and you will need to sign into your Microsoft account which has Azure enabled. You will need to provide a unique App Name, this is unique across Azure. For my example, I entered HelloWorld111, you will need to choose a separate unique App Name. I assume when you signed up you also selected the free trial, this selection should be shown in the Subscription field. For Resource Group, click new, and enter a resource group. I’m lazy so I entered HelloWorld111Group and for App Service Plan, I entered HelloWorld111Plan.

Click “Create”.

Now, go ahead and log into your Azure account. Once logged in, inside your Azure Dashboard you will see your App Service and App Service Plan listed. Click on your App Name, then once the screen reloads under Functions (Read Only) you will see that name you gave your Azure function earlier. Click on it.

Once you have clicked your Azure function, you will notice that your function.json file has been opened.

Inside this window, you can test your function again out on the Azure workspace. On the right select Test. Then add a parameter, enter “name” into the name/key field and your name into the value field. Click run and you will see that some log lines have been generated and a Status 200 is shown. This is all good.

To test in the real world, click on “Get function URL” near the top of the window and copy the Url. This URL is live, it is your actual API endpoint for this application. If you paste this into a browser adding on to the end “&name=[your name]”, you will see the same result we got back earlier when debugging fromVisual Studio.

My Url is: https://helloworld111.azurewebsites.net/api/HelloWorld?code=layS4St/XHQWYo8TA70j6xKlv8zwFJN3AQWGOiyVc/ONARLZgeoudA==&name=patrick

I will leave this up for anyone interested in seeing the success message.

Conclusion

You have now made an Azure application, happy coding!

A Web Developer by trade, find me on Github A motorcycle enthusiast at heart. Most days I'd rather be in the woods anywhere.