hillin / AspNetCoreSpa

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

Features

• ASP.NET Core
• Entity Framework Core
• Angular
• Webpack 2
• Bootstrap 4
• ng-bootstrap
• ng2-translate
• Typescript 2
• SASS support
• Best practices in file and application organization for Angular.
• Testing Angular code with Jasmine and Karma.
• End-to-end Angular code using Protractor.
• Istanbul for test coverage
  • with Remap Istanbul for remapping Javascript to TypeScript coverage
• HMR (Hot Module Replacement) with Webpack
• Webpack DLL support for fast rebuilds (~ < 0.5 second)
• compodoc for better angular documentation
• Typedoc for typescript documentation
• Server and client watches
• Login and Registration functionality using Asp.Net Identity & JWT
• Token based authentication using Openiddict
  • Get public key acess using: http://localhost:5000/.well-known/jwks
• Extensible User/Role identity implementation
• Various social login support, Follow this wiki page to see how it will work.
• Lazy loading with pre loading all modules for fast navigation.
• Angular 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 2017
3. Nodejs

Make sure you have Node version >= 6.9.x and NPM >= 3

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 protractor rimraf -g
5. npm install
6. Run the app (Development mode):
    i) One way:
        F5 (This will automatically launch browser)
    ii) Another way
        set ASPNETCORE_ENVIRONMENT=Development
        `dotnet run` (for single run) OR `dotnet watch run` (in watch mode)
        Browse using http://localhost:5000 or http://localhost:5001 
7. Run the app (Production mode):
    npm run build:prod
    set ASPNETCORE_ENVIRONMENT=Production
    `dotnet run` (for single run) OR `dotnet watch run` (in watch mode)
    Browse using http://localhost:5000 or http://localhost:5001 

Other commands

run Angular tests

npm test
# this will also create coverage remaped to typescript files in coverage folder after test run completes

watch and run Angular tests

npm run test:watch

Typescript documentation

• Steps to generate:
  • npm run docs
  • cd docs
  • http-server

Compodoc Angular documentation

• Steps to generate:
  • npm i compodoc -g
  • npm run compodoc
  • cd documentation
  • http-server

### run end-to-end tests
```bash
# 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

AOT - Ahead of time compilation DON'TS

The following are some things that will make AOT compile fail.

• Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.
• Don’t use default exports.
• Don’t use form.controls.controlName, use form.get(‘controlName’)
• Don’t use control.errors?.someError, use control.hasError(‘someError’)
• Don’t use functions in your providers, routes or declarations, export a function and then reference that function name
• Inputs, Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public

How to run in docker on windows: more info

• Install docker for windows (this will install HyperV linux host on windows)
• npm run build:prod
• dotnet publish
• docker build bin\Debug\netcoreapp1.1\publish -t aspnetcorespa
• docker run -it -d -p 85:80 aspnetcorespa
• Navigate http://localhost:85

Compatability

• This project is supported in everygreen browsers and IE10+
• IE8 & IE9 aren't supported since Bootstrap 4 is supported in IE10+ explained here.

Azure MSDeploy command

• Use your site url, username, password

"C:\\Program Files\\IIS\\Microsoft Web Deploy V3\\msdeploy.exe" -verb:sync -enableRule:AppOffline -source:contentPath="%USERPROFILE%\AspNetCoreSpa\bin\release\netcoreapp1.1\publish" -dest:contentPath="aspnetcorespa",ComputerName="https://yoursitename.scm.azurewebsites.net/msdeploy.axd",UserName='yourusername',Password='yourpassword',AuthType='Basic'