Setting up an Azure HTML 5 web app with source control integration

In this article I will show to create an HTML 5 Web App in Azurefrom a template repository. We will then modify the repo and push out first files back into Azure.

Introduction

In previous articles 1, 2, 3, 4 I have been showing how to use napa development tools to create. In this article I will demonstrate how to create a basic Azure app which will host our files for us.

Azure Web App

From your Azure portal you can create a new web app

z1

In this case we will create xomino.azurewebsites.net. As we are doing nothing more than hosting files right now, we will create it as an empty HTML5 container.

Select to cfreate a web app from existing gallery

a1

Find HTML5 Empty Web App

b1

Moving to stage two give it a name and create

b2

Once the app is created you can then add your files to it a number of ways – my personal preference is to deploy from a git repo.

Web App Dashboard

When you click on the new link you will see the web app dashboard

e1 e2

From there we can set up Integration with Source Control

Hooking Azure up to the local repo

When you select connect to local repo the first time you will be prompted to create a username and password. This is so that you can FTP your files up to azure.

z8

Once that is created you will be presented with a screen to integrate your Git solution (manual or otherwise) with Azure.

b1

I use Webstorm for my development, so used the git tools in there to clone the repo down from Azure

There is nothing more than and HTML file and a favicon…

e3

I then:

  • messed a little with index.html
  • added my Files from the add-in
  • committed them all
  • pushed them back up to azure.

e8

Immediately the azure dashboard updates with a deployment message – once the deployment is complete (which is seconds fast) you will see an arrow top right. Clicking on it shows you the deployment process (3 seconds)

e4

The website is now available. Clicking back on the dashboard we now see activity. Over on the right we can click to open the Azure portal Dashboard for this web appe5

Opening up the website (http://xomino.azurewebsites.net/) we can see the index.html page I messed with

e6

 

And if we navigate to the Add in file folder it exists, but doesn’t do anything (yet)

e7

Conclusion

In this article we have seen how to:

  • Create our first Azure HTML Web App
  • Attach the app to source control locally
  • Add our Outlook Add-in files,
  • Commit and push back to Azure
  • Open the files directly in Azure

The hosting of the Outlook files is crucial for them to be made available to a wider Exchange audience in the future.

NOTE

There is no security associated with this site – it is wide open to Anonymous users. That is probably good in the long term for an Add-in

Advertisements

2 thoughts on “Setting up an Azure HTML 5 web app with source control integration

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s