chris-house / aspnetcorespa

Asp.Net Core & Angular 2 SPA with Webpack starter application. Some concepts taken from ASP.NET Core & ASP.NET CORE SPA generators, angular2-webpack-starter with Angular 2 best practices and guidelines, all baked into one. Live demo:

Features

• ASP.NET Core
• Entity Framework Core
• Angular 2 RC5
• Webpack
• SASS support
• Best practices in file and application organization for Angular 2.
• Testing Angular 2 code with Jasmine and Karma.
• End-to-end Angular 2 code using Protractor.
• Coverage with Istanbul and Karma.
• Type manager with Typings
• HMR (Hot Module Replacement) with Webpack
• Typedoc for typescript documentation
• Server and client watches
• Login and Registration functionality using Asp.Net Identity
• Various social login support, Follow this wiki page to see how it will work.
• Lazy loading of all routes, child routes (About page example) with basic animation example (On about page).
• Angular 2 dynamic forms for reusability and to keep html code DRY.
• Serilog with Seq support to manage structured logging.
• Swagger as Api explorer (Visit url http://localhost:5000/swagger/ui after running the application)

Pre-requisites

1. .Net core sdk
2. Either VSCode with C# extension OR Visual studio 2015 update 3 with .Net Core tooling
3. Nodejs

Installation

1. Clone the repo
    git clone https://github.com/asadsahi/AspNetCoreSpa
2. Change directory to our repo
    cd AspNetCoreSpa
3. dotnet restore
4. Install global dependencies
    npm install webpack protractor typings rimraf -g
5. npm install
6. typings install
7. Create webpack vendor manifest file for fast webpack rebuils
    webpack --config config/webpack.config.vendor.js
8. Set appropriate environment 
    set ASPNETCORE_ENVIRONMENT=Development
9. Run the app 
    dotnet run (for single run) OR dotnet watch (in watch mode)
10. Browse using http://localhost:5000 or http://localhost:5001 

Other commands

run Angular 2 tests

npm run test

watch and run Angular 2 tests

npm run watch:test

Typescript documentation

npm run docs
# this will create documentation in doc folder at the root location (open index.html file) 

run end-to-end tests

# make sure you have your server running in another terminal (i.e run "dotnet run" command)
npm run e2e

run webdriver (for end-to-end)

npm run webdriver:update
npm run webdriver:start

run Protractor's elementExplorer (for end-to-end)

npm run webdriver:start
# in another terminal
npm run e2e:live