Speicherort der Angular-App in einer ASP.NET-Web-API-Lösung

Ich starte eine Greenfield-App und möchte ASP.NET (4.6) und Angular 2 verwenden. Für das Backend habe ich ein Projekt in Visual Studio erstellt und frage mich nun, wo ich die Angular-App platzieren soll. Ich möchte eigentlich npm und Node-Tools für das Front-End verwenden, aber am Ende wird es in derselben Azure App Service-Instanz wie die Angular-App unter domain.com/und die API unter domain.com/api/oder so gehostet .

Wie soll ich die Apps in Visual Studio trennen? Sollte sich die Angular-App in einem eigenen Projekt befinden? Sollte ich die Angular-App im selben Projekt wie die API haben? Auch wenn ich kein Nuget und die anderen VS-Tools dafür verwenden möchte? (Für das Front-End wäre VS mehr oder weniger ein verherrlichter Code-Editor). Ich habe keine Best Practices für diese Kombination gefunden.

Sie haben zwei Möglichkeiten.

Erstellen Sie separate Projekte mywebsite.api und mywebsite.app in Ihrer Lösung.

Vorteile

• Die richtige Trennung von Bedenken.
• Sie können Updates für Ihre API und Ihr Front-End unabhängig voneinander bereitstellen.
• Die Architektur der Websites kann unabhängig geändert werden (dh Sie können Ihre API aktualisieren, um sie auf asp.net 5 auszuführen, ohne die Website zu beeinträchtigen).
• Reiniger

Erstellen Sie ein einzelnes Projekt mit der Client-App und der API in einem Projekt

Vorteile

• Einfachere Bereitstellung von Updates
• Für die Arbeit mit CORS ist keine Konfiguration erforderlich

Wie Sie die Anwendung lokal hosten und entwickeln.

Eine effektive Lösung für die Entwicklung ist die Verwendung von Lite-Server zum Ausführen Ihrer Client-Anwendung (Angular 2) und von IIS / Casini zum Hosten Ihres Web-API-Codes. Ein gutes Beispiel für die Verwendung finden Sie im Angular 2-Schnellstart-Tutorial (siehe unten). Mein Entwicklungsprozess besteht darin, die API über Visual Studio auszuführen und mit Client-Site-Codierung unter Verwendung von Visual Studio-Code und Lite-Server zu arbeiten (Atom ist eine weitere gute Wahl).

Von den Lite-Server-Dokumenten. Nur für die Lightweight-Entwicklung vorgesehener Knotenserver, der eine Web-App bereitstellt, diese im Browser öffnet, aktualisiert, wenn sich HTML oder Javascript ändern, CSS-Änderungen mithilfe von Sockets einfügt und eine Fallback-Seite aufweist, wenn keine Route gefunden wird.

https://code.visualstudio.com/

https://angular.io/docs/js/latest/quickstart.html

https://www.youtube.com/watch?v=e_FVeYWUF3s

https://github.com/johnpapa/lite-server

Meine Sicht

Es ist kein Problem, Nuget / NPM in derselben Lösung zu verwenden, und dies sollte Ihre Wahl der Projektstruktur nicht beeinflussen.

Ich verwende nur den Einzelprojektansatz für Demo / Proof-of-Concept-Anwendungen. Bei Produktionsfreigaben werde ich meine Anliegen immer richtig trennen und ein dediziertes API-Projekt haben.

Ich habe dieses Seeder-Projekt https://github.com/damienbod/AngularWebpackVisualStudio/ gefunden , mit dem Sie den Client und den Server in einem einzigen Visual Studio (2017) -Projekt entwickeln und hosten können.

Ich stimme den Kommentaren von @CountZero über die Vorteile der Verwendung von zwei Sites als Host zu (insbesondere die Trennung von Bedenken), aber der große Nachteil für mich ist, dass ich CORS-Unterstützung in Ihrer API aktivieren muss, wenn in den meisten Fällen der einzige Verbraucher Ihrer API Ihre ist eigenes Client-Frontend. Ich bin kein Experte für CORS, aber dies scheint nur ein unnötiger Aufwand zu sein und bringt zusätzliche Sicherheitsbedrohungen mit sich.

Nun, natürlich können Sie sie in zwei Lösungen unterteilen, ein anderes Projekt in die Lösung einfügen oder sie in demselben Projekt haben. Ich werde sagen, was ich würde.

IMHO, wenn Sie Sessions in IIS nutzen und / oder den Authentifizierungsprozess in der API verbergen möchten , schreiben Sie winklig auch in Visual Studio. VS2015 hat eine ziemlich gute Integration (Intellisense) mit Angular, wenn Sie Erweiterungen für die Webentwicklung installieren. Ich muss sagen, dass dieser Weg kompakter und tragbarer wäre.

Wenn Sie Dokumentationsseiten zum Backend-Projekt hinzufügen möchten, trennen Sie diese in ihre eigenen Projekte (dieselbe Lösung) und stellen Sie die API aus einer Unterdomäne oder einem Unterordner bereit.

Wenn Sie an keinem der oben genannten Punkte interessiert sind und sich mit der Art und Weise, wie Sie es gewohnt sind, wohler fühlen, entscheiden Sie sich dafür. Wenn Sie über eine tokenbasierte Authentifizierung verfügen, können Sie Projekte ohne Zweifel trennen.

In VS 2015 können Sie beim Debuggen mehr als ein Projekt in Ihrer Lösung starten, sofern Sie für jedes Projekt unterschiedliche Projekt-URLs festlegen.

Als Beispiel würden Sie festlegen, dass Ihr Angular-App-Projekt ausgeführt wird http://localhost:55000/und dass das API-Projekt ausgeführt wird http://localhost:55000/api. Sie legen die Eigenschaft "Projekt-URL" im Dialogfeld "Projekteigenschaften" auf der Registerkarte "Web" fest.

Um dann mehrere Startprojekte festzulegen, wählen Sie im Dialogfeld Lösungseigenschaften unter Allgemeine Eigenschaften den Knoten Startprojekt. Rechts finden Sie Optionen für Single startup projectund Multiple startup projects. Aktivieren Sie das Optionsfeld Mehrere Startprojekte. Wählen Sie dann die entsprechende Aktion neben Ihrem Angular-Projekt aus (Starten Sie ohne Debugging, da es Angular ist und Sie das wahrscheinlich im Browser debuggen werden), und wählen Sie dann neben Ihrem API-Projekt Start aus.

Wenn Sie nun auf Ausführen klicken, wird Ihre Angular-App im Browser geöffnet und die Web-API wird ebenfalls ausgeführt. Sie können Haltepunkte in Ihren Web-API-Methoden festlegen und über die Angular-App festlegen.