Куди помістити додаток Angular у рішення веб-API ASP.NET?

Я запускаю додаток greenfield, і хочу використовувати ASP.NET (4.6) та Angular 2. Для бекенду я створив проект у Visual Studio, і тепер мені цікаво, куди поставити додаток Angular. Мені дуже хочеться використовувати npm та node-інструменти для передніх версій, але врешті-решт він буде розміщений у тому самому екземплярі служби Azure App Service із програмою Angular at domain.com/та api під тим domain.com/api/чи іншим.

Як слід розділити програми в Visual Studio? Чи повинен додаток Angular бути власним проектом? Чи повинен я мати програму Angular у тому ж проекті, що і API? Навіть якщо я не хочу використовувати для цього nuget та інші VS-інструменти? (Для переднього кінця VS був би більш-менш прославленим редактором коду). Я не знайшов жодної найкращої практики для цієї комбінації.

У вас є два варіанти.

Створіть у своєму рішенні окремі проекти mywebsite.api та mywebsite.app.

Переваги

• Правильне розділення проблем.
• Ви можете самостійно розгортати оновлення для вашого api та переднього кінця.
• Архітектуру сайтів можна змінювати самостійно (тобто ви можете оновити свій api для роботи на asp.net 5, не впливаючи на веб-сайт)
• Очисник

Створіть один проект із клієнтською програмою та api в одному проекті

Переваги

• Простіше розгортати оновлення
• Не потрібно налаштовувати роботу з CORS

Як розмістити та розробити додаток на місцевому рівні.

Ефективним рішенням для розробки є використання Lite-сервера для запуску клієнтського додатка (Angular 2) та IIS / Casini для розміщення вашого веб-коду api-коду. Хороший приклад того, як його використовувати, наводиться у підручнику для швидкого початку Angular 2 (зв'язаний нижче). Мій процес розробки полягає в запуску api через Visual Studio і роботі з кодуванням сайту клієнта за допомогою коду Visual Studio і lite-сервера (Atom - ще один хороший вибір).

Від документів-сервера Lite. Легкий сервер вузлів для розробки, який обслуговує веб-додаток, відкриває його у веб-переглядачі, оновлює при зміні html або javascript, вводить зміни CSS за допомогою сокетів і має резервну сторінку, коли маршрут не знайдено.

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

Мій погляд

У використанні Nuget / NPM як в одному і тому ж рішенні немає проблем, і це не повинно інформувати ваш вибір структури проекту.

Я використовую єдиний проектний підхід лише для демонстрації / підтвердження застосування концепцій. Щодо виробничих випусків, я завжди буду належним чином відокремлювати свої проблеми та матиму виділений проект api.

Я знайшов цей сімейний проект https://github.com/damienbod/AngularWebpackVisualStudio/, який дозволяє розробляти та розміщувати клієнта та сервера в одному проекті Visual Studio (2017).

Я погоджуюся з коментарями @CountZero про переваги використання двох веб-сайтів для розміщення хостингу (окрім розділення проблем), але для мене великим недоліком є ​​те, щоб увімкнути підтримку CORS у вашому API, коли в більшості випадків єдиним споживачем вашого API є ваш власний клієнтський фронт. Я не є експертом у галузі CORS, але це просто здається непотрібним накладними та також має додаткові загрози безпеці.

Ну, очевидно, ви можете розділити їх на два рішення, додати ще один проект у рішення або мати їх в одному проекті. Я скажу, що б я.

IMHO, якщо ви хочете скористатися сеансами в IIS та / або приховати процес аутентифікації в API, напишіть також кутовий у Visual Studio. VS2015 має досить гарну інтеграцію (intellisense) з кутовими, якщо встановити розширення для веб-розробок. Треба сказати, що цей спосіб був би більш компактним і портативним.

Якщо ви збираєтеся додати сторінки документації в бекенд-проект, то розділіть їх на власні проекти (те саме рішення) і подайте api з піддомену або підпапки.

Якщо вас нічого не цікавить вище, і вам зручніше, як ви звикли, продовжуйте це робити. Якщо ви будете мати аутентифікацію на основі лексем, ви можете розділяти проекти без сумнівів.

У VS 2015 у вас є можливість запустити декілька проектів у своєму рішенні під час налагодження, поки ви встановите різні URL-адреси проекту для кожного.

Як приклад, ви б встановили проект запуску програми Angular, а проект http://localhost:55000/API можна встановити для запуску http://localhost:55000/api. Властивість URL-адреси проекту ви встановлюєте в діалоговому вікні Властивості проекту на вкладці Веб.

Потім, щоб встановити кілька проектів запуску, у діалоговому вікні "Властивості рішення" в розділі Загальні властивості виберіть вузол "Запуск проекту". Праворуч ви знайдете варіанти для Single startup projectта Multiple startup projects. Виберіть перемикач "Кілька проектів запуску". Потім виберіть відповідну дію поруч із проектом Angular (Почніть без налагодження, оскільки це Angular, і ви, ймовірно, будете налагоджувати це в браузері), а потім поруч із проектом API виберіть «Почати».

Тепер, коли ви натиснете, запустіть додаток Angular у веб-переглядачі, і веб-API також почне працювати. Ви можете встановити точки перерви у своїх методах Web API і натиснути їх за допомогою програми Angular.