Tag / azure document db

by Simon Doy

Dev Diary S01E02: Angular / WebAPI / Azure Document Db App – Client Environment Setup


Introduction

In my previous post: Dev Diary Entry 1: Azure Web App with MVC WebAPI, Angular and Azure DocumentDb, I introduced the Invoice Management App that I am planning to build.

For complete transparency, the application that I am talking about building has been in development for a week or so now. So, as I write this I am playing catch up. I have been writing down all the problems that I have had and how I resolved them. My aim is that we will quickly get up to date so that I am coding and then I can quickly write about what I did.

Today, we are talking about setting up Visual Studio Code and Visual Studio 2015 to host my applications. Remember we are building two components, the Angular client application in Visual Studio Code and the MVC Web API component using Visual Studio.

 

Setting up the Environment

Visual Studio Code

Developing in Visual Studio Code is quite different to using Visual Studio, the team at Microsoft are doing a great job at improving the application but it does feel very unfamiliar to me who has been using Visual Studio for a rather long time.

Anyway, I downloaded VS Code from http://code.visualstudio.com/ and installed it on my machine.

I am developing on a Surface Pro 4 with Windows 10 x64. So the instructions provided are for Windows but it is pretty similar for MAC OSX and Linux.

 

Developer Directories

I am developing in the c:\dev folder and have created a subfolder called ITSP and then a subfolder, VSTS. The final directory is c:\dev\itsp\vsts

 

Node and NPM

The next step, was setting up the environment, I had spoken to a few people and read a few posts and the way to go with VS Code was using Node.js tooling and the Node Package Manager, npm.

Node provides a few lightweight services which we can take advantage of when developing. The one that I make most of is the built in HTTP server, but more on that later.

NPM or Node Package Manager provides a fantastic way of downloading, installing and keeping your dependencies up to date. I guess the name came from Redhat’s Package Manager or RPM. To be fair it is also like NuGet which the .NET world have been using to keep their dependencies in check.

So I downloaded and installed Node from https://nodejs.org/en/ and choose the latest build which was v5.6.0, I see that version v6 is out as I write this. The download is an MSI so was a quick simple install.

Next is NPM, so actually NPM comes included with Node.js but I wanted to make sure that I had the latest version of NPM. This is the advice in the NPM Installation instrucitons found here: https://docs.npmjs.com/getting-started/installing-node

So to do that I started the Node,js command prompt

  • npm install npm –g

The command calls npm telling it to install a package called npm with –g which means to install it so it is available globally.

 

Bower

The other tool that seems to be great at dependency management is Bower. Now, I had a hard time working out what the difference was between Bower and NPM. Why do I need both. Well Bower seems to be better at installing and configuring the client side components and NPM for the server side components.

One of the reasons that I have chosen Bower is to be honest a lot of tutorials use it. Now, this is something that I will look into a little later on the project but I want to get up and running. There do seem to be a lot of alternatives such as Browserify and Webpack.

 

Angular

So this is my first project using Angular, I hear people talking about it all the time! As I was researching into the product more it became embarrassing to see how long its been out before I have had a go at using it!

One of the chaps speaking about this stuff from the SharePoint world is Andrew Connell via his blog. He has a great amount of content which I found really useful.

As I mentioned in my previous post, I have been reading up on Angular via their documentation pages. I also have been listening to Scott Allen’s AngularJS: Getting Started on Pluralsight.

 

Bootstrap

As a developer, I need help with design so I have decided to use Twitter Bootstrap and fortunately this is quite easy to include in your project.

I am sure that you have used Bootstrap more than me!

However, Bootstrap is a framework which provides a grid based system for defining responsive designs based on having different css classes for different screen sizes.

I have to say I am always amazed what front-end developers can do with Bootstrap, I am sure in time that it will become second nature.

 

Yeoman

Yeoman is like File->New Project in Visual Studio. It is pretty cool actually and allows you to create or use pre existing templates to make the project scaffolding. I did look at this and various templates but I found them complex and they started to pull in a lot of stuff which I did not know about.

So to kept it simple, I haven’t used Yeoman as I wanted to learn how to build the project from scratch rather than have a tool do everything for me and I then don’t understand my dependencies.

I am sure that I will change my behaviour next time once I understand how everything fits together.

Adal.JS

Now I know that I am going to be using Azure Active Directory as my authentication and authorisation mechanism.

ADAL is a library that has been created which provides a wrapper to manage authentication with Azure AD. The library is superb and really straight forward to use for the .NET stack. Fortunately, there is also a JavaScript implementation called Adal.js and even better there is a module created for Angular!

I have been following Adal for a while and the go to guy is Vittorio Bertocci, he has some great posts on all things ADAL.

Introducing ADAL JS v1

The article is great and talks about how to install the framework using Bower and then provides examples including one for authenticating your application with Angular!

 

jQuery

Of course we need jQuery, I don’t think this framework needs any introduction.

This was installed from the node.js command line:

  •  using bower install jquery

 

 

 

Creating the Client Side Visual Studio Code Project

Ok so now I have talked about all the bits and pieces that I am using for the client side of the application, I will try and explain the steps that I took to create the project for Visual Studio Code.

Remember we have two components in this application:-

  • Angular Client side application being developed in Visual Studio Code
  • MVC WebAPI Server side application being developed in Visual Studio 2015

So,  to create the Visual Studio Code project you need to create a package.json file. This is the equivalent of a Visual Studio csproj file for Visual Studio C# Projects. It contains the version number, name of the project, description and also it has scripts section where you can define commands to perform actions when developing your application.

So to get started I did the following:-

  • started node.js command prompt
  • created a directory c:\dev\itsp\vsts\IT365.InvoiceApp.Client
  • from the directory just created I ran npm init
  • this wil start a wizard which then asks for various information about the project including its name, description and author details

Now that we have our package.json created we can fire up Visual Studio Code

  • code .

This will start Visual Studio Code in the current directory which will cause Visual Studio code to read the application information created so far.

 

Install Dependencies

Now we have the project created next it is time to bring in our dependencies.

We will use npm and bower to pull in the dependencies:-

  • bower install bower-angular
  • This will install the Angular component into our project into a folder called bower_components\angular
  • Angular Route
  • bower install bower-angular-route
  • This will allow us to define our routes in the application so that we can control where the user goes, what they see and which controller to use. More on this later
  • Angular Mocks
  • bower install bower-angular-mocks
  • This will allow us to do Test Driven Development when we start looking at Continuous Integration and Continuous Delivery
  • Angular Sanitizer
  • bower install bower-angular-sanitizer
  • This helps us to strip out dangerous characters from when parsing HTML

 

  • Bootstrap
  • bower install bootstrap
  • This will give us a better look and feel than I could do!

So, we have the Angular and Bootstrap stuff installed that I thought we needed.

 

Next we need to install the ADAL JS stuff

  • ADAL JS
  • bower install angular-adal
  • This will allow us to manage the login / authentication, authorisation process in our application with Azure Active Directory

Then we have jQuery

  • bower install jquery

 

Finally, I want to be able to actually run the application locally and a really nice way of doing that is using the Node.js HTTP Web Server, http-server

  • Node http-server
  • npm http-server –g
  • This will install the http server globally so we can use it in our next applications

 

Create Application Structure

Next I created the application structure

So the following directories and files  were created from within Visual Studio Code

  • [app]
  • [controllers] – this will hold all our controllers
  • [services] – this will hold all our services
  • [entities] – this will hold our JavaScript objects relating to entities such as Invoices, Users etc
  • [views] – this will hold all our views
  • [css] – this will hold our CSS styles
  • [images] – this will hold our image
  • app.js
  • index.html

I am sure that I will be adding more folders etc but that gave me something to start with.

 

Trying out the Application quickly

So one of the tips that I picked up from the node.js documentation was how you can create tasks with NPM.

I was a little confused by this to be honest but after a bit of investigation I found out that I could modify the package.json to configure these tasks for NPM to be able to use.

  • Opening up package.json, i found the scripts section and added the following
  • When i first did this i added just the http server –a 127.0.0.1 –p 8080
  • however, after more reading I realised I could run multiple commands using the && syntax
  • So we ended up with

npm-start-task-config

 

Now this is pretty cool, from the node.js command prompt I can type

  • npm start

This will start a web server and fire up the browser taking me to the homepage!

image

 

Next Episode

So in the next episode, we will actually start develop something. I was pretty excited to try out Angular so I just started to build the application using client side data. So we will cover that.

I hope you can join me for the next episode.