Im the front end angular…

Im the front end angular dev and nx/nrwl looks amazing. but our stack right now is .net/c# and angular…I want to convert to a nx workspace with multiple angular apps and a shared backend scaffold

Responses:

Hey Sam, welcome! From what others have mentioned usually they keep it all in the same repo and leverage nx for all things Js and keep non JS projects (c# ) in another folder. Should work fine.

HELL. YES.

thats basically what I was hoping to hear/was thinking

Technically it is possible, but you will need to manage dependencies manually

Also what Justin said

the .net dependencies?

I am looking at doing this, but with Java. When I asked about it a week or two ago, I got pointed to this proof of concept using Nx and Java. https://github.com/FrozenPandaz/nx-examples/tree/java

I haven’t started on it yet, so can’t be more help than that. Maybe that will be useful

Yes the .net dependencies.

I will let someone fill in the gaps who isn’t in a phone :-)

Having a c# project shouldn’t mess up your package.json and js deps

right. Thats what Im thinking

I think if I just silo that .net/c# app in a separate directoy like you’re saying business may be able to go on as usual for them

Yup most likely! Then you gain all the advantages of Nx for the js side

right which is what I”m after

Reference the link from derek

i’m really hyped on nx boys

just to go a little deeper..

to direct users or devs to the correct angular app..

``` app.UseSpa(spa => { // To learn more about options for serving an Angular SPA from http://ASP.NET|ASP.NET Core, // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "Metronics/dist/default";

            if (env.IsDevelopment())
            {
                // Metronics taking a bit to compile...setting a delay here
                spa.Options.StartupTimeout = new System.TimeSpan(days: 0, hours: 0, minutes:10, seconds: 0);
                spa.UseAngularCliServer(npmScript: "start");
            }
        });```

it looks like there would just be some sort of config flag set?

to change that spa.Options.SourcePath?

or how do people bring up multiple of the angular apps at the same time in developemnt?

do you have to just run 2 instances of the project?

I’ve never used c# but what we typically did (if we need universal/SSR) is run seperate express servers one for each. If we don’t need SSR they sit in S3 buckets and are served the static content. When dev’ing locally if we need more than one we just ng serve each individually on separate ports

Okay i’m with you on the compiled versions, just serving the dist folder..

With the run-commands builder <https://nx.dev/web/api/workspace/builders/run-commands

https://nx.dev/web/api/workspace/builders/run-commands> you can create a section in your angular.json that will actually start your c# server

Right I keep forgetting about the new run commands. Ya if you need the c# server in development that’s your best bet. But if you just need the servers to reload on file changes I’d use ng serve

theres a file within the .net app

that currenlty calls the ng serve for the front end

and I don’t think I can change that process because our CTO likes to press the play button in visual studio.

That seems slightly extensive to me. Why would you need a c# app to run ng serve…?

Interesting is that how you host in production?

it is slightly extensive… but it works out nicely in that its an all in one solution for running the app. press play, .net backend starts up, then the command to ng serve is called.

in prod it just skips that and servers the dist files

// In production, the Angular files will be served from this directory services.AddSpaStaticFiles(configuration => { configuration.RootPath = "Metronics/dist/default/dist/find-your-influence-marketers"; });

anyways.. I”m thinking I can potentially modify the dev startup script to just bring up both apps.

should be easy enough

Ya that shouldn’t be too difficult.

but in prod… what does the routing pivot off of? a subdomain?

I have a decent amount of FE experience but lacking on the backend/networking side… so just trying to put together how a user is route to the correct dist folder

That will depend on your setup

Like I said we host ours differently. In AWS each subdomain is routed to a different server or S3 bucket

But I’m sure you could do it in c# somehow if you need to

hm.

so each of your front end apps live on different servers?

so just to make sure i’m following…

Possibly or in different folders behind a reverse proxy

if you let them live on differnet servers the routing logic is clean and what not but you end up duplicating a lot of deployed code right?

which isn’t a big deal?

Depending on how much CORS management you want to deal with

Ya so we have subdomains that point to essentially different CDNs. And they serve the static files. No servers needed. We have one angular app that needs SSR so it runs in an express server. No duplicated code

The apps that don’t need SSR are cloudfront to s3 to help cache the static files at the edge.

woah

I just realized you don’t need a server

LoL

its literally a set of static files

Yep!

Ya no servers except the one express app for the one ssr rendered app (for SEO purposes)

Ya!

and the .net app

You tell S3 to serve index.html and the. It downloads the chunks and js files it needs

okay cool. APpreciate the help guys. Thats enough to get me in the right direction :thumbsup:

Ya you don’t need a .net app (or express in our case) if you don’t have any SSR/universal

one thing to keep in mind when looking at using subdomains is, if you’re two apps need to share data in session storage or cookies or anything like that, that wont work

^ yes very true.

aaannnnddddd…. CORS

Hahah ya cors can be a bitch

i hate CORS

Well you can set the cookie scope at the parent domain

Ya instead of subdomain level that’s true

that’s true, assuming they have the same root domain, wasn’t thinking of that

I really like just serving static files from a cdn though. Then deploys are super fast too. Just a copy command. No docker images or servers. And WAY cheaper

Also for local Dev don’t forget about the Ng cli proxy it makes cors a breeze for local development. You can also set headers in the proxy as well.

So totally just theory but I think if you want the full integrated experience with nx I would try the following approach.

1. Create a folder for you .net project in the nx repo where it makes sense to place you other services.
2. Add a project to the projects section in your angular.json (workspace.json) for your .net project

3. add a serve command that uses the run-commands builder to run your dotnet run command to start your service. It might look something like this "serve": { "builder": "@nrwl/workspace:run-commands", "options": { "commands": [ { "command": "dotnet run" } ] } }

4. switch your setup so that nx is the tool you use to start both your api and ui. You can modify the project file for .net to run a different command on F5 (Play) I believe.
5. If you want it to show up in your dependency graphs then you would need to manage the dependencies manually in the nx.json

Now, I have never done any of this for a .net project but if you read through the issues and some of Victors posts they talk about incorporating other type of projects like Java

"builder": "@nrwl/workspace:run-commands",

not familiar with that line…

do you do podcasts? your name sounds familiar.

That is new in nx v9

It’s also available in V8… I am using it, maybe an unpublished feature

Ohhh didn’t know that. Good to know I’ll definitely use it then

when you say manually handle dependencies in .net

I dont mean nuget deps

can’t they (backend team) just conitunue to use the default package manageer in .net

I only mean how nx can identify affected projects based on what code was changed in your projects

• if you were asking me about podcasts, no I dont

ahhh

I see.

Well. I’m sold on this process.

In my mind its worth modifying to something like this instead of managing a shit ton of non related pages in one angular app

or duplicating components in separate apps

Yup. It’s incredibly helpful to reduce all the duplication.

I’ve started working on a .netcore builder for my own personal project. Need it with vue but .netcore more important than vue hence the vue builder been delayed

Sounds good, but from my more expereince most project start from a back-end perspective rather than a front-end perspective. What I mean is, the setup will start in most cases with the setup of the back-end, so they will favor a Visual Studio setup and prefer to integrate the front-end from that point

the hard part is getting .net core via npm. They is a package via MS but it’s not been updated for a while. Just updating it. BUt yes we really need it

Not sure about you but I prefer VS code for .net and java work. I hate VS studio

Prior to Nrwl, I was heavy into dotnet core development. We made the switch to vs code and loved it.

We can create schematics to generate dotnet projects (apps and libs) as well as some builders to do dotnet build, dotnet restore, dotnet serve

The ideas are still in their infancy but just wanted to throw it out there that we are exploring the viability of it.

Same here. NX made me switch node but they just some things .netcore so much better for

Yeah .net core is rock solid. One of my go to stacks.

I’ll see if I cant write the blazor template into schematics. What they have dont for SPA is amazing

my .NET experience are still from the pre VS Code ages, so in most cases it is still my primary choice. Not everybody has the chance to do green field projects using .Net Core :disappointed:

I currently have the chance as ‘Front-end expert’ at my customer to introduce Nx for the front-end