#Aurelia Mvc5 Skeleton

This project is setup to integrate the Aurelia Typescript navigation skeleton (provided by the Aurelia team) with an Asp.Net Mvc5 project which uses .Net 4.

Currently the .Net project skeletons provided by the Aurelia team support .Net Core only with nothing supplied to support .Net 4.*.

Usage

Install Prerequisites

Before you begin you will need to install the following if not already installed:

1. Node.js
2. npm
3. Git

These steps are essential so please complete them before proceeding.

Next, open a console and run the following commands:

1. Gulp
   • npm install -g gulp
2. jspm
   • npm install -g jspm

Next, prep for TypeScript:

• Install TypeScript 2.1.4 if not already installed.
• Modify the PATH environment variable to point to this version, rather than an earlier one. You may need to restart Visual Studio for it to pick this up. PATH=...;C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.1;...

Finally...

• Install node-gyp, following the instructions for your OS.

The following worked for me on Windows 10 64 bit:

• Install the latest Python v2 (not v3!)
• Make sure Visual Studio 2015 is installed with Visual C++ included
• Install the Windows 7 64 bit SDK

Download, Build and Run the project...

1. Clone or download the project and extract to a suitable location
2. Open a command prompt and change directory to the project's folder (the folder containing package.json). cd \project_root\AureliaMvc5\AureliaMvc5
3. Run the following commands:
   • npm install
   • jspm install -y
   • node node_modules\protractor\bin\webdriver-manager update
   • npm install typings --global
   • typings install dt~jasmine --global
   • There should be no errors at this stage. Please fix any errors before proceeding.
   • Note: the last two commands install typings for Jasmine which prevents TypeScript compilation errors when compiling the e2e tests.
4. Build and run the project using Gulp.
   • Run the command Gulp watch
   • Open a browser and navigate to http://localhost:9000. The Aurelia app should run.
5. Build the project in Visual Studio; it should build with no errors after downloading nuget packages.
   • Note: I added a Task Runner task to copy the html files to the dist folder. If Task Runner explorer fails to open GulpFile.js you may need to apply the fix described here in StackOverflow
   • Run the project and browse to http://localhost:63006 then navigate to http://localhost:63006/app. The Aurelia app should run at that url.
6. Run the unit tests with gulp test. They should all run and pass.
7. Run the e2e tests with gulp serve e2e. They should all run and pass.

References

The Aurelia Typescript skeleton was obtained from here on GitHub

I got started with the useful information provided by Rui Mourato's blog

Fix for Task Runner can't load tasks here on StackOverflow

Project Creation Steps

The essential steps used to create the skeleton were:

1. Create a new MVC5 project
2. Copy the Aurelia Typescript skeleton into the root of the project
3. Run npm install
4. Run jspm install -y
5. Accept the defaults for all the config files (config.js, package.json, tsconfig.e2e.json, karma.conf.js)
6. Prep for TypeScript:
   • Install TypeScript 2.1.4 if not already installed. The latest version can be found here
   • Modify the PATH environment variable to point to this version, rather than an earlier one. You may need to restart Visual Studio to pick this up. PATH=...;C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.1;...
7. Install the TypeScript 2.1.4 nuget packages in Visual Studio
   • install-package microsoft.typescript.compiler
   • Install-Package Microsoft.TypeScript.MSBuild
   • Modify tsconfig.json to exclude the test folder
8. Test to make sure all is working using gulp watch
9. Create a controller and view to run Aurelia
10. Copy index.html and paste into the index.cshtml for the Aurelia view (no layout used, no changes to the html needed)
11. Find a solution for e2e tests not running. This turned out to be running the command node node_modules\protractor\bin\webdriver-manager update
12. Build and run in Visual Studio 2015