My Travels into the World of .NET Core

Running Notes of Creating a Reactive JavaScript Application Using ASP .NET Core and Visual Studio 2017

Overview

The complicated world of Microsoft open source.

Microsoft is trying to center all the .NET platforms around a standard called: .NET Standard. The latest version is .NET Standard 2.0. If your app depend solely on namespaces from the .NET Standard, it practically guaranteed to just work on many different platforms - supposedly - provided that the platform supplies "base" class libraries written to the standard.  So same old song and dance: "write once, run many."

The .NET Core Framework is non-Microsoft, open-sourced, version of .NET which can run on non-Windows machines. Various versions of .NET Core Framework are 100% compatible with the .NET Standard. That is to say, the .NET Core Framework 2.0 platform is compliant with, "exposes all APIs defined in" or "targets" the .NET Standard 2.0 depending on how you want to think about it. At times, however, the .NET Core Framework version can be ahead of or a superset of the .NET Standard.

The .NET Core Framework 2.0 (otherwise known as the .NET Core SDK 2.0) represents really 3 major parts

1. CoreCLR - the .NET runtime
2. CoreFX - the .NET framework library 
3. dotnet.exe - the command-line tool referred to as the "application host CLI" (the part I think should be included when .NET Core Framework is represented)

The .NET Core Framework tool set: all of the above plus Visual Studio 2017 and Entity Framework Core. Visual Studio IDE may lag behind dotnet.exe CLI application as far as supported features and will always lag behind in integrating the latest stable reactive JavaScript application framework releases (but usually you can work around this).

What You Need for a JavaScript ES6 Reactive Single Page App (SPA) .NET Core Framework Webapp "Hello World"

It's OK to start with Visual Studio 2017 Community (VS2017C) so install as first step using the Visual Studio Installer (VSI), a separate product from VS2017C. Don't try to separate out what you think you need from what you don't need for the install process. Install it all even though you probably use 30% of what is installed.

Recently (March 2018), it seems one must use VSI to see if there is an available update to and acquire updates to VS2017C and all involved in developing the "Hello World" SPA webapp. There will be a button labeled "Update" under the VS2017 you have installed which normally would be labeled "Modify". Another indication that major VS2017 IDE and environment update is available is a yellow colored flag icon in the upper right corner of a running IDE. Click on the flag, a notifications window opens and, if a VS2017 update is indicated as pending, click the notification to install the update. This step may not install the .NET Core SPA project templates you need (out of the possible six supported so far: Angular, currently (March 2018) supporting version 4, React, React w/Redux, VueJS, Aurelia, Knockout where half of which are only exposed through dotnet.exe). If so, do this (while VS2017C and VSI are not running) from the command-line (CLI):

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

Which command-line (CLI) you ask? Well, here are some other pieces you'll need:

1. "Open Command Line" by Mads Kristensen installed through VS2017C IDE/Tools/"Extensions and Updates"
2. Git Bash, for you UNIX command-line fans. Git, if not already install by VSI (after VS2017C installation/update step, check first if already installed with "git --version" on the command-line). If Git is not installed, download and install Git Bash that comes with Git from git-scm.com
3. NodeJS, if not already install by VSI (after VS2017C installation/update step, check first if already installed with "node -v" on the command-line) installed through download from nodejs.org. This installs "npm.exe" which is crucial.

VS2017C uses and manages three different package manager applications (more if you count VSI) to manage project dependencies:

1. NuGet - Project view: Solution Explorer/twirl open project, twirl open Dependencies/twirl open NuGet - To manage, VS2017C/Tools/NuGet Package Manager/Package Manager Console
2. npm - Project view: Solution Explorer/twirl open project, twirl open Dependencies/twirl open npm - To manage, the obvious way, open the CLI and go to project's CLI root, edit package.json and execute npm commands.
3. .NET Core 2.0/dotnet.exe  - Project view: Solution Explorer/twirl open project, twirl open Dependencies/twirl open SDK  - To manage, the obvious way, open the CLI and go to project's CLI root, execute dotnet.exe commands, start with "dotnet -h".

Create a New SPA Project (and Solution) Using a .NET Core Project Template

For Angular (4 currently), ReactJS or ReactJS and Redux:

Open VS2017C, File/New/Project/Visual C#/.NET Core/select "ASP.NET Core Web Application", select/create project folder, name project and click OK. At this point, "New ASP.NET Core Web Application" dialog box pops up where you can select one of the following three project templates: Angular, React.js or React.js and Redux.

For VueJS, Knockout or Aurelia Web Application project template, create and cd into a project's CLI root folder and from the CLI, type:

dotnet new [vue | knockout | aurelia]

Blast Off with  "Hello World"

Open VS2017C, File/Open/"Project/Solution..."/, browse to project folder, select either the project *.csproj file or solution *.sln file and click Open.

Let the IDE pull in what it thinks it needs, find the play button (green triangle), select "IIS Express" (installed by VSI) and click the play button. Edge browser should launch and display JS SPA reactive webapp per the selected project template.

HTML, CSS, Razor, Server Controller and View and JavaScript SPA Source Files

JavaScript and CSS source: VS2017 IDE/Solution Explorer/twirl open ClientApp folder, twirl open Components folder. App is the main component, all other folders are components that are partial views that make up small to large chunk of a webpage.

Server Action source: VS2017 IDE/Solution Explorer/twirl open Controller folder. Take action requests from the browser, providing access to data model and return views as ActionResult

HTML, web dependencies, Razor source: VS2017 IDE/Solution Explorer/twirl open Views folder. Specification of how HTML, CSS, JavaScript, dependencies, data or resources are packaged for return trip to the browser. Under the Views folder you make find a folder name "Shared." Under this folder Razor/HTML templates exist to provided common full or partial page templates.

Data provision: The project template doesn't create a Models folder, the M of the MVC design pattern, probably because not every MVC webapp needs a database therefore no model is needed nor is every MVC application complex enough to warrant the separation of concerns of strongly typed models from a controller or controller method.  When strongly typed models are warranted, plain-old class objects backing, or POCOs, source are usually directly located under the Models folder where any controller or the Razor renderer can find them. The POCOs, with C# properties that somewhat match the attributes or columns of a DB table, mirror or model a DB table.

Deleting, Repairing and Restoring IDE and Project Dependencies

Sometimes dependencies, whether npm, NuGet, .NET Core, and VS2017C, become corrupted. The best thing to do is delete the dependencies and then restore them. Do all steps below in order or just the affected dependency set:

1. For VS2017C dependencies, close all VS2017C solutions and instances, fire off VSI and under the active IDE, click "More" and select "Repair." After the repair completes, open the solution, click "Build/Clean Solution". VSI can be fired off from VS2017C, from the Tools menu item, click "Get Tools and Features...".
2. For updating or updating and reinstalling a solution's NuGet dependencies, Microsoft once again provides many confusing ways to do the same thing. I think the simplest method is open the solution in the VS2017 IDE then goto Tools/Nuget Package Manager/Package Manager Console. In the Package Manager Console, to update only, type "Update-Package." To update and reinstall all dependency packages, type "Update-Package -reinstall". BTW, VS2017 IDE won't tell you when some of solution's NuGet dependency packages have updates. To check for NuGet dependency package updates, open the solution in the VS2017 IDE then goto Tools/Nuget Package Manager/"Manage NuGet Packages for Solution..." and click the "Updates" tab for listed available updates.
3. For .NET Core SDK dependencies, from the root folder of project and from the CLI, type "dotnet restore"
4. For npm dependencies, delete the node_modules folder in the root of the project folder and from the CLI, type "npm install"
5. To do a clean VS2017C build and run, open the solution, click "Build/Rebuild Solution" followed by selecting "IIS Express" (to the right of the play button, the green triangle) and then clicking the play button.

Clear as mud.