10. September 2017
When building new apps, you need both client and server-side pieces. This article focusses on how to structure a SPA that is made out of angular for the client and dotnet core for the server.
There are numerous questions I needed to answers when mixing these technologies.
- Should I host my angular app inside an MVC View or just serve the angular app from static files.
- Should I host the angular app inside the same application that serve the Web-Api or serve it from a separate site?
- How to setup a productive development environment?
- How should I integrate angular-cli together with a ASP.NET Core app?
- Should I use Vs.Code or VisualStudio ?
- How to package and deploy the application for on prem or in the cloud?
Of course, the answer to all these questions is always the same: it depends! After experimenting with several options, I finally decided that I should go for the simplest solution that could possibly work and started with just serving static files inside a Web-Api application. Yet, during development, what I found the most productive, is to completely separate the Angular app from the Web-Api solution. I like that my Angular and the ASP.NET Web-Api apps live separate folders beside each other. It’s only at build time that Msbuild assemble the parts by calling “ng build”. To do that I needed to configured angular-cli to output the build in the \wwwroot folder of the ASP.NET app.
Concerning the IDE, what I found the most productivity was to develop my angular app using Vs.Code. Thus far, for the Web-Api part I tend to prefer VisualStudio and Resharper. So, I optimized my Angular app for working with Vs.Code and my Web-Api project for VisualStudio. During development I usually run the backend and launch the Webpack dev server through an “npm start” command. At publish everything is nicely packaged together inside a ASP.NET app, so deploying to Azure can simply be done by using the VisualStudio publish wizard.
On my github project core-angular-example, you can download the solution template I use for making SPA’s with Angular-cli and DotNet Core.
Here I explain the steps you need to follow to setup the basis of such an app:
0) First you need to install:
1) From a powershell console:
dotnet new webapi
ng new angular-app
2) Open VisualStudio code and open the angular-dotnetcore folder