rohan-buechner / aspnetcorespa

Asp.Net Core & Angular 4 (aka Angular 2) SPA with Angular CLI, 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
  • Both Sql Server and Sql lite databases are supported (Check installation instrcutions for more details)
• Angular
• Angular CLI (Only code scaffolding for now)
• Webpack 2
• Bootstrap 4
• ng-bootstrap
• @ngx-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), depends upon machine performance.
• Compodoc for Angular 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 after running the application). More details

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 http-server @angular/cli -g
5. npm install
6. Run the app (Development mode):
    * If you are running the project for first time:
      dotnet run migratedb seeddb (this will create database, apply migrations and seed the data)
    Subsequently
    i) One way (from VScode or Visual studio IDE):
        F5 (This will automatically launch browser)
    ii) Another way (from command line)
        set ASPNETCORE_ENVIRONMENT=Development
        `dotnet run` (for single run) OR `dotnet watch run` (in watch mode)
        Browse using http://localhost:5000 or https://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 (Note: https://localhost:5001 will not work for production as private SSL certificate only added as Dev middleware)
8. Notes on setting up database
    * This project supports both sql server and sql lite databases
    * Currently this project is configured to run under sqllite to speedup development cycle and the migrations added in this project are W.R.T sql lite
    * To run under sql server:
        * delete bin & Migrations folders
        * Flip the switch in appsettings.json called `useSqLite` to `false`, this should point to use local sql server setup   as default instance.
        * Run `dotnet ef migrations add "MigrationName"`
        
    * CAUTION: If you want to drop database while in development, you can run command `dotnet run dropdb`

Other commands

Scaffold Angular components using Angular CLI

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Guard	ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

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

Compodoc Angular documentation

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

Compodoc documentation:

### 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'