Hi All, I've gotten into angular over the last few years and really like it. But I've been serving angular with node. I'd like to get back to .net and have been messing around with .net core. I've been doing a little research but really cannot find anything on having the tandem. It should be easily done, but I'm thinking about serving the angular files from an MVC route, which I'm going to try. It's possible to do this, correct? Or am I going in the wrong direction?

Thanks, Dan

There are a few ways that you can do this:

1. Separate out the client and server apps into separate sites
2. Merge them together at compile time
3. Everything in one project via VS/dotnet new template

There are project templates in Visual Studio and the dotnet new templates that can create a single project that holds both server and Angular projects, but frankly I wouldn't recommend this. This is too much of a pain to keep straight in my opinion. There's both the administration aspect of the Angular project, and the shear volume of files involved that get in the way of the Visual Studio project, plus the mental overhead of dealing with both client and server code in a single project.

The other option is to separate the projects and have the client and server projects as two completely separate projects. Personally I much prefer this as it keeps things conceptually isolated and it also works much smoother with the Angular development server and live reload. I also like to use different tools for .NET code (VS or Rider), and the Angular/HTML code (WebStorm or VS Code). I like the separation in two IDEs because I can keep one set of files open for each, completely separate from each other.

For that scenario - in production - you can choose between separating the sites out completely and installing two sites side by side, or merge the transpiled final client files into the .NET project's wwwroot folder.

The idea is that at dev time I run from the Angular dev server folder (ie. localhost:4200) and at runtime I run the site in place of the main application. Configuration switch determines which gets loaded and where to look for the server (either local urls or external urls).

The reason for the separation IMHO is important to make sure you can use the standard Angular tools (ng update ng add component etc.) easily and keep everything up to to date easily. Within the single VS Project template that's not so smooth and having the integration in one place really doesn't help.

+++ Rick ---

Wow, thanks Rick! That was more than I thought I was gonna get. There is not alot that I can find on the subject, so this was very helpful. But I feel that the 2 different apps is probably best. I'm not savvy with .net core and the wwwroot principles, but I'm sure I can just do a little research and figure it out. It's good to know about the templates. I'll check those out just to see what they are doing within the application.

I agree with using different tools for the framework. I keep going back to VS Code to work with angular. That was a little bit of a shock to hear you say that. Haha.

In the meantime, I'll figure it out and post my results.

Once again, Thanks! Dan

Hey right tool for the job, right?

Visual Studio is not a great JavaScript environment and the tooling and addons available for Angular and Typescript is much, much better in VS Code, and even better in WebStorm.

I'm pretty much sold on WebStorm, although I use VS Code just to know what's there since that's what most people use. WebStorm just has a ton of niceties that make a lot of things easier - or maybe I just don't know all the right add-ins to run in VS Code...

+++ Rick ---

I have a subscription for jet brains because I use intellij for our kotlin stuff. Anyway I was going to check out WebStorm, but didn't get around to it. I'm comfortable with VS Code, so I'll stick with that.

It's good to hear that you don't use Visual Studio for everything. Some things are just a little clucky and I always thought I had been using it wrong. I guess not. Thanks!

wwwroot is just the static Web folder where all the static content a .NET core application uses. It's the Web root for the application basically (similar to the way node specifies a root folder to serve files from).

With two projects you can have the production build from Angular build into the .NET wwwroot folder instead of the default Angular dist folder (or you can run a post copy operation).

What this does is allow you to keep the projects separate and run with the local dev server in development and inside of the main site for production. For most sites I find that is the best approach as it requires only setting up a single site. But you can have two separate sites to like mysite.com and api.mysite.com. Either works, the latter is just a little more involved for deployment.

+++ Rick ---

BWWUUUHAHHAHAHAHAHA!!!

Got it! The problem was adding a subdomain. I'm using one of those 10 buck a month hosting sites and I did not understand how to create a subdomain. Anyway, they have an admin tool that will do that. Created 2 project like you said and deployed them. I was going about it the wrong way by incorporating mvc and angular together in one solution. I'll let you know when the site is viewable!

Thanks Rick!

If you're running on a cheap server just run everything on a single site. In that case you do a production build in Angular which merges everything into the wwwRoot folder of the .NET Site. You can then deploy the .NET site and run everything on that single site. That's what I usually do.

It's easier to deal with (single deploy vs potentially multi-site deploy) and you also don't need the overhead of CORS on every request. But the subdomain route works too and sometimes (especially for larger teams where the front end and backend may not deploy always at the same time) the separation is actually benficial. Also for load - separate sites get a separate HTTP connection pool so potentially better load times etc.

Anyway, it's possible to do it either way...

+++ Rick ---

Thanks Rick! I kinda like 2 sites right now because I may just put up a simple WordPress site for the root. We'll see, I'm just messing around now. I want to understand how to use the 2 in one project, I'll figure that out soon. Thanks again!