16

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.

  • what version of VS are you using? VS2015 has some pretty nice integration tools for angular/grunt/node/etc that i have found to be as use-able as other IDEs built with front-end development in mind. – Trotski94 Apr 27 '16 at 13:06
  • I'm on VS2015u2, but even with the nice tooling and all, I'm still not sure if putting the SPA and the API in the same project is "separating my concerns" enough. What if, in the future, I get someone to help me with the project, and they only need to work on the front-end. They shouldn't be required to download the whole schmedangle, should they? – Christian Wattengård Apr 27 '16 at 13:08
13

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.

  • How do I solve actually hosting the webapp-part with this solution? I really want them to end up on the same server, only the webapp on / and the api on /api. On IIS I can probably solve this easily by "mounting" the site under /api, but I'm not sure how to solve this with VS/IISExpress. – Christian Wattengård May 12 '16 at 11:16
  • Slightly different question. I'll update my answer with this information too. – CountZero May 12 '16 at 11:23
  • Updated my anwer. Please let me know if anything isn't clear. – CountZero May 12 '16 at 11:32
  • This is the solution I went for. However Iis Express works fine with one project under a subfolder and the other in the root. So I went for that. – Christian Wattengård May 16 '16 at 18:53
  • I use IIS Express too. Worth using the lite-server for client side development as any chnages made to client side code get updated automatically. Can use IIS in tandem with this method. – CountZero May 17 '16 at 9:22
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.

  • Amen. Always doing two projects is cargo culting – StingyJack Jun 29 at 0:30
0

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.

0

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.

  • I tried to make it round (assuming that would be a better shape than a wall of text) but after a few failed attempts I went with paragraphs. – Mike Devenney Oct 6 '16 at 15:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.