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

16

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.

coding-style asp.net visual-studio angularjs Christian Wattengård
quelle
Welche Version von VS verwenden Sie? VS2015 hat einige ziemlich nette Integrationstools für Angular / Grunt / Node / etc, die ich als genauso benutzerfreundlich befunden habe wie andere IDEs, die für die Front-End-Entwicklung entwickelt wurden.
Trotzki94
Ich bin auf VS2015u2, aber selbst mit den netten Werkzeugen und allem bin ich mir immer noch nicht sicher, ob das Einfügen des SPA und der API in dasselbe Projekt "meine Bedenken trennen" kann. Was ist, wenn ich in Zukunft jemanden bekomme, der mir bei dem Projekt hilft und der nur am Front-End arbeiten muss? Sie sollten nicht gezwungen sein, das gesamte Programm herunterzuladen, oder?
Christian Wattengård

Antworten:

13

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.

CountZero
quelle
Wie löse ich eigentlich das Hosting des Webapp-Teils mit dieser Lösung? Ich möchte wirklich, dass sie auf demselben Server landen, nur die Web-App /und die API /api. Unter IIS kann ich das wahrscheinlich leicht lösen, indem /apiich die Site unter "mount" , aber ich bin nicht sicher, wie ich das mit VS / IISExpress lösen soll.
Christian Wattengård
Etwas andere Frage. Ich werde meine Antwort auch mit diesen Informationen aktualisieren.
CountZero
Aktualisiert meine Antwort. Bitte lassen Sie mich wissen, wenn etwas nicht klar ist.
CountZero
Dies ist die Lösung, für die ich mich entschieden habe. Iis Express funktioniert jedoch problemlos mit einem Projekt unter einem Unterordner und dem anderen im Stammverzeichnis. Also habe ich mich dafür entschieden.
Christian Wattengård
Ich benutze auch IIS Express. Es lohnt sich, den Lite-Server für die clientseitige Entwicklung zu verwenden, da alle Änderungen am clientseitigen Code automatisch aktualisiert werden. Kann IIS zusammen mit dieser Methode verwenden.
CountZero
2

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.

Chet
quelle
Amen. Immer zwei Projekte zu machen ist Frachtkult
StingyJack
0

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.

st.
quelle
0

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.

Mike Devenney
quelle
Ich habe versucht, es rund zu machen (vorausgesetzt, das wäre eine bessere Form als eine Textwand), aber nach einigen fehlgeschlagenen Versuchen habe ich mich für Absätze entschieden.
Mike Devenney