¿Dónde colocar la aplicación Angular en una solución de API web ASP.NET?

16

Estoy comenzando una aplicación nueva y quiero usar ASP.NET (4.6) y Angular 2. Para el backend, he creado un proyecto en Visual Studio, y ahora me pregunto dónde colocar la aplicación Angular. Realmente quiero usar npm y node-tools para el front-end, pero al final estará alojado en la misma instancia de Azure App Service con la aplicación Angular en domain.com/y la api debajo domain.com/api/o tal.

¿Cómo debo separar las aplicaciones en Visual Studio? ¿Debería la aplicación Angular estar en su propio proyecto? ¿Debo tener la aplicación Angular en el mismo proyecto que la API? ¿Incluso si no quiero usar nuget y las otras herramientas VS para ello? (Para el front-end, VS sería más o menos un editor de código glorificado). No he encontrado ninguna práctica recomendada para esta combinación.

coding-style asp.net visual-studio angularjs Christian Wattengård
fuente
¿Qué versión de VS estás usando? VS2015 tiene algunas herramientas de integración bastante agradables para angular / gruñido / nodo / etc. que he encontrado que son tan útiles como otros IDE creados con el desarrollo front-end en mente.
Trotski94
Estoy en VS2015u2, pero incluso con las buenas herramientas y todo eso, todavía no estoy seguro de si poner el SPA y la API en el mismo proyecto "está separando mis preocupaciones" lo suficiente. ¿Qué pasa si, en el futuro, consigo a alguien que me ayude con el proyecto, y solo necesitan trabajar en el front-end? No deberían estar obligados a descargar todo el schmedangle, ¿verdad?
Christian Wattengård

Respuestas:

13

Tienes dos opciones.

Cree proyectos mywebsite.api y mywebsite.app separados en su solución.

Ventajas

  • Separación adecuada de las preocupaciones.
  • Puede implementar actualizaciones en su API y su front-end de forma independiente.
  • La arquitectura de los sitios se puede cambiar de forma independiente (es decir, puede actualizar su API para que se ejecute en asp.net 5 sin afectar el sitio web)
  • Limpiador

Cree un solo proyecto con la aplicación cliente y la API en un solo proyecto

Ventajas

  • Más fácil de implementar actualizaciones
  • No es necesario configurar para trabajar con CORS

Cómo alojar y desarrollar la aplicación localmente.

Una solución efectiva para el desarrollo es utilizar lite-server para ejecutar su aplicación cliente (Angular 2) e IIS / Casini para alojar su código API web. Un buen ejemplo de cómo usarlo se proporciona en el tutorial de inicio rápido de Angular 2 (vinculado a continuación). Mi proceso de desarrollo es ejecutar la API a través de Visual Studio y trabajar con la codificación del sitio del cliente usando Visual Studio Code y lite-server (Atom es otra buena opción).

De los documentos lite-server. Servidor de nodo único de desarrollo ligero que sirve una aplicación web, la abre en el navegador, se actualiza cuando cambian html o javascript, inyecta cambios CSS utilizando sockets y tiene una página alternativa cuando no se encuentra una ruta.

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

Mi vista

No hay ningún problema al usar Nuget / NPM en la misma solución y esto no debería informar su elección de la estructura del proyecto.

Solo uso el enfoque de proyecto único para aplicaciones de demostración / prueba de concepto. Para los lanzamientos de producción, siempre separaré mis preocupaciones correctamente y tendré un proyecto de API dedicado.

CountZero
fuente
¿Cómo resuelvo en realidad alojar la parte webapp con esta solución? Realmente quiero que terminen en el mismo servidor, solo la aplicación web /y la API /api. En IIS, probablemente pueda resolver esto fácilmente "montando" el sitio /api, pero no estoy seguro de cómo resolverlo con VS / IISExpress.
Christian Wattengård
Pregunta ligeramente diferente. Actualizaré mi respuesta con esta información también.
CountZero
Actualizado mi respuesta. Avíseme si algo no está claro.
CountZero
Esta es la solución que busqué. Sin embargo, Iis Express funciona bien con un proyecto en una subcarpeta y el otro en la raíz. Entonces fui por eso.
Christian Wattengård
Yo también uso IIS Express. Vale la pena usar el servidor lite para el desarrollo del lado del cliente, ya que cualquier cambio realizado en el código del lado del cliente se actualiza automáticamente. Puede usar IIS en conjunto con este método.
CountZero
2

Encontré este proyecto de sembradora https://github.com/damienbod/AngularWebpackVisualStudio/ que le permite desarrollar y alojar el cliente y el servidor en un solo proyecto de Visual Studio (2017).

Estoy de acuerdo con los comentarios de @CountZero sobre las ventajas de usar dos sitios para alojar (especialmente la separación de preocupaciones), pero la gran desventaja para mí es tener que habilitar el soporte de CORS en su API cuando en la mayoría de los casos el único consumidor de su API es su Cliente propio front end. No soy un experto en CORS, pero esto se siente como una sobrecarga innecesaria y también viene con amenazas de seguridad adicionales.

Chet
fuente
Amén. Siempre hacer dos proyectos es culto de carga
StingyJack
0

Bueno, obviamente puede separarlos en dos soluciones, agregar otro proyecto en solución o tenerlos en el mismo proyecto. Te diré lo que haría.

En mi humilde opinión, si desea aprovechar las sesiones en IIS y / u ocultar el proceso de autenticación dentro de la API, escriba angular en Visual Studio también. VS2015 tiene una integración bastante buena (intellisense) con angular si instala extensiones de desarrollo web. Debo decir que de esta manera sería más compacto y portátil.

Si va a agregar páginas de documentación en un proyecto de back-end, luego sepárelas en sus propios proyectos (misma solución) y sirva la API desde un subdominio o subcarpeta.

Si no está interesado en ninguno de los anteriores y se siente más cómodo con la forma en que está acostumbrado, hágalo. Si va a tener una autenticación basada en token, puede separar proyectos sin duda.

S t.
fuente
0

En VS 2015, tiene la opción de iniciar más de un proyecto en su solución al depurar, siempre y cuando establezca diferentes URL de proyecto para cada uno.

Como ejemplo, configuraría la ejecución de su proyecto de aplicación Angular http://localhost:55000/y el proyecto API se puede configurar para que se ejecute http://localhost:55000/api. Establece la propiedad URL del proyecto en el cuadro de diálogo Propiedades del proyecto en la pestaña Web.

Luego, para configurar varios proyectos de inicio, en el cuadro de diálogo Propiedades de la solución en Propiedades comunes, seleccione el nodo Proyecto de inicio. A la derecha encontrará opciones para Single startup projecty Multiple startup projects. Elija el botón de opción Proyectos de inicio múltiple. Luego, elija la Acción adecuada junto a su proyecto Angular (Comience sin depurar, ya que es Angular y probablemente lo esté depurando en el navegador), luego, junto a su proyecto API, elija Iniciar.

Ahora, cuando presione ejecutar, su aplicación Angular se abrirá en el navegador y la API web comenzará a ejecutarse también. Puede establecer puntos de interrupción en sus métodos de API web y alcanzarlos desde la aplicación Angular.

Mike Devenney
fuente
Traté de hacerlo redondo (suponiendo que sería una mejor forma que un muro de texto) pero después de algunos intentos fallidos seguí con los párrafos.
Mike Devenney el