Use NPM and gulp build tasks to support Continuous Integration with VSTS and Azure for an AngularJS app


Interesting stuff from Matt, will have to incorporate this into the Invoice Form Application.

Moopoo

Introduction

This is the first in a series of posts will take you through the steps required to take a static website, in my case an Angular SPA and deploy this to an Azure App Service (Web App) via Visual Studio Team Services (VSTS). The Angular SPA is secured by ADALJS and the last part of this series will help us use gulp tasks within VSTS to configure the Angular app for different environments.

The application is built using Visual Studio Code all in HTML and JavaScript, so no Visual Studio and no VS builds. The aim is that when we check code into VSTS source control a build task will run and deploy this into Azure for us. Although my app is written in Angular, only the last post makes actual reference to this and shows anything Angular specific. Your app could be written with any framework you like…

View original post 489 more words

Dev Diary Entry 1: Azure Web App with MVC WebAPI, Angular and Azure DocumentDb


Introduction

This is the first time that I have tried writing a developer diary. So I would really appreciate it if you could let me know if you find it useful.

I find when I start building an Azure based application that I forget what I had to do the last time.

At the moment, my career has been working a lot with SharePoint and I want to move over to doing more Azure stuff. However, until I actually start doing more Azure applications then the process of building applications in Azure is not going to flow.

So this diary is for me to remind myself of what I did, plus I want to be completely transparent. When I find a problem or hit a blocker (no matter how stupid it is) I am going to try explain what it was, what I tried to do to fix it and hopefully the final fix.

It should be interesting to see where the application goes.

 

So what are we going to build?

Well currently I use a product called Microsoft InfoPath to manage my invoices to customers. InfoPath is no longer being worked on and Microsoft have said that it will not be supported after 2023 I thought why don’t I build something that a find useful and use that as an experience to learn. So here we are.

So we are going to build an Invoice management system, which allows someone to create, edit, view and publish an Invoice as a PDF into a SharePoint Online document library.

There are a load of other things that I am thinking about that would be useful, like reminders to send out invoices and being able to integrate with time management applications like Toogle and create invoices from those data endpoints.

 

 

Architecture

The application is going to be built in two parts:-

  • Client side Angular SPA application served by Azure Web Apps.
  • Azure hosted WebAPI MVC application using Azure Document Db to host the content

Invoice Form App Architecture

The application will use Azure AD as the authentication and authorisation engine. For monitoring, errors, statistics we will use Application Insights and both the Angular and MVC components will use the same Application Insight key so that we keep all the monitoring together.

 

Learning

Before I started the application I wanted to do some reading on Angular, Azure Document Db as I have never built anything with these technologies before.

I am using Angular 1.0 at Angular 2.0 is still in development. I have made the choice to build the client side using JavaScript rather than TypeScript. Though I am likely to convert over to TypeScript but thought that process would be interesting to capture.

So this is my reading list before I start:-

 

Development Environment

I am building this application with Visual Studio Code for the client side and Visual Studio 2015 for the MVC Web API component.

I wanted to build something with Visual Studio Code so that I learnt more about Node, Node Package Manager, Bower, Gulp etc.

I don’t really know what all those things are but we will find out!

 

Next Steps

So the next steps are to create the solutions for the Angular application and the MVC Web API.

That will explained in the next entry.

 

Thanks for reading.

Simon