Where to put the Angular app in a ASP.NET Web API solution?

Question

I'm starting a greenfield app and I want to use ASP.NET (4.6) and Angular 2. For the backend I have created a project in Visual Studio, and now I'm wondering where to put the Angular app. I really want to use npm and node-tools for the front-end, but in the end it will be hosted in the same Azure App Service instance with the Angular app at domain.com/ and the api under domain.com/api/ or such.

How should I separate the apps in Visual Studio? Should the Angular app be in it's own project? Should I have the Angular app in the same project as the API? Even if I don't want to use nuget and the other VS-tools for it? (For the front end, VS would be more or less a glorified code editor). I haven't found any best practices for this combination.

Answer 1

You have two options.

Create separate mywebsite.api and a mywebsite.app projects in your solution.

Advantages

• Proper separation of concerns.
• You can deploy updates to your api and your front end independently.
• Architecture of sites can be changed independently (i.e. you can update your api to run on asp.net 5 without affecting the website)
• Cleaner

Create a single project with both the client app and api in one project

Advantages

• Easier to deploy updates
• No need to configure to work with CORS

How to host and develop the application locally.

An effective solution for development is to use lite-server to run your client (Angular 2) application and IIS / Casini to host your web api code. A good example of how to use it is given in the Angular 2 quickstart tutorial (linked to below). My development process is to run the api through Visual Studio and work with client site coding using Visual Studio Code and lite-server (Atom is another good choice).

From the lite-server docs. Lightweight development only node server that serves a web app, opens it in the browser, refreshes when html or javascript change, injects CSS changes using sockets, and has a fallback page when a route is not found.

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

My view

There is no issue in using Nuget / NPM both in the same solution and this should not inform your choice of project structure.

I only use the single project approach for demo / proof of concept applications. For production releases, I will always separate my concerns properly and have a dedicated api project.

Answer 2

I've found this seeder project https://github.com/damienbod/AngularWebpackVisualStudio/ which allows you to develop and host the client and server in a single Visual Studio (2017) project.

I agree with @CountZero comments about the advantages of using two sites to host (esp. the separation of concerns) but the big disadvantage for me is having to enable CORS support in your API when in most cases the only consumer of your API is your own client front end. I'm no expert on CORS but this just feels like an unnecessary overhead and also comes with additional security threats.

Answer 3

Well, obviously you can seperate them into two solutions, add another project in solution, or have them in same project. I will tell what I would.

IMHO, if you want to take advantage of Sessions in IIS and/or hide authentication process within API, write angular in Visual Studio as well. VS2015 has a pretty good integration(intellisense) with angular if you install web development extensions. I must say this way would be more compact and portable.

If you're going to add documentation pages on backend project, then seperate them into their own projects(same solution) and serve api from a subdomain or subfolder.

If you're not interested in none of above and you feel more comfortable with the way you're used to, go for it. If you're going to have a token-based authentication, you can seperate projects without doubt.

Answer 4

In VS 2015 you have the option to start more than one project in your solution when debugging as long as you set different Project URLs for each.

As an example you would set your Angular app project to run in http://localhost:55000/ and the API project can be set to run in http://localhost:55000/api. You set the Project URL property in the project Properties dialog on the Web tab.

Then to set multiple startup projects, in the Solution properties dialog under Common Properties, select the Startup Project node. To the right you will find options for Single startup project and Multiple startup projects. Choose the Multiple startup projects radio button. Then choose the appropriate Action next to your Angular project (Start without debugging since it's Angular and you'll likely be debugging that in the browser), then next to your API project choose Start.

Now when you hit run your Angular app will open in the browser and web API will begin running as well. You can set break points in your Web API methods and hit them from the Angular app.