Create Your First Web App in Azure!

Introduction

We talked about Azure App Service and advantages of Web App in our previous blog titled ‘Web App Hosting and App Services options in Azure.’

In the upcoming series of blogs, we will deep dive into Web App Development by discussing various areas like app creation, deployment, performance monitoring and security through series of blogs.

So, let’s kick start our journey by creating our very first Web App on Azure!!

Azure provides numerous options to create Web Application, out of which some simpler opportunities for developers would be to use developer platforms like Visual Studio and Eclipse.

In this blog, we’ll discuss the procedure to create and publish web app through Visual Studio.

About Azure App Service Plan and Resource Groups

Before moving to the development, let’s first understand a few essential concepts involved in Web App Hosting on Azure.

  • Resource Group

It is a logical container that holds related resources for an Azure solution. The resource group can include all the resources for the solution, or only those resources that we want to manage as a group. For example, Resource Group can contain a Web App and its Database.

  • App Service Plan

Web app under App Service always runs in azure within an App Service plan or Hosting Plan. It defines a set of computing resources for a web app to run.

With the creation of the App service plan for a particular region, a set of compute resources are created. The apps placed into the created App Service plan will run as per the defined compute resources App Service plan. Each App Service plan defines region, number, and size of VM instances and pricing tier.

Deploy Web Apps to Azure using Visual Studio

Microsoft Visual Studio can be used to create web apps based on a series of technologies like Node.js, .NET, Python, etc. J2EE based Apps can be built using Eclipse IDE.  In this tutorial, we will deploy sample Node.js application through Visual Studio.

  • Prerequisite
  1. js installed
  2. Visual Studio 2017 Community edition
  3. Active/Trial Azure Subscription
  • Steps to create a Node.js app in Visual Studio
  1. In Visual Studio, Click on File -> New -> Project.
  2. Select JavaScript -> Node.js
  3. Select Basic Azure Node.js Express 4 application
  4. After App creation, change index.js
  5. From Solution Explorer, open index.js and on line 7, change the title from Express to Azure Web App.
  6. Once you run it locally, you will see the app homepage as below.

  • Publish Application to Azure
  1. In Solution Explorer, right-click on the project and select Publish.
  2. On Publish panel, select Microsoft Azure App Service.
  3. After authentication, on App Service window, select New.
  4. On Create App Service, specify the name for the Web App. Azure checks the name to be unique.
  5. Create new or select existing Resource Group and Hosting Plan
  6. Configure Hosting Plan for the App
  7. After clicking Create, App gets created on Azure. In All Resources, we can see the Web App, but as we haven’t published it yet, we will see only the default page of the Web App.
  8. After creating a resource, on the Connection page, Azure provides four options for publishing the Application. For our sample app, let’s select Web Deploy.
  9. The default parameters will populate the fields. We can modify these fields if required or leave it as it is. To test that the connection works correctly, click on Validate Connection.
  10. In the Settings page, Configuration types are Debug and Release. We have selected Release. We haven’t used any database for our sample app, so it is showing no database found.
  11. In the last section, we can preview and confirm the changes that affect the Azure environment.
  12. On clicking the publish button, the Sample App would get published on Azure Web App which we have created earlier. After completion Visual Studio shows Publish succeeded message and Web Publish Activity
  13. Visual Studio automatically opens our new Azure Web App in the browser.
Concluding Note

In this blog, we have gone through the steps of creating Web Apps for Node.js using Visual Studio and could see how simple it is to publish it quickly on Azure. Stay tuned for our next blog, where we will discuss creating J2EE App in Azure using Eclipse.