Gdzie umieścić aplikację Angular w interfejsie API sieci Web ASP.NET?

Zaczynam aplikację greenfield i chcę używać ASP.NET (4.6) i Angular 2. Dla backendu stworzyłem projekt w Visual Studio, a teraz zastanawiam się, gdzie umieścić aplikację Angular. Naprawdę chcę używać npm i narzędzi węzła dla interfejsu, ale ostatecznie będzie on hostowany w tej samej instancji usługi Azure App Service z aplikacją Angular pod domain.com/api pod domain.com/api/lub pod takim lub innym .

Jak oddzielić aplikacje w Visual Studio? Czy aplikacja Angular powinna być w swoim własnym projekcie? Czy powinienem mieć aplikację Angular w tym samym projekcie co API? Nawet jeśli nie chcę do tego używać nugetu i innych narzędzi VS? (Dla frontonu VS byłby mniej więcej chwalonym edytorem kodu). Nie znalazłem najlepszych praktyk dla tej kombinacji.

Masz dwie opcje.

Utwórz osobne projekty mywebsite.api i mywebsite.app w swoim rozwiązaniu.

Zalety

• Właściwe rozdzielenie obaw.
• Możesz wdrożyć aktualizacje interfejsu API i interfejsu użytkownika niezależnie.
• Architektura witryn może być zmieniana niezależnie (tzn. Możesz zaktualizować interfejs API, aby działał na asp.net 5 bez wpływu na stronę)
• Odkurzacz

Utwórz pojedynczy projekt z aplikacją kliencką i interfejsem API w jednym projekcie

Zalety

• Łatwiejsze wdrażanie aktualizacji
• Nie trzeba konfigurować do pracy z CORS

Jak hostować i rozwijać aplikację lokalnie.

Skutecznym rozwiązaniem dla programistów jest użycie lite-server do uruchomienia aplikacji klienckiej (Angular 2) i IIS / Casini do hostowania twojego internetowego interfejsu API. Dobry przykład tego, jak go używać, znajduje się w samouczku Szybki start Angulara 2 (link poniżej). Moim procesem programistycznym jest uruchomienie interfejsu API za pomocą programu Visual Studio i praca z kodowaniem witryny klienta za pomocą programu Visual Studio Code i serwera lite (Atom to kolejny dobry wybór).

Z dokumentacji serwera Lite. Lekki serwer tylko dla węzłów programistycznych, który obsługuje aplikację internetową, otwiera ją w przeglądarce, odświeża po zmianie html lub javascript, wstrzykuje zmiany CSS za pomocą gniazd i ma stronę rezerwową, gdy nie znaleziono trasy.

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

Mój widok

Nie ma problemu z użyciem Nuget / NPM zarówno w tym samym rozwiązaniu i nie powinno to wpłynąć na wybór struktury projektu.

Korzystam z podejścia opartego na jednym projekcie tylko w przypadku aplikacji demonstracyjnych / proof of concept. W przypadku wersji produkcyjnych zawsze będę odpowiednio rozdzielać swoje obawy i mieć dedykowany projekt interfejsu API.

Znalazłem ten projekt siewnika https://github.com/damienbod/AngularWebpackVisualStudio/, który pozwala rozwijać i hostować klienta i serwer w jednym projekcie Visual Studio (2017).

Zgadzam się z komentarzami @CountZero na temat zalet korzystania z dwóch witryn do hostowania (zwłaszcza oddzielenia problemów), ale wielką wadą jest dla mnie konieczność włączenia obsługi CORS w interfejsie API, gdy w większości przypadków jedynym użytkownikiem interfejsu API jest Twój własny interfejs klienta. Nie jestem ekspertem od CORS, ale wydaje mi się, że to niepotrzebny narzut i wiąże się z dodatkowymi zagrożeniami bezpieczeństwa.

Oczywiście możesz je podzielić na dwa rozwiązania, dodać kolejny projekt w rozwiązaniu lub mieć je w tym samym projekcie. Powiem co chciałbym.

IMHO, jeśli chcesz skorzystać z sesji w usługach IIS i / lub ukryć proces uwierzytelniania w interfejsie API, napisz również kąt w Visual Studio. VS2015 ma całkiem dobrą integrację (intellisense) z angular, jeśli instalujesz rozszerzenia programistyczne. Muszę powiedzieć, że ten sposób byłby bardziej kompaktowy i przenośny.

Jeśli zamierzasz dodać strony dokumentacji do projektu zaplecza, rozdziel je na własne projekty (to samo rozwiązanie) i obsługuj API z subdomeny lub podfolderu.

Jeśli nie interesuje Cię żadna z powyższych sytuacji i czujesz się bardziej komfortowo ze swoim przyzwyczajeniem, wybierz to. Jeśli masz uwierzytelnianie oparte na tokenach, możesz bez wątpienia rozdzielać projekty.

W VS 2015 masz możliwość uruchomienia więcej niż jednego projektu w swoim rozwiązaniu podczas debugowania, pod warunkiem, że dla każdego z nich ustawisz różne adresy URL projektu.

Jako przykład możesz ustawić uruchamianie projektu aplikacji Angular, http://localhost:55000/a projekt interfejsu API można uruchomić http://localhost:55000/api. Właściwość URL projektu ustawia się w oknie dialogowym Właściwości projektu na karcie WWW.

Następnie, aby ustawić wiele projektów startowych, w oknie dialogowym Właściwości rozwiązania w obszarze Wspólne właściwości wybierz węzeł Projekt startowy. Po prawej stronie znajdziesz opcje dla Single startup projecti Multiple startup projects. Wybierz przycisk opcji Wiele projektów startowych. Następnie wybierz odpowiednią akcję obok projektu Angular (Rozpocznij bez debugowania, ponieważ jest to Angular i prawdopodobnie będziesz debugował to w przeglądarce), a następnie obok projektu API wybierz Start.

Teraz, gdy klikniesz Uruchom, Twoja aplikacja Angular otworzy się w przeglądarce, a interfejs API sieci Web również zacznie działać. Możesz ustawić punkty przerwania w swoich metodach API sieci Web i uderzyć je w aplikacji Angular.