Nx After Dark: Setting up an Nx workspace with nx-dotnet

hello welcome to nx after dark today i'm going to show you a new plugin called nx.net it's created by this gentleman let's see if i can find his name gregory coppola he's he posted about it in the now all community slack and at work we use net a lot so and of course i think it's very interesting because i use nx so i was excited to see how this works also since nx12 a new api came out it's called something like the project graph api and it's a way for so that nx plugins for other languages then javascript and typescript can easier plug into the uh what's it called the dependency graph of nx so today we're going to generate a workspace and nx workspace we're going to use nx.net and then we're going to set up a ci workflow using github actions let me find my screen and then we'll get going so first thing we need uh well we there's a few prerequisites here there's of course node.js and then there's the net cli so you need to be able to run the dotnet command like this and i have a version 5 or so [Music] so make sure you have.net in your path variable and you should be good to go and let me just check yeah i have notice well i don't know if the latest nx12 supports node 14 but i'll stick with 12 that's definitely supported uh so yeah that's it well other than that i also use pnpm so that should be my global path as well it's like yarn and npm cli and package managers but a lot faster both locally and then the ci server so that's why i'm using that just to speed things up um so yeah first thing we need is we need to have create nx workspace um we need to have that available globally and that could be done for example by saying pnpm install global create nx workspace and i have that and as soon as you have that you can say pnpm init nx workspace and then the name of it so it'll be let's call it nx.net workspace and then we can add some options for example pm for package manager or sorry for package manager and we'll set that to pnpm and then we need an npm scope that will be i know let's call it lars and that's i think that's what we need ah i will disable nx cloud and we'll use a preset and i think it's called mt like so that will generate just a workspace with tooling and no projects yeah this should be it and while that's working um see a question here in the chat hey nick you're asking if i will be discussing how to have multiple docker images well i don't know what's the context of this question if it's about github actions no i won't be discussing container github actions at least not today and nx.net is for enabling net projects in nx workspaces okay so we have a workspace code nx.net workspace yeah let's see what we have see what we have here i'll try to zoom in how is this like so i have to zoom in a lot because i don't have hd streaming so hopefully this should be great for viewing okay let's see what we got we got some nx commands and all of this we got the cli and it's dependency tau the nx then our workspace api nodetypes dot environment t is no typescript prettier multiple docker files for my nx environment well i i don't really use docker for anything uh basically so i'm not sure what what uh what you're used to using docker for and sebastian is saying you tried pnpm and it's buggy sometimes with nx i haven't found an issue directly related to nx and pnpm i have seen an issue with azure pipelines and pnpm unrelated to nx i was unable to figure out how to cache its store folder its global cache of pnpm that didn't work on on the azure pipelines maybe because we were using a windows server oh and that reminds me of something that reminds me of something so is this multiple docker files is that what you mean uh nick are you talking about in a ci workflow using different images for commands because you can you could do that for a github action when you have like a like a github action that you can pass input parameters to and maybe get some output and for the individual steps of a github or each job of a github workflow using github actions it uses an image but it's not any arbitrary docker image it's only the ones that are provided by github and that's similar to azure pipelines so there's one for ubuntu or there's one for each long term support version and there's one for windows there's even one for mac on github so that's pretty nice and sebastian is also asking does the nx.net plugin support the dependency graph yeah it does and we will see that very soon so yeah this was what i was talking about in the beginning nx12 has this dependency graph api that plugins can use so that they can generate the dependency graph based on the source code just like nx does on its own for typescript and javascript projects but yeah um the author and i'll try to mention his name again it's uh gregory coppola let me put it his name in the chat author of nx.net give him some credits and he's been very nice at replying to questions and comments about nx.net in the narwhal community slack and i actually just submitted a pr for minor thing for nx.net and i created two issues that um he sounded optimistic about solving uh so yeah he's a nice guy uh and it does support this dependency graph so that is that's really nice we'll see that when we when we generate the projects and nick asking whether or not i would be building my projects with a docker image for each project um well i'm not going to discuss custom github actions today i'm only going to discuss github actions workflow so a ci a yaml file for ci workflow just for building and testing creating project specific github actions or some that are published on the github marketplace that's a different discussion and maybe i'll do a video on that some other time okay let's move on we have the use your suspects here typescript and prettier of course.net is not going to be using that but that's just what comes out of the box with nx so this is the minimum set of dependencies yeah so what else do we need to do if i know nx right we need to set the default base branch to main instead of master and what else let's use main france space and let's look in our workspace json file has some blank lines for some reason i'll move the projects down here because that will be changing the most and it will have the largest object so let's keep the other ones here in the top and there's not really anything to add here right now is there no i don't i don't think so i don't think so okay what's next did i change it oh just organize configuration yeah okay so what is next so we set to when i created using create nx workspace i said that i would be using pnpm and that is nowhere to be found here in the configuration and that's actually because nx cli figure stats out based on the files you have here so i have a pnpm block yaml file so nx will determine that i'm using pnpm so don't have multiple log files that then yeah you won't know what nx will be asserting uh yeah let's close these files so now we'll actually add nx.net let me just find the website and maybe paste the link google skills are not too great this evening here it is oh they merged my pr so now i have the latest comment nice and i'm officially a contributor right yeah nice so this is the i think this is the the main developer on this project so yeah this is the repo and it has not too much of documentation yet and something he's working on but this is what we need right we need to install the package here we're using pnpm don't use npm use pnpm so version zero four two and now it's right here so i'm adding nx.net and now um as is the case with kind of the convention for nx plugins is now we should be able to run nxgenerate it was called nx.net slash core init if you're used to nx and angular the convention for angular packages is to have an ng add schematic and when you run ng add the package name it will call this schematic automatically but for nx plugins the default name is init for a generator to initialize this plugin so let's do that and see what happens it changed a few files so it added this one nx.net dot rc.json has a property of nougat packages uh added something here to get ignore only in apps how about lives as well and in nx json it added is it as a plugin i'll put it here i can have projects in the bottom okay so now we initialize the next.net and now there's a few things to do first off hey sir khan it's after your bedtime it's after dark okay so looking into workspace json there's not a lot here right now but now we can set the default collection for generators to nx.net slash core since this will be primarily a.net workspace so when we do nx generate and then a name of a schematic it will assume that this is the collection of generators we want to call so that is one of the options and then we can set defaults here generators and we need the name of the generators so we could use nx console for that so here are all the ones with net and there is an issue right now it's one of the two that i created i submitted to to nx.net today is if we do if we use nx console and we write anything here it'll do a dry run here in the terminal but dry run is not supported right now by nx.net so it will actually create the files which we're not interested in but we can at least see here which options are available so this was the app generator so the name of the app project of course the language we have c sharp f sharp and visual basic.net and then we have a template so this is um if you have tried the.net cli before you'll say dot new and then the name of the template it could be web api could be console could be class library and you can list the install once by saying dash l you can see all the ones i have installed which are used mostly just default ones so this is the short name is the one we would be writing here so i'm actually going to say i want uh asp.net core web api so the name is then web api so that's what i will be providing here for the template name and then of course we can have a directory that's if we want a grouping folder um and maybe if you wanted to add some tags nx tags and then a test template so do we want to use n unit x unit or the microsoft testing api for our tests and i'll go with x unit and none for no test project so the kind of the convention for net projects is to have a separate testing project whereas if you're used to for example angular you'll have the tests in the same directories as the files they're testing at least for unit tests but for net usually you have a separate project and i don't know if it's related to whether or not they are included in a bundle or if it's just a convention i'm not sure but anyways now i want to set up some defaults for these ones um so let's see how we can do that let me split the screen make some room here so for the generators right now let's take the nx.net dash core equivalent app and give it an object here of options so for for the language we'll have c sharp so that'll be the default language for the template i will be interested in the web api template here and i can spell apparently and then for tags i will give this the tag of type api and then finally the test template will be next unit and there's another one that's relevant here and that's the lib generator for library projects so let's create some defaults for that as well lib generator and it also has a few some of the same here language and i'll always be saying test template and for template yeah for template let's go with that glass lid library by default okay yeah that'll those will be our defaults which will make it a bit easier to to generate projects so let's say we configured the x.net generator defaults and now we must be pretty much ready to generate a project right yeah let's open up our terminal and we'll we'll use nx generate and remember we set the default collection to nx.net core so now we can just use app the name of the generator then we'll give it a name it will be weather api scaffolds the weather api by weather forecast by default so the name will be fitting and do we need anything else no i think we have the defaults covered so let's see what we get and remember to have the.net cli installed and in your global path because it'll be using that behind the scenes as we can see here it ran dotnet restore it added oh first it ran dotnet new web api and all these parameters and then dotnet restore to install the package dependencies and then it created the x unit testing project ran.net restore inside of that and yeah i think here it's adding a reference so that the testing project can um can test or can can discover the the public api of the weather api project so that it can test it updated git ignore workspace json and nx okay what is that about get ignore the same again for some reason we don't need them twice and nx json yeah so it added two projects the weather api project of weather api test and this one is not type api it's type test and the other are just formatting changes workspace.json also added to projects so let's go look at that our workspace json now has two projects we should also be able to see them in our nx console here they are so for the weather api we now have build and a production configuration and serve and a production configuration and build with a production configuration and test for the testing project so we can yeah let's let's try one of them real quick here a production build please for the weather api and it's restoring dependencies and success it compiles a production build so that's a as we can see somewhere here that means a release configuration build whereas the default is a debug build so and let's try to run the test as well for this testing project success as well one test passed very good so now we know that the executors from nx.net is are also working let's try the final one and that's the serve command and this is a net asp.net core mvc web api or not mvc but web api so let's serve it see what happens so now we have a web api here running on part 5000 uh we'll look into that in a while in a little while first let's look at the configuration here so if you're used to nx this should look familiar but notice that for the yeah this is an application project and it's using it has a build target which uses the nx.net build executor and by default it uses the debug configuration for net and in the production configuration it uses the release configuration for dotnet the serve target uses the serv executor for from nx.net and has the same configurations as the build one for the test project it has one target here build and it's the same as before and has another one test and the executor is the test executor from nx.net core this package so yeah this is how it works so it's um it's a bunch of bunch of executors for these targets and then we have the generators we saw before these five we just use the app generator there's a lib generator as well and there's there's one for nougat references so that's adding uh package nuget package dependencies to a project there's a project reference that's adding a dependency between two projects so that they're referencing one is referencing the other so that it can use the public api of that that other project and then there's the sync generator and it is consolidating nougat versions between all the projects in the workspace so that they are using the same version for say x unit or entity framework core or something like that very good so let's say this is generate weather api like so let's look into the files well if you have used net new before it will look familiar but of course here this is an nx workspace so it will have the apps and the libs folders so this web api project and its testing projects are both in the apps apps folder here inside of the weather api project it's an asp.net core web api project so it has app settings configurations it has the startup file with some asp.net stuff in it and it also includes swagger what's it called the open api ui and it's using controllers here so it will pick up all the controllers and route them so they have put it in a controllers folder i wouldn't recommend that but that's what they have done in this dot net new template so there's one here the weather forecast controller and it's extending this controller base from asp.net core mvc and it has this web api attribute on it and it's routing to the name of the controller so we'll have an end point that's called weather forecast and on that endpoint there's an get it accepts the get verb or method and it will return an innumerable of weather forecast and whether forecast objects are it's this data structure so a date time a temperature in celsius fahrenheit and a summary which is in these it can be one of these but it won't it'll it's just randomly generated the same as the the temperatures here so it's not it's not real but you'll get some random data each time you call this api um program yeah it's just set up it's setting up a web host but this is actually using uh i don't know if you noticed i think it was visible here in this app generator right no apparently not i was thinking what's the version of net but that's not mentioned here but we'll we'll get into that in the ci workflow so now we have our project we can look in the testing project here it just has one it has one test and that's it and it's using the x unit so it has a fact attribute on the the methods that then run the tests and um yeah i don't want to i'm not going to change any of this code at least not today i just want to focus on the nx capabilities and setting up as github actions ci workflow so let's try out the nx dependency graph and let's zoom in and let's select them all here we go so this is uh generated from the source files and their dependencies so it's not explicitly managed inside of nx.json there are not any implicit dependencies between these projects as you can see so this is actually supported directly by the nx.net plugin and that is enabled here so very very nice work we have the projects listed here and their dependencies and it doesn't get out of sync because it's it's managed yeah i i imagine it's on the basis of for example here in the this c-sharp project file oh here we go here's the.net version dotnet five but here we have a reference to the dependencies and a project reference to this other project so i'm i i'm thinking this is what they're using to create the dependency graph and now i'll supply this new project graph api that makes it easier for nx plugins to support this generation of this dependency graph based on the actual source code or the configuration files for projects so here we can see the tags and the dependency and it's an application project so pretty great very great so this means that um affected commands should also be working now for for net projects let's find the editor again uh yeah what else i think we'll be generating the github ci workflow now and to do that we have to make sure we have this template.net new template installed because that will allow us to run.net.net new workflow and if you run this command dot net new workflow and you don't have it installed the net cli will actually search for any packages that have a template named workflow and this seems to be the only one so it'll mention this name i showed you before this this name will be yeah this name will be suggested for you i'll just throw it here in the comment and then we can do dot net new word flow right yeah so let's see what it has done it has created one file and it's a yaml file it created it inside of the github folder a workflow subfolder this is the convention for github actions and then our yaml file which is the configuration for our ci workflow so it has a name of build and when code is pushed to the main branch except for these files markdown files and git configurations and this g all these jobs listed here it's only one job but this build job will be triggered there's also this one workflow dispatch that's actually for manually triggering this workflow so there will be a button in the github.com under actions you'll be able to run this workflow whenever you you want to by clicking a button so that's what the workflow displace dispatch enables uh there is also we could also add one called i think it's called pull request and you could say only pull requests targeting main we could do that as well but let's go with what it has generated for us for now so a build job and there's a bunch of conditions here if there's a anything in the commit message saying ci skip or skip ci or no ci it won't run this build job and then it sets up some environment variables here for net cli on the ci server so in the github actions runner so now we get to the steps of this job this steps first it checks out the source code then it sets up dotnet 5.0 and this workflow then goes and runs dotnet restore this needs to be done inside of a project folder so it would have to be done for both of these projects here if we do it using the.net cli directly and then.net build would also have to be run inside of a project folder and dotnet test of course in the testing project folder but we want to use nx because we already saw that we have the the target set up by nx.net so instead of this autogenic generated workflow well let us just commit it generate that ci workflow and let's change it a little bit um so we're going to need node as well we have to use nx so this one is also one of the github actions by github in the actions repo on github.com setup node it's also at version one find something and it has an input parameter called node version and let's go with i'm not sure if if nx supports note 14 yet so i'll go with 12.x and now i want to also on the ci server i also want to use pnp and to do that i'll have to install pnpm so it'll be run npm install global pnpm and now let's install the dependencies for nx and that is the npm install now we're ready to run any of any steps like build and test we're not going to be needing this.net restore because nx.net takes care of that so instead let's just um well we could say here nx build what's it called weather api but we could also which i i would suggest we could use the commands here the scripts from our package.json file so that they are kept in sync so instead of this we will say pnpm build and instead of test we will say net test we'll say pnpm test that will trigger these two so let's make sure they are doing what they should um let's see first i want there's one thing i want to do now we have these two projects so i want to say default project will be the weather api so when we run an nx command like nx build it will assume that we're talking about the weather api so now this one should be good but the nx test we're going to need to specify a name here so that will be the weather api test so that should be good let's let's try it out locally pnpm build everything runs great but you know what we want to build production by default so might be able to do prod but let's use the verbose way which is like so and for testing that's fine so let's try it again npm build now it should be the production configuration and i can't release where dotnet build configuration release yeah so that's the productionbuildfor.net great let's try to test one clear terminal here then pnpm test great so the scripts are working locally so now we should be able to run it in github actions as well so let's say ci um use nx or ci workflow or it's called the build workflow right now here at the top and now um now we need to i need to put it up on github so let me do that let me just set up a repo just a second i'll create a new repo so that you can also have access to the source code and what was it called nx.net workspace workspace for net projects using nx.net create the repo and set the upstream here push it and now it's up here on github for everyone to see in public and let's see if the actions are triggered now on the first commit yeah it is no it's not okay um so yeah we might have to just make one commit to to kick it off uh what could we do we could go in here and change something the next workspace for net projects that yeah oh the this workflow is not going to trigger for markdown files so that's a bit of a bummer but let's let's do it anyways and then what could we change we could format stuff right here nothing changed okay let me go in here what about here save it nothing happens okay hmm seen some code ah not trigger commit uh trigger see i run let's push it it's going and see it should start running here and in any time now refreshing maybe oh here it is okay so now it's running and now it will be running for each commit and i think after it has run the first time we would be able to do it manually so let's see we're setting up.net core version 5 then node.js then installing pnpm and then running pnpmm install to be able to run nx because this is a.net project so it's only using nx and typescript and all that to to be able to run the nx commands and that will then be used to run the nx.net commands or executors rather so it should be done within usually within a minute minute and a half or so but um sometimes late at night in europe it's really slow for some reason but yeah what do you think i'm personally very happy with the progress already being made on this project it's really awesome i was considering to create a plugin myself to try out this project graph with net but then nx.net was released and now it's already in version 0.4 so they are doing uh they are doing stuff there's a lot in the backlog and they are taking issues into account so that's nice i don't know why that's so slow maybe i'll just refresh oh it's done that was strange and apparently it finished in 38 seconds that was really strange github okay so why can't i click it why am i not able to oh i need to sign in oh well let's take a tab here that's signed in so we can better see i hope the text is all right maybe i'll just zoom in one time more okay setup.net core version five for the version five for this cli then node.js version 12 and we got 1222.1 and npm cli as well then we installed pnpm we got version 625 and then we install nx dependencies and as you can see that finished in seven seconds it's really really fast yeah uh and this is without any caching by the way uh this one so now our build step that's where we are we're doing pnpm build so that will trigger nx build configuration production so that will then trigger the how's the font size let me know if it's it's not working if it's too small i mean it probably is right now so let me zoom in one more time um yeah so nx build will trigger the build target of the default project which is weather api it will use the production configuration it's an nx configuration so that will trigger the nx.net executor because that's what's configured for the build target of this project so it's figuring out all the dependencies here that need to be built because test the testing project has a dependency on the weather api project so that also needs to be built i think i think that's why so it's running build production or weather weather api and that is then nx.net is then triggering the.net cli dotnet build the project name outputting it into the dist folder apps with weather api release configuration and what else running.net restore inside of here and then it created this weather api dll let's see in our local workspace here uh the test folder weather api app yeah so those are the files we would expect uh from a it looks like there's some leftovers from a debug build because this one is part of a debug or development build but this one is actually a web server in an executable so we can we should be able to run this one and it'll run the web api without any system or os dependencies that's some of the magic of net core if i mean it's magic because dotnet framework used or any application for net framework had a dependency on the full.net framework so net core is is now built for well it's built for windows right so it's a windows application and so we actually used ubuntu here so i actually wonder which executable we we got out from here uh but yeah that's something else we could we could tackle um this one is ubuntu so i think it will be generating an ubuntu executable if we wanted a windows executable we should use the windows latest image instead so we can do that some other time build went great what about the test same thing uh pnpm test is then running nxtest weather api test project and that is then nx.net is then calling the netcli.net test the name of the project restoring the packages and yeah then it's looking up this weather api project and the testing project and then running the tests and one test passed zero failed and the end result is passed so that's a success so our ci pipeline was working let's go out here to actions and let's find our build job and now look at this because we created that workflow dispatch configuration now we can run it manually and we can pick the branch we want to run it on and then click run workflow and it'll trigger it again here we go so oh i said skipping it that's a little strange why is that why is that is that because the latest commit touched now hmm yeah that i don't know so why is it skipping it i mean it does have all these if statements oh so it's only on push um so this template is not really oh wait yeah so it's only on uh push so not on workflow dispatch uh so something here is this condition is broken uh you know what let me just remove that i don't really need that remove the condition for the gold job ah let's see what will happen then it's being triggered good and it should complete within a minute looking good yeah all good i think if i refresh now it should be almost done right yeah everything passed so now if we go into actions and we choose to build workflow and we run it manually we can see here let's see it should be scheduled in a second here we go manually run by me and this time it should be running the build job yeah it is okay very good very good so that everything is in order now let's just go back and take a look at the code so we have this manually trigger triggering on the main branch that will work and when a commit is made and we should set one up for pull requests as well we only have one job for now it's using ubuntu so it'll build i think it'll build an executable for linux so we should set one up for windows as well for this application depending on where we want to host it of course so let's see checking out the source code installing.net core setting up node.js installing pnpm because it's faster and then using pnpm to install the dependencies for nx and then we'll run the build script from package.json and the test script from package.json finally and this is very fun this should be familiar if you used nx before nx build production configuration nx test the weather api test this one doesn't specify a project but that's because we have specified the default project here in our workspace configuration so the weather api we're calling this build target it's using the nx.net build executor and we saw earlier the serv executor and we didn't try it out but you can try that out yourself just spin it up and then do a get request for localhost port 5000 weather forecast and that will that will return some random weather data for the testing project we have this test target it's using the nx.net test executor so yeah now we can use nx to to build and serve and test and generate net projects we can use it to see the dependency graph we don't have to manually keep the dependency graph up to date we can even we should even be able to use the nx affected commands as well i don't have multiple projects here well well yeah i guess if we if we change the file here in the controller let's see let's look at the nx depth graph or is it affected that graph should also work yeah so it also works because we had one change here and that is affecting this one great and nx affected test or build i'll build both of the projects right okay so everything's in order nx affected works the dependency graph works so really really nice nx plugin for net so far so huge applause for for that project and yeah i think that that will be it for today this was the first episode of nx after dark look forward to seeing you some other time bye for now

Channel: Lars Gyrup Brink Nielsen

Views: 705

Keywords: nx, dotnet, nx-dotnet

Id: uS9RSoqTwVw

Length: 62min 15sec (3735 seconds)

Published: Thu May 06 2021