Onde colocar o aplicativo Angular em uma solução de API da Web do ASP.NET?

16

Estou iniciando um aplicativo greenfield e quero usar o ASP.NET (4.6) e o Angular 2. Para o back-end, criei um projeto no Visual Studio e agora estou me perguntando onde colocar o aplicativo Angular. Eu realmente quero usar o npm e as ferramentas de nó para o front-end, mas, no final, ele será hospedado na mesma instância do Serviço de Aplicativo do Azure com o aplicativo Angular at domain.com/e a api under domain.com/api/ou similar .

Como devo separar os aplicativos no Visual Studio? O aplicativo Angular deve estar em seu próprio projeto? Devo ter o aplicativo Angular no mesmo projeto que a API? Mesmo que eu não queira usar o nuget e as outras ferramentas VS para isso? (Para o front end, o VS seria mais ou menos um editor de código glorificado). Não encontrei nenhuma prática recomendada para essa combinação.

Christian Wattengård
fonte
qual versão do VS você está usando? O VS2015 tem algumas ferramentas de integração bastante agradáveis ​​para angular / grunt / node / etc que eu achei tão úteis quanto outros IDEs construídos com o desenvolvimento do front-end em mente.
precisa saber é o seguinte
Estou no VS2015u2, mas mesmo com as boas ferramentas e tudo mais, ainda não tenho certeza se colocar o SPA e a API no mesmo projeto está "separando minhas preocupações" o suficiente. E se, no futuro, conseguir alguém para me ajudar com o projeto, e eles só precisarem trabalhar no front-end. Eles não deveriam ser obrigados a baixar todo o esquema, deveriam?
Christian Wattengård

Respostas:

13

Você tem duas opções.

Crie projetos mywebsite.api e mywebsite.app separados em sua solução.

Vantagens

  • Separação adequada de preocupações.
  • Você pode implantar atualizações em sua API e seu front end independentemente.
  • A arquitetura dos sites pode ser alterada independentemente (ou seja, você pode atualizar sua API para executar no asp.net 5 sem afetar o site)
  • Limpador

Crie um único projeto com o aplicativo cliente e a API em um projeto

Vantagens

  • Mais fácil de implantar atualizações
  • Não é necessário configurar para trabalhar com o CORS

Como hospedar e desenvolver o aplicativo localmente.

Uma solução eficaz para o desenvolvimento é usar o lite-server para executar o aplicativo cliente (Angular 2) e o IIS / Casini para hospedar o código da API da web. Um bom exemplo de como usá-lo é dado no tutorial de início rápido do Angular 2 (link abaixo). Meu processo de desenvolvimento é executar a API por meio do Visual Studio e trabalhar com a codificação do site do cliente usando o Visual Studio Code e o lite-server (Atom é outra boa opção).

A partir dos documentos lite-server. Servidor de nó de desenvolvimento leve que serve um aplicativo da Web, abre-o no navegador, atualiza quando html ou javascript muda, injeta alterações de CSS usando soquetes e tem uma página de fallback quando uma rota não é encontrada.

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

Minha visão

Não há problema em usar o Nuget / NPM na mesma solução e isso não deve informar sua escolha da estrutura do projeto.

Eu só uso a abordagem de projeto único para aplicações de demonstração / prova de conceito. Para lançamentos de produção, sempre separarei minhas preocupações adequadamente e tenho um projeto de API dedicado.

CountZero
fonte
Como resolvo hospedar a parte do aplicativo da web com esta solução? Eu realmente quero que eles acabem no mesmo servidor, apenas o webapp /e a API /api. No IIS, provavelmente posso resolver isso facilmente "montando" o site /api, mas não sei como resolver isso com o VS / IISExpress.
Christian Wattengård
Pergunta ligeiramente diferente. Também atualizarei minha resposta com essas informações.
CountZero
Atualizado minha resposta. Informe-me se algo não estiver claro.
CountZero
Esta é a solução que eu procurei. No entanto, o Iis Express funciona bem com um projeto em uma subpasta e outro na raiz. Então eu fui para isso.
Christian Wattengård
Eu também uso o IIS Express. Vale a pena usar o lite-server para o desenvolvimento do lado do cliente, pois qualquer alteração feita no código do lado do cliente é atualizada automaticamente. Pode usar o IIS em conjunto com esse método.
CountZero
2

Encontrei este projeto semeador https://github.com/damienbod/AngularWebpackVisualStudio/, que permite desenvolver e hospedar o cliente e o servidor em um único projeto do Visual Studio (2017).

Concordo com os comentários do @CountZero sobre as vantagens de usar dois sites para hospedar (especialmente a separação de preocupações), mas a grande desvantagem para mim é ter que ativar o suporte ao CORS na sua API quando, na maioria dos casos, o único consumidor da sua API é o seu próprio front-end do cliente. Não sou especialista em CORS, mas isso parece uma sobrecarga desnecessária e também vem com ameaças de segurança adicionais.

Chet
fonte
Amém. Sempre fazendo dois projetos é culting carga
StingyJack
0

Bem, obviamente você pode separá-los em duas soluções, adicionar outro projeto em solução ou colocá-los no mesmo projeto. Eu direi o que eu faria.

IMHO, se você quiser tirar proveito das sessões no IIS e / ou ocultar o processo de autenticação na API, escreva também angular no Visual Studio. O VS2015 possui uma integração muito boa (intellisense) com angular se você instalar extensões de desenvolvimento da web. Devo dizer que desta forma seria mais compacto e portátil.

Se você quiser adicionar páginas de documentação no projeto de back-end, separe-as em seus próprios projetos (mesma solução) e ative a API de um subdomínio ou subpasta.

Se você não está interessado em nenhuma das opções acima e se sente mais à vontade com o modo como está acostumado, faça isso. Se você tiver uma autenticação baseada em token, poderá separar projetos sem dúvida.

st.
fonte
0

No VS 2015, você tem a opção de iniciar mais de um projeto em sua solução ao depurar, desde que você defina URLs de projeto diferentes para cada um.

Como exemplo, você configuraria seu projeto de aplicativo Angular para execução http://localhost:55000/e o projeto de API pode ser configurado para execução http://localhost:55000/api. Você define a propriedade URL do projeto na caixa de diálogo Propriedades do projeto na guia Web.

Em seguida, para definir vários projetos de inicialização, na caixa de diálogo Propriedades da solução em Propriedades comuns, selecione o nó Projeto de inicialização. À direita, você encontrará opções para Single startup projecte Multiple startup projects. Escolha o botão de opções Múltiplos projetos de inicialização. Em seguida, escolha a Ação apropriada ao lado do seu projeto Angular (inicie sem depuração, pois é Angular e você provavelmente estará depurando isso no navegador) e, ao lado do seu projeto de API, escolha Iniciar.

Agora, quando você pressiona executar, o aplicativo Angular será aberto no navegador e a API da web também começará a ser executada. Você pode definir pontos de interrupção nos métodos da API da Web e acessá-los no aplicativo Angular.

Mike Devenney
fonte
Tentei dar a volta (assumindo que seria uma forma melhor do que uma parede de texto), mas depois de algumas tentativas fracassadas, fui com parágrafos.
Mike Devenney