Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 1 - Erste Schritte

Einführung

Da ich schon seit einiger Zeit recht begeistert bin von .NET Core und Vue.JS, habe ich bereits in einigen kleineren Projekten diese Lösung eingesetzt.

Dieser Artikel ist eine Serie von Artikeln, die den Aufbau einer Fullstack Applikation unter DotNet Core und Vue.js beschreiben.

Bisher sind folgende Artikel erschienen:

  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Erste Schritte Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 2 Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 3 - Einbinden PostgreSQL als Datenbank Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 4 - Erweiterung um ein Repository Pattern und Service Layer Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 5 - Erste Schritte mit Vue.js und Typescript Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 6 - Erweiterung um Vuex und Axios Link

In diesen Artikel möchte ich die ersten Schritte dokumentieren, die notwendig sind, um mit der Entwicklung zu beginnen. Mittlerweile hat DotNet Core sich ja so weit entwickelt, dass man ohne große Probleme ein Demo Projekt mit Vue entwickeln können.

Technologie-Stack

Was ist DotNet Core?

DotNet Core ist eine Neuentwicklung von Microsoft basierend auf den bisherigen .Net Framework Stack. Der große Unterscheid ist, dass DotNet Core nun Plattformunabhängig und Open Source (https://github.com/dotnet/corefx) ist. Es ist also durchaus möglich DotNet Core auf Linux und MacOS zu verwenden.
Zusammenfassung: Auf Basis DotNet Core kann man Plattformunabhängig Code in C# Entwickeln.

Was ist Vue.js?

Vue.js ist ein populäres Javascript-Framework für die Front-End-Entwicklung mit geringer Lernkurve und deutlich weniger Overhead als die meisten vergleichbaren JavaScript-Frameworks. Es ist ebenso Open-Source (https://vuejs.org/v2/guide/) und sehr gut dokumentiert. In Zusammenspiel mit DotNet Core, kann man einfache Strukturierte Lösungen bauen, die gut ineinander greifen. Es ist notwendig das Front-End in Javascript zu entwickeln, da die Browser nur diese Programmiersprache für ein komplett interaktives Front-End unterstützen.
Zusammenfassung: Auf Basis von Vue, kann man sehr einfach komplexe JavaScript/Typescript Komponenten Entwickeln.

Voraussetzungen für die Entwicklung

Im Detail möchte ich in diesen Artikel nicht auf die notwendigen Komponenten eingeben. Anbei eine Auflistung mit den Links zu den notwendigen Komponenten:

Beginnen mit der Entwicklung

Zunächst ist ein Arbeitsverzeichnis anzulegen, in den die Entwicklung erfolgen soll.

Als nächster Schritt müssen die SpaTemplates nachinstalliert werden, damit Vue als unterstütztes Template angeboten wird. Hierzu wird die Befehlszeilenschnittstelle verwendet. Anleitung von Microsoft

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

Anschließend ist eine neue Option zu "dotnet new" hinzugekommen: (Mehr zu dotnet new: Link)

Mit dem Befehl:

dotnet new vue  

kann nun das neue Projekt auf Basis des Templates "Vue" angelegt werden:

Als nächstes kann nun mit "npm" den Paket-Manager der mit "Node.js" kommt, die Installation von Vue, WebPack und anderen Paketen gestartet werden, die vom Template vorbereitet wurden: (Mehr zu npm install hier)

npm install  

Starten von Visual Studio Code und der Anwendung

Nun kann man Visual Studio Code starten und dann den neuen Ordner mit dem Vue Projekt öffnen:

Anschließend kann man das Debugging auch gleich mal starten, um zu sehen ob alles funktioniert:

Nach einigen Minuten des Build started der Browser und zeigt unser neues Projekt:

Eine kurze Übersicht über das Backend

Das Backend wird mit C# und MVC Framework (https://msdn.microsoft.com/de-de/library/dd381412(v=vs.108).aspx) betrieben. Entsprechend gibt ein View und ein Controller Verzeichnis.

Im Controller befindet sich für jede "Pfad-Ebene" ein eigener CS Code in C#. Hier für unser Home/index beispielsweise im "HomeController": (Beschreibung zu Controller hier)

Aktuell wird hier nur die Ansicht mit "return View()" aufgerufen. Bei Singe Page Applications ist hier in der Regel auch nichts weiteres zu ergänzen.

Die API Aufrufe sind hier im "SampleDataController.cs" abgelegt:

Die "View" ist auch recht simpel gehalten. Im "Layout" wird die Basis, Javascript und Stylesheets geladen. Die Index.cshtml gibt sich auch recht bescheiden, da "Vue" dynamisch Inhalte nachladen wird.

Das Backend Debuggen

Um das Backend zu Debuggen, muss an den gewünschten Aufruf ein Breakpoint gesetzt werden. Bspw. in den API Aufruf für die "WeatherForecasts":

Als nächstes kann einfach in den Debugger von Visual Studio Code gegangen werden und dort ".Net Core Launch" ausgewählt werden und die Applikation mit Debug zu starten:

Wählt man nun "Fetch data" im Demo aus, dann gelangt man in den Debugger:

Hier kann man nun, wie gewohnt debuggen:

Mit einen Plugin, wie Beispielsweise Postman (https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=de), als Chrome Extension, kann man die API auch direkt mit Parametern aufrufen. Deutlich ist auch zu erkennen, wie sich der Name aufgrund des Source-Codes ergibt:

Beispielsweise kann man den Source-Code nun erweitern, so dass er einen Parameter bekommt, der innerhalb des Codes entsprechend ausgewertet wird.

Anbei eine kleine Anpassung im Code:

        [HttpGet("[action]")]
        public IEnumerable<WeatherForecast> WeatherForecasts(string ort)
        {
           if (!String.IsNullOrEmpty(ort) && ort.Equals("Munich", StringComparison.InvariantCultureIgnoreCase)) {
               return new List<WeatherForecast> {
                   new WeatherForecast() {
                       DateFormatted = "01.03.2018",
                       TemperatureC = -5,
                       Summary = "Kalt"
                   },
                   new WeatherForecast() {
                       DateFormatted = "15.03.2018",
                       TemperatureC = 5,
                       Summary = "Wärmer"
                   },
                   new WeatherForecast() {
                       DateFormatted = "30.03.2018",
                       TemperatureC = -15,
                       Summary = "Ziemlich Kalt"
                   },
               };
           }

            var rng = new Random();
            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                DateFormatted = DateTime.Now.AddDays(index).ToString("d"),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            });
        }

Anschließend kann der Forecast mit "Munich" aufgerufen werden und man erhält in Postman das entsprechende Ergebnis:

Front-End Debuggen

Möchte man das Front-End Entwickeln, sind zunächst die Debug Extensions für Chrome zu installieren:

Anschließend muss die "launch.json" des Debuggers erweitert werden:

Hier ist dann folgendes zu erweitern:

{
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:5000",
            "webRoot": "${workspaceRoot}/wwwroot",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "/Views": "${workspaceRoot}/Views"
            }
}

Anschließend ist als erstes "natürlich" der ".Net Core Launch (web)" des Backends zu starten. Anschließend der "Launch Chrome". In diesen Fall laufen zwei Prozesse im Debug und ermöglichen Front-End und Back-End gleichzeitig zu debuggen:

Setzt man nun bspw. in der TypeScript "counter.ts" ein Break-Point und klickt auf der Webseite "Increment" hält, dort der Debugger an:

Man kann auch in der laufenden Debug Session Code im "TypeScript" ändern und es hat sofort eine Wirkung, bspw. wenn in "fetchdata.ts" der Ort "Munich" mit angegeben wird und anschließend auf "Fetch data" geklickt wird, erscheinen hier nun die geänderten Werte aus dem Back-End.

Zusammenfassung

Die Full-Stack Entwicklung mit ASP.NET und Vue ist mit Hilfe der bereitgestellten Templates recht einfach möglich. Ich hoffe das ich mit meiner Erklärung Ihnen helfen konnte bei den ersten Schritten.