current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 5 down vote favorite
2

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.

share|improve this question
    
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. – James Trotter Apr 27 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 at 13:08
up vote 1 down vote accepted

You have two options.

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

Advantages

  • Proper seperation of concerns.
  • You can delploy 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 conept applications. For production releases I will always seperate my concerns properly and have a dedicated api project.

share|improve this answer
    
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 at 11:16
    
Slightly different question. I'll update my answer with this information too. – CountZero May 12 at 11:23
    
Updated my anwer. Please let me know if anything isn't clear. – CountZero May 12 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 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 at 9:22
up vote 1 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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