Publish Your First Web Application to Azure Using Visual Studio

Visual Studio undeniable is one of the first class IDE and allows you create various applications across Windows, MacOS, Linux, web, cloud, mobile on Android & iOS, games and even holographic & mixed reality. Today, we are going to learn how we can create a web application & publish it to Azure using Visual Studio 2017.

Pre-requisites

 

Publish First Web Application to Azure

1. If you have Visual Studio 2017 (VS2017) installed with C# Web component on your machine, launch it. Today, we will use VS2017 Windows version.

2. On the top right corner of VS2017, you will see a Sign In button, click it to login with your Microsoft Azure account.

3. Enter your Microsoft Azure account information and click Sign In.

4. If you have successfully login, you would see your Microsoft Azure account’s username is appearing on the top right corner of VS2017.

5. Now, we will need to create a web application project. Select File -> New -> Project…

6.  VS2017 provides different kinds of projects and we need to select ASP.NET Core Web Application.

7. Enter your preferred name (eg. MyFirstWebApplication) and hit OK.

8. Let’s target for the latest ASP.NET Core with .NET Core 2.0. .NET Core 2.0 is a .NET library for cross-platform development and with that, ASP.NET Core is also able to run on any platforms, including Windows Server & Linux.

9. There are different kinds of templates available for selections, such as Web API, Web Application or even Single Page Application (SPA) with AngularJS. In this tutorial, let’s choose Web Application with MVC framework and click OK.

10. After a couple of seconds, you would see the following screen. Click “IIS Express” to test run the ASP.NET Core Web Application on your machine locally.

11. You should see your App is running on a localhost address which means it is deployed locally to your PC.

12. Now, we can publish this web application with standard template to Azure. Let’s go back to the VS2017 & stop debugging, click “Solution Explorer” on the right. You should see list of project files.

13. Right click your project’s name to bring up a context menu.

14. Click Publish…

15.Select Microsoft Azure App Service & Create New

16. Click “Publish” so we can proceed to publish to Azure.

17. It should generate some random App Name, you may modify according to your preference. If you are good to go, hit “Create”

18. There is some patience needed right now as it will take a while for the deployment preparation.

19. Once it is ready, the VS2017 should start publishing automatically and during this time, I guess you can take roughly a few minutes break.

20. When you come back from break, it should be finished publishing and a success message like below should appear! Click on the link in BLUE to launch the website.

21. Now, you noticed, the ASP.NET Core web application is running on Azure App Service, which ends with azurewebsites.net.

 

Awesome! Easy? Yeah, definitely, now you can start CODE! CODE! CODE! your web application!

Need an offline copy? Click here to download.

Don’t forget to follow me @
Twitter: @hmheng
More slides @ SlideShare: https://www.slideshare.net/HiangMengHengMarvin
Blog: http://hmheng.pinsland.com

You may also like...

1 Response

  1. January 6, 2018

    […] deployment of CMS/web app on Azure, […]

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: