Dove mettere l'app angolare in una soluzione API Web ASP.NET?

Sto avviando un'app greenfield e voglio usare ASP.NET (4.6) e Angular 2. Per il backend ho creato un progetto in Visual Studio e ora mi chiedo dove mettere l'app Angular. Voglio davvero usare npm e node-tools per il front-end, ma alla fine sarà ospitato nella stessa istanza del servizio app di Azure con l'app Angular in domain.com/e l'API sotto domain.com/api/o simili.

Come devo separare le app in Visual Studio? L'app Angular dovrebbe essere nel proprio progetto? Dovrei avere l'app Angular nello stesso progetto dell'API? Anche se non voglio usare nuget e gli altri strumenti VS per questo? (Per il front-end, VS sarebbe più o meno un editor di codice glorificato). Non ho trovato alcuna best practice per questa combinazione.

Hai due opzioni.

Crea progetti mywebsite.api e a mywebsite.app separati nella tua soluzione.

vantaggi

• Corretta separazione delle preoccupazioni.
• Puoi distribuire gli aggiornamenti su api e front-end in modo indipendente.
• L'architettura dei siti può essere modificata in modo indipendente (ovvero è possibile aggiornare l'API per l'esecuzione su asp.net 5 senza influire sul sito Web)
• addetto alle pulizie

Crea un singolo progetto con l'app client e l'API in un unico progetto

vantaggi

• Più facile da distribuire gli aggiornamenti
• Non è necessario configurare per funzionare con CORS

Come ospitare e sviluppare l'applicazione localmente.

Una soluzione efficace per lo sviluppo è utilizzare lite-server per eseguire l'applicazione client (Angular 2) e IIS / Casini per ospitare il codice API Web. Un buon esempio di come usarlo è dato nel tutorial di avvio rapido di Angular 2 (linkato sotto). Il mio processo di sviluppo è quello di eseguire l'API tramite Visual Studio e lavorare con la codifica del sito client utilizzando Visual Studio Code e lite-server (Atom è un'altra buona scelta).

Dai documenti di lite-server. Server di nodo di sviluppo leggero che serve un'app Web, la apre nel browser, si aggiorna quando cambiano html o javascript, inietta le modifiche CSS tramite socket e ha una pagina di fallback quando non viene trovata una route.

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

La mia opinione

Non ci sono problemi nell'uso di Nuget / NPM nella stessa soluzione e questo non dovrebbe informare la scelta della struttura del progetto.

Uso l'approccio a progetto singolo solo per applicazioni demo / proof of concept. Per le versioni di produzione, separerò sempre correttamente le mie preoccupazioni e avrò un progetto API dedicato.

Ho trovato questo progetto seminatrice https://github.com/damienbod/AngularWebpackVisualStudio/ che ti consente di sviluppare e ospitare il client e il server in un singolo progetto Visual Studio (2017).

Sono d'accordo con i commenti di @CountZero sui vantaggi dell'utilizzo di due siti per ospitare (in particolare la separazione delle preoccupazioni), ma il grande svantaggio per me è dover abilitare il supporto CORS nella tua API quando nella maggior parte dei casi l'unico consumatore della tua API è il tuo proprio front-end client. Non sono un esperto di CORS ma questo sembra un sovraccarico inutile e comporta anche ulteriori minacce alla sicurezza.

Bene, ovviamente puoi separarli in due soluzioni, aggiungere un altro progetto in soluzione o averli nello stesso progetto. Dirò cosa vorrei.

IMHO, se vuoi sfruttare Sessioni in IIS e / o nascondere il processo di autenticazione all'interno dell'API, scrivi anche in Visual Studio. VS2015 ha una buona integrazione (intellisense) con angolare se si installano estensioni di sviluppo web. Devo dire che in questo modo sarebbe più compatto e portatile.

Se hai intenzione di aggiungere pagine di documentazione sul progetto back-end, quindi separale nei loro progetti (stessa soluzione) e servi api da un sottodominio o sottocartella.

Se non ti interessa nulla di quanto sopra e ti senti più a tuo agio con il modo in cui sei abituato, provaci. Se si dispone di un'autenticazione basata su token, è possibile separare i progetti senza dubbio.

In VS 2015 hai la possibilità di avviare più di un progetto nella tua soluzione durante il debug purché imposti URL di progetto diversi per ciascuno.

Ad esempio, imposteresti l'esecuzione del tuo progetto di app Angular http://localhost:55000/e l' esecuzione del progetto API http://localhost:55000/api. È possibile impostare la proprietà URL del progetto nella finestra di dialogo Proprietà del progetto nella scheda Web.

Quindi, per impostare più progetti di avvio, nella finestra di dialogo Proprietà soluzione in Proprietà comuni, selezionare il nodo Progetto di avvio. A destra troverai le opzioni per Single startup projecte Multiple startup projects. Scegli il pulsante di opzione Progetti di avvio multipli. Quindi scegli l'azione appropriata accanto al tuo progetto angolare (Inizia senza debug poiché è angolare e probabilmente eseguirai il debug nel browser), quindi accanto al tuo progetto API scegli Avvia.

Ora quando premi run la tua app Angular si aprirà nel browser e inizierà anche l'esecuzione dell'API web. È possibile impostare punti di interruzione nei metodi dell'API Web e colpirli dall'app Angolare.