Yeoman Generator

DotNetCore + Angular2 + Express Backend (REST API with MongoDB)

full end-to-end debuggability in Visual Studio 2015 (Update 3)

• Frontend: Asp.Net Core + Angular 2 (final release) + TypeScript
• Backend: NodeJs/Express Rest API + MongoDB + TypeScript

If you want to have Visual Studio 2015 full end-to-end debuggability but also NodeJS Express for you backend REST Api (instead of Asp.Net MVC)

What you get when you run this generator:

• A Visual Studio 2015 Solution containing three projects:
  • RestApi (NodeJs)
  • Shared (NodeJs)
  • Web (Asp.Net Core)

Prerequisites:

• MongoDB
• NodeJs, NPM, Yeoman and Gulp must be installed on your machine
• Visual Studio 2015 (Update 3)
• Visual Studio Extensions:
  • Node Tools
  • NPM Task Runner

How to generate your project:

• Install above prerequisites

• Run the following commands:

  $ npm install -g generator-dotnetcore-angular2-express-mongodb

  $ mkdir your-project-name

  $ cd your-project-name

  $ yo dotnetcore-angular2-express-mongodb

What is this good for?

Altough Visual Studio Code or Sublime Text are really powerful - when it comes to debugging TypeScript (server or client side) nothing beats Visual Studio (at least in my opinion). The easiest way to get a debuggable Angular 2 solution is to create a Asp.Net project (MVC, Web Forms, Asp.Net Core - does not matter which one). Just hit F5 and the debugger will attach itself to your browser.

This works great - if you also want to have your REST api in c# (probably going for Entity Framework for your data layer).

If you want to have a NodeJS/Express application as your backend (utilizing MongoDB as data store) it gets complicated. The easy way would be to just host your frontend (Angular 2 app) with NodeJS Express too. Unfortunately the end-to-end debugging experience is not yet there with NTVS (Node Tools for Visual studio).

Best way to achive my requirements was to create separate projects for the frontend (hosted by Asp.Net Core) and backend REST Api (hosted by NodeJs Express).

Additional benefit of this approach is the possibility to share code between frontend and backend. We can now share DTOs between Angular 2 code and backend persistence code :)