How to design your SPA to work with Angular CLI and DoNet Core

10. September 2017 Geobarteam Comments (0)

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:

mkdir angular-dotnetcore
cd angular-dotnetcore
mkdir web-api
cd web-api
dotnet new webapi
cd ..
ng new angular-app

2) Open VisualStudio code and open the angular-dotnetcore folder

 

Tags:

Add comment