---

Oktober 2015

Band 30, Nummer 10

ASP.NET – ASP.NET 5 überall mit OmniSharp und Yeoman

Von Sayed Ibrahim Ibrahim | Oktober 2015

Da Entwicklungsteams mittlerweile eine vielfältigere Auswahl an Tools zur Verfügung steht, müssen auch Frameworks eine Auswahl ohne Reibungsverluste bieten. ASP.NET 5 wird nun plattformübergreifend unterstützt, so auch bei der Entwicklung mit Open-Source-Tools wie OmniSharp und beim Hosting in Microsoft Azure mithilfe von Containern wie Docker. In diesem Artikel zeigen wir Ihnen, wie Sie mit ASP.NET 5 auf der Plattform Ihrer Wahl beginnen können. Wir behandeln alle Aspekte, die bei Ihrem Einstieg in die Entwicklung von Webanwendungen mit ASP.NET 5 von Bedeutung sind.

Ein Projekt aufzusetzen und ans Laufen zu bringen kann schwierig sein, da sich die moderne Webanwendungsentwicklung durch viele Wahlmöglichkeiten auszeichnet. Als Benutzer von Visual Studio sind Sie schon fast verwöhnt durch die IDE, integrierten Vorlagen und Tools wie z. B. Web Essentials, die Ihnen beim Starten eines neuen Projekt helfen. Doch Entwickler, die nicht mit Windows und einer umfangreichen IDE wie Visual Studio arbeiten, setzen im Allgemeinen auf Befehlszeilentools wie Yeoman, Grunt, Gulp oder Node.js, um Webanwendungen zu entwerfen und zu entwickeln. ASP.NET 5 wurde deshalb unter Berücksichtigung dieser Plattformen von Grund auf neu erstellt, um Entwicklern eine größere Auswahl von Tools zu bieten. Sie können dieses Framework nicht nur für Ihre Windows-Projekte, sondern auch für Linux und OS X einsetzen. Es folgt eine Kurzbeschreibung der Einrichtung und Erstellung eines Projekts aus Sicht eines Nicht-Windows-Betriebssystems mithilfe von ASP.NET 5.

Einrichten der Umgebung

Für die Einrichtung Ihrer Umgebung benötigen Sie verschiedene Elemente, was für sowohl OS X als auch Linux gut dokumentiert ist. Schrittweise Anweisungen finden Sie unter bit.ly/1Ljhj68. Dieser Artikel beschränkt sich hauptsächlich auf OS X.

Der erste Schritt ist das Installieren der Tools, die wir zum Entwickeln unserer ASP.NET 5-Webanwendung einsetzen. CoreCLR (github.com/dotnet/coreclr) soll schlussendlich als Basislaufzeit für das Framework fungieren. Doch für den Augenblick benötigt ASP.NET 5 weiterhin die Mono-Laufzeit. Zum installieren von Mono verwenden Sie HomeBrew (brew.sh):

$ brew install mono

Als Nächstes installieren Sie den .NET Version Manager (DNVM), eine Zusammenstellung von Befehlszeilenprogrammen zum Aktualisieren und Konfigurieren Ihrer .NET-Ausführungsumgebung (DNX), die im Wesentlichen die plattformübergreifende Entwicklung mithilfe von .NET Core 5 ermöglicht. Zum Installieren von DNVM und DNX über Ihr Terminal führen Sie die folgenden Befehle aus:

$ brew tap aspnet/dnx
$ brew update
$ brew install dnvm

Die Mono-Laufzeit sowie DNVM und DNX sind jetzt installiert. Zum Überprüfen Ihrer DNVM-Version geben Sie am Terminal "$ dnvm" ein (siehe Abbildung 1). Falls Ihre Shell den Befehl "dnvm" nicht erkennt, müssen Sie zum Laden ggf. "source dnvm.sh" ausführen.

Abbildung 1: Überprüfen der DNVM-Version

Wählen eines Editors

Wenn Sie Windows nutzen, gibt es keine Debatte, da Sie bestimmt eine Version von Visual Studio nutzen werden. Unter OS X oder Linux haben Sie jedoch verschiedene Optionen, z. B. von einem einfachen Texteditor wie TextMate bis zu einer Vielzahl beliebter Editoren wie Sublime, Atom, Emacs oder Vim. Doch bei den Editoren für die plattformübergreifende Entwicklung gibt es mit Visual Studio Code (code.visualstudio.com) von Microsoft einen Neuzugang, der unser bevorzugter Editor nicht nur für ASP.NET 5, sondern auch für AngularJS, Node.js und die allgemeine JavaScript-Entwicklung ist (siehe Abbildung 2).

Abbildung 2: Die Startseite von Visual Studio Code

Unabhängig vom Tool, für das Sie sich entscheiden, ist OmniSharp (omnisharp.net) der Schlüssel zum Aktivieren des Editors für ASP.NET 5 unter OS X und Linux. In Visual Studio Code ist OmniSharp bereits integriert. Für andere Editoren gibt es Erweiterungs- oder Zusatzrepositorys, aus denen die Komponente heruntergeladen werden kann.

Starten Ihres ersten Projekts

Ohne die umfangreiche Visual Studio 2015-Entwicklungsumgebung müssen Sie einen anderen Ansatz zum Entwickeln einer ASP.NET 5-Anwendung unter OS X wählen. Hier kommen Yeoman (yeoman.io) und das ASP.NET-Generatorprojekt (bit.ly/1MPe5KY) ins Spiel. Yeoman ist eine auf Node.js basierende Gerüstplattform, die das Entwickeln von auf Vorlagen basierenden Generatoren für Projekte und Codedateien ermöglicht. Es handelt sich um ein Befehlszeilenprogramm, und da es auf Node.js aufsetzt, gibt es verschiedene Abhängigkeiten, um die Sie sich zunächst kümmern müssen.

Installieren Sie als Erstes Node.js und den Node Package Manager (NPM) entweder über HomeBrew oder direkt über nodejs.org:

$ brew install node

Installieren Sie im Anschluss die Generatoren mithilfe von NPM:

$ npm install -g yo generator-aspnet

Wenn Sie nicht bereits mit Bower, Grunt oder Gulp arbeiten, laden Sie auch diese Tools herunter. Sie sollten sich mit diesen Tools im Rahmen des neuen, modernen Entwicklungsstapels vertraut machen (siehe den Artikel "Moderne Tools für die Webentwicklung: Bower" in dieser Ausgabe):

$ npm install -g bower grunt-cli gulp-cli

Bower ist ein Paket-Manager für die Front-End-Webentwicklung und ein Repository für Webressourcen wie JavaScript und CSS. Grunt und Gulp sind Bibliotheken zur Ausführung von Aufgaben in Entwicklungsprozessen, wie z. B. Skript- und Bildminimierung und Transpilierung (TypeScript oder CoffeeScript).

Damit ist die Einrichtung der für die Entwicklung benötigten Tools ungeachtet des Editors abgeschlossen. Um nun den neuen Projekttyp zu starten, führen Sie "$ yo aspnet" aus, um den Yeoman-Generator zu initialisieren und das Projekt auszuwählen, das Sie erstellen möchten. Wählen Sie in diesem Fall "Web Application Basic [without Membership and Authorization]", wie in Abbildung 3 gezeigt, geben Sie den Namen Ihres Projekts ein, und drücken Sie die EINGABETASTE.

Abbildung 3: Auswählen des Projekttyps in Yeoman

Nachdem der Generator fertig gestellt ist, können Sie die Anwendung im plattformübergreifenden Webserver Kestrel ausführen. Zunächst müssen Sie allerdings die NPM-, Bower- und NuGet-Abhängigkeiten installieren. Führen Sie dazu den Befehl "restore" aus, um diese Ressourcen abzurufen:

$ cd [projectname]
$ dnu restore

Mit diesem Befehl werden alle NuGet-Pakete für das Projekt heruntergeladen, auf das die Datei "project.json" verweist.

(Wir führen auch "$ npm install" und "$ bower install" aus, um sicherzustellen, dass JavaScript- und Benutzeroberflächen-Komponentenressourcen auf dem neuesten Stand sind, was aber nicht erforderlich ist.)

Führen Sie als Nächstes den Befehl zum Starten von Kestrel aus:

$ dnx . kestrel

(Nach Veröffentlichung von ASP.NET 5 Beta 7 wird dieser Befehl in "dnx kestrel" geändert.)

Das Wort "Started" wird im Terminalfenster angezeigt, und Sie können nun die Website durch Navigieren zu "http://localhost:5000" anzeigen. An dieser Stelle haben Sie das Projekt erstellt, Pakete wiederhergestellt und die Website ohne Windows oder Visual Studio ausgeführt. Als Nächstes öffnen Sie den Code in Visual Studio Code.

Bearbeiten von ASP.NET

Wie bereits erwähnt, ist Visual Studio Code ein ausgezeichneter Editor für die plattformübergreifende Entwicklung. Öffnen Sie das Projekt entweder wie gewöhnlich oder über die Tastenkombination "code" im Projektordner. (Unter bit.ly/1LwonPN erfahren Sie, wie Sie die Tastenkombination "code" einrichten.)

Nachdem Sie den Quellordner in Visual Studio Code geöffnet haben, können Sie mit der Entwicklung der Anwendung beginnen. Abbildung 4 zeigt das Ergebnis, wenn Sie das Projekt in VS Code öffnen.

Abbildung 4: Öffnen eines Projekts im Visual Studio Code-Editor

Wie Sie sehen, erhalten Sie die vollständige Syntaxhervorhebung für C#-Dateien, die Sie erwarten – in Mac OS X! Wenn Sie genau hinschauen, finden Sie in Zeile 2 neben dem Cursor eine Glühbirne. Die Glühbirne dient wie in Visual Studio zum schnellen Ausführen kontextbezogener Aktionen. In diesem Fall schlägt Visual Studio Code vor, unnötige Verwendungen zu entfernen. Lassen Sie uns nun Ihrem Projekt neue Dateien hinzufügen.

Sie müssen nichts besonderes tun, um Ihrem ASP.NET 5-Projekt eine neue Datei hinzuzufügen. Fügen Sie die Datei einfach dem Verzeichnis hinzu, woraufhin sie automatisch einbezogen wird. In VS Code können Sie in der Strukturansicht auf die Schaltfläche "Datei hinzufügen" klicken oder STRG+N drücken, um eine neue leere Datei hinzuzufügen. Wenn Sie mit etwas Anfangsinhalt loslegen möchten, können Sie "yo aspnet" verwenden. Zum Hinzufügen von Dateien zu vorhandenen ASP.NET 5-Projekten rufen Sie mit der folgenden Syntax einen Subgenerator auf:

$ yo aspnet:<Name> <options>

Um dies zu demonstrieren, lassen Sie uns einen neuen MVC-Controller und eine Ansicht für eine neue Seite "Admin" für die Webanwendung hinzufügen. Zuerst fügen wir den MVC-Controller hinzu. Durch Ausführen von "yo aspnet" werden dem aktuellen Arbeitsverzeichnis Dateien hinzugefügt. Sie müssen also über "cd" zum richtigen Verzeichnis wechseln, ehe Sie die Befehle ausführen. Fügen Sie zum Hinzufügen des MVC-Controllers im Ordner "Controllers" den folgenden Befehl aus:

yo aspnet:MvcController AdminController

Nach Ausführung des Befehls enthält das aktuelle Arbeitsverzeichnis die neue Datei "Hello.cs", deren Inhalt in Abbildung 5 gezeigt wird.

Abbildung 5: Hello.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;
// For more information on enabling MVC for empty projects, visit
// go.microsoft.com/fwlink/?LinkID=397860
namespace MyNamespace
{
  public class AdminController : Controller
  {
    // GET: /<controller>/
    public IActionResult Index()
    {
      return View();
    }
  }
}

Die Datei sieht aus wie bei Verwenden von "Datei | Neues Element" in Visual Studio und Auswählen von "MVC-Controller" mit der Ausnahme, dass der Namespacename nicht automatisch aktualisiert wird, sondern stattdessen als "MyNamespace" hart codiert wird. Derzeit müssen Sie die Namespacedeklaration an das anpassen, was Sie erwarten, was in einer künftigen Version nicht mehr der Fall sein wird. Der Subgenerator "MvcController" ist lediglich einer von vielen in "yo aspnet" verfügbaren Subgeneratoren. Zum Anzeigen der vollständigen Liste der Subgeneratoren führen Sie diesen Befehl aus:

$ yo aspnet --help

Die Subgeneratoren in "yo aspnet" entsprechen den Elementvorlagen in Visual Studio bei Verwenden von "Datei | Neues Element hinzufügen". Zum Hinzufügen einer Ansicht verwenden Sie den Subgenerator "MvcView". Fügen Sie zum Hinzufügen der Ansicht "Admin" im Ordner "Views" den folgenden Befehl aus:

$ yo aspnet:MvcView Index

Die resultierende Ansicht "Index.cshtml" ist ziemlich einfach:

@*
  // For more information on
  // enabling MVC for empty projects,
  // visit bit.ly/1PBdyKc
*@
@{
  // ViewBag.Title = "Index Page";
}

Wiederum entspricht der mithilfe von "yo aspnet" generierte Inhalt dem Dialogfeld "Neues Element hinzufügen" in Visual Studio. Der Datei "Index.cshtml" können Sie einen Header hinzufügen, sodass Sie zu dieser Seite navigieren können, um zu prüfen, ob alles funktioniert:

<h1>Admin Page</h1>

Lassen Sie uns nun prüfen, was wir alles zum Erstellen und Ausführen dieser Anwendung tun müssen.

Zuvor wurde erwähnt, dass Sie Ihre Anwendung mithilfe des Befehls "dnx . kestrel" ausführen können. Bei Verwenden von VS Code können Sie den Webserver über die in Abbildung 6 gezeigte Befehlspalette starten.

Abbildung 6: Starten eines Webservers in Visual Studio Code

Bei Verwenden von VS Code wird Ihr Projekt im Hintergrund mithilfe von OmniShark erstellt, wenn sich Ihre Quelldateien ändern. Um in VS Code Fehler und Warnungen anzuzeigen, wie z. B. diejenigen in Abbildung 7, klicken Sie auf der Statusleiste auf die Schaltfläche "Fehler und Warnungen". Wie Sie sehen, zeigt VS Code fehlerhaften Code in Zeile 16 an.

Abbildung 7: Anzeigen von Fehlern und Warnungen in Visual Studio Code

Sie können Ihr Projekt auch über die Befehlszeile erstellen. Angenommen, Ihre neue "AdminController"-Klasse weist einen Buildfehler auf. Führen Sie zum Erstellen der Anwendung über die Befehlszeile Folgendes aus:

$ dnu build

Hiermit sollten dieselben Fehler und Warnungen wie von VS Code zurückgegeben werden. Nachdem Sie gesehen haben, wie Ihre Anwendung erstellt und ausgeführt wird, wollen wir uns nun kurz mit dem Debugging und der Bereitstellung beschäftigen.

Debuggen

Das Debuggen von ASP.NET 5 wird derzeit auf keiner anderen Plattform als Windows und Visual Studio unterstützt, was bedeutet, dass Sie eine ASP.NET 5-Anwendung, die unter Mono für OS X oder Linux ausgeführt wird, nicht debuggen können. ASP.NET 5-Anwendungen werden mit dem Roslyn-Compiler und nicht mit dem Mono-Compiler kompiliert, weshalb keine Debuginformationen ausgegeben werden. Auch Visual Studio Code unterstützt das Debuggen bislang nicht, aber Sie können stets Visual Studio in einem virtuellen Computer auf Ihrem Mac- oder Linux-Computer verwenden. Es bleibt zu hoffen, dass das Visual Studio Code-Team das Debugging nach der Veröffentlichung der CoreCLR unterstützt.

Bereitstellung

Sie haben erfahren, wie Sie Ihre Anwendung lokal entwickeln. Nun wollen wir einen Blick auf die Hostingoptionen werfen. Eine detaillierte Beschäftigung mit diesem Thema würde eigentlich einen eigenen Artikel erfordern, weshalb wir hier nur einen allgemeinen Überblick präsentieren und Sie auf einige externe Ressourcen verweisen. Die neuesten Informationen finden Sie unter bit.ly/1fvDQ41.

Allgemein gibt es diese Veröffentlichungsoptionen für ASP.NET 5:

• Veröffentlichung über die Befehlszeile mit dem Befehlszeilenprogramm "dnu publish"
• Veröffentlichung in Azure-Web-Apps über Git
• Veröffentlichung in einem in Azure ausgeführten Docker-Container

Die Zeile mit dem Befehl "dnu publish" befindet sich in der Mitte jeder Veröffentlichungsmethode. Der Befehl wird in einer Anwendung in einem Format gepackt, das auf Webservern ausgeführt werden kann. Sehen wir uns das einmal näher an.

Führen Sie zum Starten und Anzeigen der verfügbaren Befehlszeilenoptionen Folgendes aus:

dnu publish –help

Abbildung 8 zeigt das Ergebnis der Ausführung dieses Befehls.

Abbildung 8: Abrufen von Hilfe mit dem Befehl "dnu publish"

Die wichtigste Befehlszeilenoption ist das Argument "--out (-o)", mit dem Sie den Ordner angeben können, in dem Ihre Dateien veröffentlicht werden. Bei Bedarf können Sie sich auch die anderen Optionen ansehen.

Nach der Veröffentlichung der Anwendung in einem Ordner müssen Sie diesen Ordner bloß auf Ihren Webserver kopieren. Bei Veröffentlichung auf einem Windows-Computer mit ausgeführten IIS können Sie Ihre Website bis bisher konfigurieren. Informationen zum Konfigurieren Ihres Webservers unter Linux finden Sie unter bit.ly/1E8uebl.

Bei Veröffentlichung in Azure wird Unterstützung geboten, die Sie für den Einstieg nutzen können. Azure unterstützt ASP.NET 5-Anwendungen in Azure-Web-Apps und Docker-Containern. Zum Bereitstellen in Azure-Web-Apps über einen Nicht-Windows-Computer können Sie FTP oder Git verwenden. Bei FTP veröffentlichen Sie die Ergebnisse von "dnu publish". Weitere Informationen finden Sie unter bit.ly/1LnFC2T.

Das Git-basierte Veröffentlichungsmodell ist einfach zu nutzen und kann fortlaufende Bereitstellungsszenarien unterstützen. Erste Schritte zur Veröffentlichung in Azure-Web-Apps mithilfe von Git finden Sie unter bit.ly/1hQljS0. Das ist alles, was Sie für Ihren Einstieg in die Entwicklung und Ausführung von ASP.NET 5-Anwendungen auf der Plattform Ihrer Wahl wissen müssen.

Zusammenfassung

Für die Entwicklung von Webanwendungen mit ASP.NET mussten Sie bislang mit Windows und Visual Studio arbeiten. Nun können Sie ASP.NET 5 und dazugehörige Befehlszeilenprogramme und Tools auf jeder Plattform nutzen. Aber das ist erst der Anfang. Neueste Informationen zu ASP.NET 5 finden Sie unter github.com/aspnet/Home. Das Projekt "yo aspnet" ist vollständig in den Händen der Community. Wenn Sie dazu beitragen möchten, beteiligen Sie sich unter bit.ly/1PvtcGX.

---

Shayne Boyer ist an ASP.NET MVP, Communitysprecher und Lösungsarchitekt aus Orlando, Florida, USA. Seit über 20 Jahren arbeitet er an der Entwicklung von auf Microsoft-Produkten basierenden Lösungen. In den letzten 10 Jahren hat er an umfangreichen Webanwendungen mit Schwerpunkt auf Produktivität und Leistung gearbeitet. Sie können ihn unter Twitter @spboyer und auf seiner Website unter tattoocoder.com erreichen.

Sayed Ibrahim Hashimi ist ein leitender Programm-Manager bei Microsoft im Visual Studio Web-Team. Er hat mehrere Bücher zu Microsoft-Technologien verfasst und ist der Urheber von SideWaffle und TemplateBuilder sowie Mitbeteiligter an der Entwicklung von OmniSharp. Sie können ihn unter Twitter @SayedIHashimi und in seinem Blog unter sedodream.com erreichen.

Unser Dank gilt dem folgenden technischen Experten bei Microsoft für die Durchsicht dieses Artikels: Scott Hanselman