Skip to content

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:

License

Notifications You must be signed in to change notification settings

albrookesplowman/AspNetCoreSpa

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build status Build status Join the chat at https://gitter.im/aspnetcorespa/Lobby MIT license

Features

Pre-requisites

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

Make sure you have Node version >= 6.0 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'

About

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:

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • C# 41.5%
  • TypeScript 36.4%
  • HTML 11.4%
  • JavaScript 7.3%
  • CSS 1.9%
  • PowerShell 1.5%