Skip to content

04b. Azure Deployment (App Services: Web App & API App)

Jump to bottom
Crystal Tenn edited this page Mar 2, 2018 · 1 revision

We will use Visual Studio to deploy to Azure in this tutorial. This can also be done by packaging up the files and uploading manually to Azure. Or, you could do it via an automated CI/CD (Build and Release) process which will be shown in the next sections of the tutorial.

Sign up for a free Azure account here if you do not already have one or MSDN (Visual Studio Subscriber): https://azure.microsoft.com/en-us/free/ Make sure to use the same email address that you used/will use for VSTS.

Front-end Angular + Back-end API projects

  1. Open the solution in Visual Studio, if it is not already opened. Login to Visual Studio with the same email address that you used to signup for your Azure account.

  2. Right click on the API project and choose Publish. Alt text

  3. Choose an App Service. Alt text

  4. Fill in all the settings: add in a name, choose the subscription, create a new resource group. For the App Service Plan: choose a name, the closest location to you and Free. Then on the main modal click Create. Alt text If you are on the ToDoListAPI project, make sure you have API selected. Alt text If you are on the ToDoListAngular project, make sure you have Web App selected. Alt text Alt text

  5. Make sure it shows up in the Azure Portal after giving it a few minutes to publish. Click on the API project to go to the overview (red arrow). Alt text

  6. Copy the URL of the API App Service as highlighted in the screenshot. Alt text

  7. Let's connect the front end to the API project. Open up the ToDoListAngular solution. Go to the web.config file of your front end ToDoListAngular project. Paste in the URL from the previous step. Alt text

  8. Let's do the same publishing to Azure for the front end project. Repeat steps 2-5, BUT do it on the front end ToDoListAngular project. Make sure on Step 4 you choose the right option of "Web App" for the Angular Web project.

  9. Verify once you are done Publishing that it is in the Azure Portal. Click on the App Service (red arrow in screenshot). Alt text

  10. On the Overview page, get the URL and copy it. Alt text

  11. Paste the URL into your browser and click on the Todo tab to see the Todo list. You should now have a working Azure App Service Web front end talking to an Azure App Service API which connects to Azure SQL. Alt text

Tutorial project created by Crystal Tenn and Viktor Dikov. Feel free to use this project as you wish! We just want to help others learn :)

Clone this wiki locally