How to Develop and Host a Proof-of-Concept Prototype on Azure App Services for Web Apps



Guest blog from Microsoft Student Partner Fangfang Hu from Imperial College London.

Fangfang Hu is an Electrical and Electronic Engineering student at Imperial College London

clip_image002

Introduction

I will be starting my second year in fall. I am from Singapore, where I had worked with a few research institutions and corporations in areas relating to hardware and software. Working with different types of technologies on various platforms has always been of great interest to me, and over the years I have since been involved in using technology for purposes ranging from commercial to research and social entrepreneurship.

LinkedIn: https://www.linkedin.com/in/fangfanghu/

GitHub: https://github.com/ffhu1

In this tutorial, you will be introduced to creating a proof-of-concept prototype for a web app, specifically a static HTML site, and subsequently hosting it on Azure App Services.

We will be using Visual Studio Community 2017 as our editor.

Setting Up Your Project

Before you begin, ensure that you sign into your Azure account so as to be able to host your web app on Azure.

Start by creating a new project in Visual Studio.

clip_image004

Under Visual C#, select Web, then ASP.NET Web Application. Name your project and proceed by clicking OK.

clip_image006

For our purposes, we will be creating a static HTML page that utilises basic HTML, CSS and JavaScript through Bootstrap, hence an Empty template would suffice.

Bootstrap

Bootstrap is an open-source front-end web framework for developing responsive web sites, utilising HTML, CSS and JavaScript. It is ideal for designing and creating websites and web applications that can serve as proof-of-concept prototypes for presenting your idea.

In this tutorial, we will be creating our web site using Bootstrap in Visual Studio.

In the Solution Explorer, select your project (which is named MyWebApp in this tutorial).

Under the menus, under Project, select Manage NuGet Packages.

clip_image008

In the NuGet tab, go under Browse and search bootstrap. Select bootstrap and click Install.

clip_image010

After installation, you will see now files added for Bootstrap under Content. You will be referencing these files when as you create the pages for your web site.

Creating a Page

clip_image012

Right-click your project and choose Add, then New Item. Select HTML Page and click OK.

Under the <head> element, we need include these tags.

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<link rel="stylesheet" href="Content/bootstrap.min.css"/>

<script src="Scripts/bootstrap.min.js"></script>

<link rel="stylesheet" href="Content/bootstrap-theme.min.css"/>


The first link tag loads in the Bootstrap CSS files, while the script tag loads in the JavaScript elements.

The last link tag retrieves the Bootstrap default theme. This can be changed depending on the design you have in mind for you page.

The title

clip_image014

This is how your <head> element should look like which will allow you to refer to Bootstrap files when creating your page.

Designing Your Page

Bootstrap allows for responsive web design, which means that your page will change depending on the size of the browser used to view the page.

This is done by dividing the page into 12 columns where text or other elements can appear. For more details about the various components you can use in your HTML page through Bootstrap, visit the link below.

Bootstrap components: http://getbootstrap.com/components/


Example

Here is an example of a static HTML page created using Bootstrap.

clip_image016

clip_image018

clip_image020

Source code: https://github.com/ffhu1/DONACO

Publishing Your Web App on Azure App Service (Visual Studio)

First, ensure that you are signed in to your Azure account.

Under your project name, go to Connected Services, then Publish.

clip_image022

Select Microsoft Azure App Service and Create New, then click Publish.

clip_image024

Here, you can deploy your web app on Azure App Services.

clip_image026

Additional resources offered through Azure are stated under the Services tab. For our purpose in this tutorial whereby we are deploying a simple static HTML page, this is not required.

Click Create once you are finished.

The URL of your web app deployed through Azure App Services will be:

http://[name of your app].azurewebsites.net/

Deploying Your Web App (Azure Portal - GitHub)

The Azure portal also allows for the deployment of your Web App through a number of ways, including through your GitHub repository.

For this tutorial, we will now look at deploying an ASP.NET app in a GitHub repository on Azure App Services (previously, we looked at direct deployment through Visual Studio).

Under App Services, select Add. Choose Web App.

clip_image028

clip_image030

Click Create.

clip_image032

Enter the name of your web app, and click Create.

clip_image034

You will then be able to access an overview of your App Service on the Azure portal. Under Deployment, go to Quickstart. Here, you will be able to choose which development stack to use to deploy your app.

For our tutorial, we select ASP.NET.

clip_image036

Here, we can automatically deploy our app (which in this case is an ASP.NET app) from GitHub (or any other such providers) by selecting Cloud Based Source Control.

clip_image038

As can be seen, we can select GitHub under Deployment Option.

clip_image040

Set up authorization for your GitHub account, then you will be able to choose the repository which you would like to deploy your web app from.

Conclusion

In this tutorial, we looked at using Bootstrap to create a simple proof-of-concept prototype for a web app as well as how to host your web app on Azure App Services, either through Visual Studio or through the Azure portal. The variety of Azure services available for web apps and other applications allows for the creation of simple yet comprehensive solutions. Coupled with the comparatively low cost of said services, it is thus easy for one to deploy one’s own solutions on the cloud.

References

Learn more about Azure Web Apps:

https://docs.microsoft.com/en-us/azure/app-service-web/

Get your FREE Student Azure Account https://imagine.microsoft.com/en-us/Catalog/Product/99 

Develop in the cloud at no cost with Azure App Services, Notification Hubs, SQL database, and more.

Activate your Visual Studio Dev Essentials Account https://www.visualstudio.com/dev-essentials/

Free access to cloud services such as compute and storage, backend services for your mobile or web apps, services for IoT, machine learning, and analytics.
  • Azure credit ($300/year)*

  • Visual Studio Team Services account with five users*
  • App Service free tier
  • HockeyApp free tier
  • Application Insights free tier
Comments (0)

Skip to main content