Azure App Service With VS Code

So I came across the video above about a week ago when trying to figure out how Azure Web App Deployment works. It simplified the process of actually getting an application deployed especially since when I first deployed my web app to Azure I was having problems. With only one VS Code extension it is possible to deploy a web app through VS Code, there is no need to go through the confusing portal of Azure especially if you already set up the required resource groups and SQL Databases. But even then if these services are not set up it is possible to set these things up within VS Code within a matter of clicks. VS Code is a very versatile text editor, especially for web development.

Step by Step process:

  1. First you must install the Azure App Service extension on your vs code.

2. You’ll notice an Azure icon appear on your side bar, click on this and sign into your Azure account.

3. After signing in you will notice a blue upload button at the top of the tab click on this, you will be prompted to create a new web app or select a pre-existing one. You can name your new web apps once selected.

4. After creating a new web app you will be prompted to select a resource group or create one if none are available, once selected you will be asked to select an OS you wish your virtual machine to run on (Windows or Linux). When creating a backend application I found it to be problematic using a Windows VM and found it easier to use Linux.

5. Selecting a service plan: Depending on your needs you will be asked to select a service plan for your VM. For me personally, I had a free service plan when I signed up to Azure with £150 credits for free, you could select different plans if necessary but I chose this one as a test. You can see the list of plans offered below.

6. Select a location for the resources you wish to access, for example it would be beneficial to use a US location if you’re accessing these resources from the US.

7. After completing the steps above you will notice a pop up on the bottom left of your window which is letting you know that VS Code is creating your resources. Once this is done VS Code will automatically deploy your web app to the resources you just created. If you look back at the Azure tab you will notice your service plan selected along with the resource groups. From this tab, you are able to do a lot of things with the deployment of your web app, if you right-click on the service you are able to open a debug console that outputs the log streams of your web app allowing you to see what is happening under the hood of the application.

Leave a Reply

Your email address will not be published. Required fields are marked *