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

15

Estou começando 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 querendo saber onde colocar o aplicativo Angular. Eu realmente quero usar npm e node-tools para o front-end, mas no final ele será hospedado na mesma instância do Azure App Service com o aplicativo Angular em domain.com/ e a api em domain.com/api/ ou algo semelhante. / p>

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 da API? Mesmo que eu não queira usar o nuget e as outras ferramentas do VS para isso? (Para o front end, VS seria mais ou menos um editor de código glorificado). Não encontrei nenhuma prática recomendada para essa combinação.

    
por Christian Wattengård 27.04.2016 / 11:10
fonte

4 respostas

12

Você tem duas opções.

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

Vantagens

  • Separação adequada de preocupações.
  • Você pode implantar atualizações na sua API e no seu front end de maneira independente.
  • A arquitetura de sites pode ser alterada de forma independente (ou seja, você pode atualizar sua API para ser executada 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 servidor-lite para executar o aplicativo do 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 (linkado abaixo). Meu processo de desenvolvimento é executar a API através do Visual Studio e trabalhar com o código do site do cliente usando o Visual Studio Code e o lite-server (Atom é outra boa opção).

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

link

link

link

link

Minha opiniã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 aplicativos de demonstração / prova de conceito. Para lançamentos de produção, sempre separarei minhas preocupações adequadamente e terei um projeto de API dedicado.

    
por 12.05.2016 / 13:12
fonte
1

Eu encontrei este projeto de link que permite que você desenvolva e hospede o cliente e o servidor em um único Visual Studio. (2017) projeto.

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

    
por 03.11.2017 / 11:58
fonte
0

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

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

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

Se você não estiver interessado em nenhum dos itens acima e se sentir mais à vontade com o que está acostumado, vá em frente. Se você vai ter uma autenticação baseada em token, pode separar projetos sem dúvida.

    
por 27.04.2016 / 14:33
fonte
0

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

Como exemplo, você definiria seu projeto de aplicativo Angular para ser executado em http://localhost:55000/ , e o projeto da API pode ser definido para ser executado em 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 project e Multiple startup projects . Escolha o botão de opção Vários projetos de inicialização. Em seguida, escolha a ação apropriada ao lado do seu projeto Angular (inicie sem depuração, já que é o Angular e você provavelmente depurará isso no navegador). Depois, ao lado do projeto da API, escolha Iniciar.

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

    
por 06.10.2016 / 14:21
fonte