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.
źródło
Odpowiedzi:
Masz dwie opcje.
Utwórz osobne projekty mywebsite.api i mywebsite.app w swoim rozwiązaniu.
Zalety
Utwórz pojedynczy projekt z aplikacją kliencką i interfejsem API w jednym projekcie
Zalety
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.
źródło
/
i na interfejsie/api
. W IIS prawdopodobnie mogę to łatwo rozwiązać poprzez „zamontowanie” strony pod/api
, ale nie jestem pewien, jak to rozwiązać za pomocą VS / IISExpress.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.
źródło
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.
źródło
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 project
iMultiple 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.
źródło