Tuesday, May 17, 2016

Debian + ASP.NET Core 1.0 RC2 + AngularJS 2

This is a short blurb about my experience implementing the great examples provided at http://www.talkingdotnet.com/cascading-dropdown-list-aspnet-core-web-api-angularjs-2 within an open-source Debian linux environment and using slightly newer tooling.

Since he (she? they?) has gone into excellent depth, I'll only cover what I did differently to get it to work in a non-Windows environment (spoiler alert: not much!)

ASP.NET Core 1.0 RC2

Presumably you installed ASP.NET Core 1.0 RC2 already.  If not, head over to https://github.com/dotnet/cli.  Having only ever built from source, I can't comment on the prebuilt binaries.  My bet is they will work well.

Yeoman

To create ASP.NET boilerplate code, we use Yeoman (installed via npm).  Type:

yo aspnet

Then Choose "Web Application" because conveniently enough, MVC now is Web API with ASP.NET Core!

Check this page for installation tips: https://docs.asp.net/en/latest/client-side/yeoman.html#install-node-js-npm-and-yeoman

Visual Studio Code

While not strictly necessary, I found Visual Studio Code to be very robust and it sped me through many otherwise slow, trudging tasks.  This includes:

  • C# syntax error highlighting
  • assist with "using" statements
  • Integrated debugging - although I lucked out and didn't need it, it does work very well and having that on tap has a value which cannot be overstated

Building Visual Studio Code ... from code

Most folks will install direct from a download, but if you're like me and want to build vscode from source, be advised - I found no "install" mechanism when building Visual Studio code.

For convenience, after building Visual Studio Code I made a $PATH discoverable symlink called "vscode" to easily start it anywhere.  I suggest you do the same

.vscode folder & tasks.json

Visual Studio code creates a .vscode folder and assists you in creating two files:
  • launch.json - among other things, this feeds the debugger for what configurations you'd like to launch & debug
  • tasks.json - when using vscode's integrated build feature (ctrl-shift-B on non Macs) it reaches out to this file to determine what to do.
I ran into an issue where I wanted typescript files to auto compile, which apparently is also a tasks.json configuration.  So two different behaviors for tasks.json, but everywhere I read had super confusing examples for how to do that.  My conclusion: I don't fully understand tasks.json and assume I must perform typescript compilation manually.

To that end, I use "tsc" (install via npm).  

gulpfile.js

With my weak JavaScript skills (of which I am not ashamed) it took some fiddling to get paths.npmLibs right.  I deviated from the example as the new boilerplate code is a smidge different.  Here's my paths code:

 For you non-weak JavaScript programmers, I'm sure you've already moved past this one

Don't forget, Visual Studio isn't here to help you with gulp tasks, so you'll have to run them manually (you'll want to run gulp copy-deps and gulp min) after you've done a proper npm install.  Remember, a proper npm install won't work until your package.json is sorted out.

package.json

Most of my difficulties in bringing up functioning code boiled down to getting package.json right.  Visual Studio Code provides a lot of help, but still fiddling was required.  Here's what I came up with:



Results

With all that in place, we get results identical to what is seen on the talkingdotnet site (the initially mentioned article) - but now running on 100% open source and free software!

No comments:

Post a Comment