braincrumbz/awatts

Asp.Net Core, WebPack, Angular Two, TypeScript Starter solution for Visual Studio 2015

AWATTS

Asp.Net Core, WebPack, Angular Two, TypeScript Starter

---

A Visual Studio 2015 solution showing how to start up a project involving following technologies:

• ASP.NET Core (formerly ASP.NET 5) to serve web pages,
• Angular 2 framework for client-side Single Page Application,
  • Ahead Of Time (AOT) compilation for a quicker application startup
• TypeScript 2 as an alternative to JavaScript to write client code,
  • @types to include type definitions of external code
• WebPack 2 module bundler to process and build client source files,
  • WebPack Hot Module Replacement to re-compile and reload web page when client source code changes,
  • Development, test and production builds
• Karma test runner and Jasmine BDD testing library to unit test client source code.

Credits

For its client side, this project is based on our own Angular 2 starter project, YANGTSE, which in turn draws from the experience and hints given by other, earlier Angular 2 starter projects. You might want to have a look at those, in case they might better suits your needs. Among the others, there are:

• AngularClass/angular2-webpack-starter
• preboot/angular2-webpack
• wkwiatek/angular2-webpack2

Prerequisites

Here are the tools that should be present in your development environment in order to work with this project:

Visual Studio environment

• Visual Studio 2015 Community Edition
• Microsoft ASP.NET and Web Tools. It should already be installed with VS2015, but make sure to update it to latest version

.NET environment

Server side application relies on .NET:

• .NET Core 1.0.1 SDK and .NET Core VS 2015 Tooling Preview 2

Please note that, at current time of writing, .NET Core tooling is still in preview. Things like version, install procedure, naming might still change in the next future.

node.js environment

Client side application relies on JavaScript and TypeScript, but it needs node.js to be built and processed.

• nvm-windows 1.1.0 or later, a node.js version management utility for Windows by Corey Butler
• node.js 4.3.2 or later
• npm 3.8.0 or later

You can run node.js commands from console the classic way or from within VS through Npm Task Runner Explorer, an optional Visual Studio extension. In order to let VS use current node.js version set by nvm (instead of its own version), go to Tools\Options, then to Project and Solutions\External Web Tools, and make sure to sort locations so that $(PATH) is above the two $(DevEnvDir)\... locations.

Quick start

Clone or download this repository:

git clone --depth 1 https://github.com/BrainCrumbz/AWATTS.git
cd AWATTS

Install dependencies:

First time project is opened, you should install found client-side dependencies. You can fire off install task from Npm Task Runner Explorer, or run npm install in console the old way, from web project root directory:

cd src\WebPackAngular2TypeScript
npm install

Enable client live reload and module replacement in development:

npm start

Run server in development:

Just start debugging web project in VS with F5. Browser will open on web app served without live reload. Browse to http://localhost:3000/ for web app served through live reload.

Available commands

For its client side part, this project has a number of npm-based commands in order to build and process client source code. You can run them from console the classic way or from Npm Task Runner Explorer.

Install

Install all dependencies:

npm install

Uninstall all dependencies:

npm uninstall

Build

Build for development:

npm run build  # or npm run build-dev

Build for production:

npm run build-prod

Clean build output:

npm run clean

Clean build output and all dependencies:

npm run clean-deep

Before building, output will be automatically cleaned. No need to manually clean.

Serve

Serve front end in development, with hot module replacement and live reload (it still needs ASP.NET server to be running):

npm start  # or npm run serve, or npm run serve-dev

Serve front end in production: no npm command needed, apart from building for production. Only ASP.NET server must be running.

npm run build-prod

Test

Test:

npm test  # or npm run test

Test with debugging enabled (e.g. breakpoints in browser console):

npm run test-debug

Test in watch mode (keep running tests again when code changes):

npm run test-watch

License

MIT

awatts's Issues

npm does not build webpack

C:\Users\joe\Desktop\Angular2\AWATTS-master\AWATTS-master\src\AWATTS\client>npm run build

[email protected] build C:\Users\joe\Desktop\Angular2\AWATTS-master\AWATTS-master\src\AWATTS\client
npm run build-dev

[email protected] prebuild-dev C:\Users\joe\Desktop\Angular2\AWATTS-master\AWATTS-master\src\AWATTS\client
npm run clean

[email protected] clean C:\Users\joe\Desktop\Angular2\AWATTS-master\AWATTS-master\src\AWATTS\client
rimraf ./buildOutput/* ./codegen/*

[email protected] build-dev C:\Users\joe\Desktop\Angular2\AWATTS-master\AWATTS-master\src\AWATTS\client
webpack --config ./webpack.config.dev.js --display-error-details --progress --profile --colors
14713ms building modules 4ms add02099ms7221ms asse390ms emitting
events.js:160
throw er; // Unhandled 'error' event
^

Error: This socket is closed
at WriteStream.Socket._writeGeneric (net.js:683:19)
at WriteStream.Socket._write (net.js:734:8)
at doWrite (_stream_writable.js:334:12)
at writeOrBuffer (_stream_writable.js:320:5)
at WriteStream.Writable.write (_stream_writable.js:247:11)
at WriteStream.Socket.write (net.js:661:40)
at Console.warn (console.js:51:16)
at printErrorAndExit (C:\Users\joben\Desktop\Angular2\AWATTS-master\AWATTS-master\src\AWATTS\client\node_modules\awesome-typescript-loader\node_modules\source-map-support\source-map-support.js:406:11)
at process.emit (C:\Users\joben\Desktop\Angular2\AWATTS-master\AWATTS-master\src\AWATTS\client\node_modules\awesome-typescript-loader\node_modules\source-map-support\source-map-support.js:419:16)
at process._fatalException (bootstrap_node.js:292:26)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files (x86)\nodejs\node.exe" "C:\Program Files (x86)\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build-dev"
npm ERR! node v7.1.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build-dev: webpack --config ./webpack.config.dev.js --display-error-details --progress --profile --colors
npm ERR! Exit status 7
npm ERR!
npm ERR! Failed at the [email protected] build-dev script 'webpack --config ./webpack.config.dev.js --display-error-details --progress --profile --colors'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the awatts-client package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --config ./webpack.config.dev.js --display-error-details --progress --profile --colors
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs awatts-client
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls awatts-client
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\joben\Desktop\Angular2\AWATTS-master\AWATTS-master\src\AWATTS\client\npm-debug.log

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files (x86)\nodejs\node.exe" "C:\Program Files (x86)\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v7.1.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: npm run build-dev
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'npm run build-dev'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the awatts-client package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build-dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs awatts-client
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls awatts-client
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\joe\Desktop\Angular2\AWATTS-master\AWATTS-master\src\AWATTS\client\npm-debug.log

Any ideas? Please help - I am trying to setup your solution to learn. Thank you.

Webpack Hot Module Replacement does only full reload

Browser developer console warning message:

[HMR] Cannot apply update. Need to do a full reload!
ast.js:372 [HMR] Error: Aborted because 296 is not accepted
    at hotApply (http://localhost:3000/js/main-bundle.js:380:31)
    at hotUpdateDownloaded (http://localhost:3000/js/main-bundle.js:293:13)
    at hotAddUpdateChunk (http://localhost:3000/js/main-bundle.js:273:13)
    at webpackHotUpdateCallback (http://localhost:3000/js/main-bundle.js:5:12)
    at http://localhost:3000/0.1786e95b5ad5341aa262.hot-update.js:1:1

Another possibly related error message:

[HMR] Update failed: Error: Manifest request to /69f18398c2cc3928d981.hot-update.json timed out.
    at XMLHttpRequest.request.onreadystatechange [as _onreadystatechange] (http://localhost:3000/js/vendor-bundle.js:34:23)
    at e.run (http://localhost:3000/js/vendor-bundle.js:18305:7718)
    at XMLHttpRequest.<anonymous> (http://localhost:3000/js/vendor-bundle.js:18305:7365)

At current time of writing, there seems to be problems in general between Webpack HMR and Angular 2 in other starter projects as well. AngularClass angular2 starter project just started trying an experimental angular2-hmr module. Other starter projects dropped HMR altogether.

ASP.NET Core RC2?

I don't suppose you plan to put together an ASP.NET Core RC2 version of this?