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

15

Estoy iniciando una aplicación greenfield 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 se alojará en la misma instancia de Azure App Service con la aplicación Angular en domain.com/ y la api en domain.com/api/ o algo similar.

¿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 la parte frontal, VS sería más o menos un editor de código glorificado). No he encontrado ninguna práctica recomendada para esta combinación.

    
pregunta Christian Wattengård 27.04.2016 - 11:10
fuente

4 respuestas

12

Tienes dos opciones.

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

Adventages

  • Separación adecuada de las preocupaciones.
  • Puede implementar actualizaciones para su api y su interfaz de usuario 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 proyecto

Adventages

  • 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 la aplicación de su cliente (Angular 2) e IIS / Casini para alojar su código de api web. Un buen ejemplo de cómo usarlo se encuentra en el tutorial de inicio rápido de Angular 2 (vinculado a más abajo). 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 del servidor lite. El servidor de nodos de desarrollo ligero solo sirve para una aplicación web, la abre en el navegador, se actualiza cuando HTML o JavaScript cambia, inyecta cambios de CSS usando sockets y tiene una página de respaldo cuando no se encuentra una ruta.

enlace

enlace

enlace

enlace

Mi vista

No hay ningún problema en el uso de Nuget / NPM tanto 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.

    
respondido por el CountZero 12.05.2016 - 13:12
fuente
1

Encontré este proyecto sembrador enlace que te permite desarrollar y alojar el cliente y el servidor en un solo Visual Studio (2017) proyecto.

Estoy de acuerdo con los comentarios de @CountZero sobre las ventajas de usar dos sitios para hospedar (especialmente la separación de inquietudes) 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 es el único consumidor de su API es su propio cliente frontal. No soy un experto en CORS, pero esto se siente como una sobrecarga innecesaria y también viene con amenazas de seguridad adicionales.

    
respondido por el Chet 03.11.2017 - 11:58
fuente
0

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

En mi humilde opinión, si desea aprovechar Sesiones en IIS y / u ocultar el proceso de autenticación dentro de la API, escriba angular también en Visual Studio. 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 el proyecto backend, luego sepárelas en sus propios proyectos (la misma solución) y sirva api desde un subdominio o subcarpeta.

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

    
respondido por el st. 27.04.2016 - 14:33
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 su proyecto de aplicación Angular para que se ejecute en http://localhost:55000/ y el proyecto API se puede configurar para que se ejecute en 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á las opciones para Single startup project y Multiple startup projects . Elija el botón de opción Proyectos de inicio múltiple. Luego, elija la Acción apropiada al lado de su proyecto Angular (Comience sin depurar, ya que es Angular y probablemente estará depurando eso en el navegador), luego al lado de su proyecto API, elija Iniciar.

Ahora, al ejecutar Run, la aplicación Angular se abrirá en el navegador y la API web también comenzará a ejecutarse. Puede establecer puntos de ruptura en sus métodos de API web y golpearlos desde la aplicación Angular.

    
respondido por el Mike Devenney 06.10.2016 - 14:21
fuente

Lea otras preguntas en las etiquetas