Azure Sql Database vs DocumentDb Geo Replication Options

One of the benefits of moving your data to the cloud is that you no longer have to manager the infrastructure. If you also use Azure Sql, you get a host of additional features out of the box. One of those features is Geo-Replication.

Azure Sql

You may select up to five regions for Geo Replications. What this means is that your database will be copied to the secondary region when you set it up. After that, any changes that happen in the database will be automatically replicated in the secondary databases. The secondary database will be readable, but only the primary database is writable. At any time you may promote one of the secondary databases to be the primary, but you may only have one primary at a time.

DocumentDb

You may select any number of the regions available to replicate your database to. As with Sql Server, these regions are readable but not writable. Only the primary region is writable. You may also trigger a failover to one of the readable regions, which then becomes the writable region.

Cost

With both Azure Sql and DocumentDb, you must pay for all those additional replicas. They both calculate the price based on the amount of data you are storing and the amount of throughput you have.

So that sounds almost exactly the same except for terminology, right? Well, almost. Here are the major differences:

Connecting From the App

When you connect to the database with Sql Azure, you need to know the server, the database, and your credentials. With DocumentDb, you need to know the database Uri and key to connect. When you want to connect to a secondary region in Sql Azure, you must specifically connect to that server. With DocumentDb, you just have to be closer geographically to the readable region, and Azure will route you to that database. The connection information stays the same. If the writable region changes, your writes will automatically go to the right place. If you try to write to a secondary database in Sql Server, you will fail with an error.

Automatic Failover

DocumentDb will automatically failover to the highest priority readable region should the writable region be unavailable. Azure Sql does not have any automatic failover capability. The failover must be triggered either by going to the portal or by some other method. You can trigger it from a Powershell script, so you can write your own monitoring app to know when the failover should happen, but with DocumentDb, that is a feature out of the box.

Summary

While both Azure Sql and DocumentDb offer a geo-redundant feature, DocumentDb is much easier to use from a maintenance standpoint. When a failover in Azure Sql is needed, all the apps need to be aware of the change, and all the connection information needs to be updated before those apps will be fully functional. In addition, the DocumentDb failover will happen automatically, whereas you must have some mechanism in place (using the portal?) to cause the Azure Sql to failover.

How to Use Angular 2 In An MVC 5 Web Site

Why would anyone want to use Angular2 with a .NET Framework MVC site? Perhaps you need to add some Angular pages to an existing MVC5 site. Maybe you are new to Angular2, and want to learn how to use it in a familiar IDE. Luckily, it is fairly easy to do.  Angular 2 doesn’t really leverage very much of the MVC framework, but can be integrated into it in a few simple steps.

Set Up Your Environment

If you are a traditional .NET developer, you may need to install a few things to get started.

Set Up Node

Head over to Node.js to install the latest version (https://nodejs.org/en/). Select the link that says “Recommended for most users”, as this is the latest stable version. Just install it using the default settings. This will also install The Node Package Manager (npm) as well. Open up a command prompt and check to see that you have the correct version installed. As of this writing, it is at version 6.10.0.

Set Up Npm

Even though the Node.js installation installed npm, it may not have installed the latest version, so use the following command to upgrade it. Currently, the latest version is 4.3.0.

install npm@latest -g

Create MVC 5 Project

Create a new ASP.NET Web Application, and select the MVC template. I’ll call mine Mvc5Ng2. 

Add Angular 2 To Your Project

The Angular2 Quickstart project is a good place to start since it will have all the latest versions of the Angular2 components you will need. Download it into its own directory.  The Angular site is at https://angular.io/. You can clone the Quickstart project using git:

git clone https://github.com/angular/quickstart.git quickstart

We will be copying parts of this project into our .NET project. The Quickstart project contains things to run the project in a test http server that is launched from the command line, but we will be testing ours in IIS Express, so we will not need to include those packages. Open the package.json file in a text editor. We will be copying out parts of it.

Update Your Package.json

Meanwhile, back in the MVC project, add an npm configuration file to the root of your project. It will be named package.json.  You can change the name and version to whatever you want. In the Quickstart package.json file, copy the entire “dependencies” section and paste it into your document right before the “devDependencies” section. Also copy @types/node and @types/jasmine lines into your devDependencies section.

Open a command prompt at the root of your project, and run npm install.This will install all the npm packages in the package.json file into your project. You can look at the node_modules folder when it was done to see everything that was installed.

npm install

Add Angular2 Root Module and Component

Create a folder name “app” at the root of your MVC project. It is a convention to put all the Angular2 files into a folder named “app”. The Angular.io site has a section on Angular conventions. (https://angular.io/docs/ts/latest/guide/style-guide.html)

Copy Angular Files

From the Quickstart project, copy the files in its app folder into yours. There should be three files: app.module.ts, app.component.ts and app.component.spec.ts.

Create Main.ts

Add a new typescript file to your app folder and name it “main.ts”. This is the where the Angular entry point is launched. Add the following lines of code:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

 Copy SystemJs Files

Copy and paste the systemjs.config.js and systemjs.config.extras.js files into the root of your project. Open the systemjs.config.js file and add the following two lines to the “//other libraries” section. Make sure to add any commas. Unlike the package.json, the systemjs configuration file will allow you to have extra commas, but will throw errors if you are missing any.

'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
'typescript': 'npm:typescript@2.0.10/lib/typescript.js',

Copy the tsconfig.json File

From the Quickstart project, copy and paste the tsconfig.json file into the root of the MVC project. This will tell the Typescript compiler how to compile the Typescript.

Edit the Layout Page

Now that we have the necessary files in place, it’s time to integrate it into our project. Open the /Views/Shared/_Layout.cshtml page and add the following links to the <head> tag:

<base href="/">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>

Add Angular Root Tag

Open the /Views/Home/Index.cshtml page. Delete all of the html and add the root Angular 2 tag.

@{
ViewBag.Title = "Home Page";
}

<my-app>Loading...</my-app>

Compiling Typescript

Now that we have everything in place, we need to compile the Typescript files into Javascript. I find that the gulp typescript compiler works very well. Visual Studio will compile the Typescript files also, and if you build your project, the js files will be created.

Add Gulp

Let’s install the gulp node packages. Open a command prompt at the root of your project and install the npm packages with the following commands:

npm install gulp --save-dev
npm install gulp-clean --save-dev
npm install gulp-sourcemaps --save-dev
npm install gulp-typescript --save-dev
npm install typescript@latest --save-dev

Add Gulpfile.js

Add a new Gulp ConfigurationFile to the root of your project. The gulp file will be integrated into the Visual Studio build to compile the Typescript files. Modify the gulp file to create these three tasks:


var gulp = require('gulp');
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");
var clean = require("gulp-clean");
var sourcemaps = require('gulp-sourcemaps');

gulp.task('compile', ['createSourcemaps'], function () {
return tsProject.src()
    .pipe(tsProject())
    .js.pipe(gulp.dest("app"));
});

gulp.task('createSourcemaps',
function() {
return gulp.src('app/**/*.ts')
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('app/'));

});

gulp.task('clean',
function () {
    return gulp.src(["app/**/*.js", "app/**/*.map"]).pipe(clean());
});

Task Runner Explorer

You can run your gulp tasks using the Task Runner Explorer. Open it from the View > Other Windows > Task Runner Explorer command.

You can compile the Typescript by right-clicking on the “compile” task and selecting Run. 

You can add the compile step to the Visual Studio build, and the clean step to the Visual Studio clean. Then when you perform a build or clean in Visual Studio, the Typescript compile and clean tasks are also performed.

Run Your Project

If you start your project, it should build and run.

Add Angular Route

One final thing to add is the Angular route to your RouteConfig RegisterRoutes method. This will work with the MVC routing to route Angular routes correctly.

routes.MapRoute(
name: "Angular",
url: "{*.}",
    defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

You are now ready to build your Angular app in Visual Studio using MVC.