Proj Crystal, Nuxt, Nx Release

all right let's talk NX version 18 as you have seen I have three things on my list there's product Crystal which in my opinion is a door opener of how anx is going to be used in the coming years I have the new Nu plugin which is maintained by the NX team and which kind of rounds up our view experience with NX and finally also one of my favorite features is NX release we've been dock fooding it for the last couple of months since we announced it and now it's ready for everyone to be used in production so let's Dive Right In so if you have an existing yarn pmpm or mpm workspace based mon repo and you want to enhance it and add anx to it all you need to do is add a single NX package to your package Jon you then need to configure NX by defining most of the task Pipeline and caching and what the next will then do is simply rely on your existing package Json script so here for inst we have that build script which you can invoke with NX build react V and this will now run it you can also see it runs dependent tasks automatically and if you rerun it it's cached so we get a lot of speed benefits you can also run multiple tasks across the mon reper quite easily so you run the- T build lint test and these will be ran in parallel also taking into account the pend between the project so it's kind of like an intelligent parallelization that's going on here so the configuration overhead of such a setup is actually pretty small because as we have seen we have a single NX package we have the NX Json where we mostly need to use it if you want to configure caching or our task pipeline meaning figuring out which TS depend on each other and then anx will automatically rely on your packages and scripts but anx always had more to offer and this is specifically useful once your mon keeps growing if you're working in a larger Enterprise and we did that in the form of so-called NX plugins now NX plugins are very technology specific so usually have a plugin for react specific development which is NX react you have one for V which like lower level build tooling or web Haack or ES build uh or also like other framework specific ones like nextjs or remix packages and the goal of these plugins is mostly to enhance your experience with the NEX and that technology so they provide code scaffolding mechanism some pre-building steps it might be useful for integrating it into a mon repo or also for integrating it with existing Technologies for instance you have a playright setup that you can then hook onto an existing next Jazz app or remix app or whatever you're actually building in a mono so the goal is to enhance now historically these plugins have been a bit on the more config heavy side so basically you had to configure a bit more stuff because there was a specific way of how they worked which kind of blocked people a bit into to opting into them or you need more effort basically for migrating to an NX plus plug-in based setup now project crystal is aimed to change that and our thought was mainly like what if the NX plugins were more like vs code extensions so think about for instance the playright extension if you have an existing workspace you can obviously run the Play Ride test in vs code without any problem but if you add the vs code extension for playright it will enhance your experience so it will add the play button alongside test you might get like a full test Explorer which allows you to more easily identify which test to run and which fails and which which pass so the goal there is to enhance your experience and that's exactly what we want to do with the project Crystal plugins so at the NX Json level there's a new plugins property where these plugins are being registered for your workspace now more easily you can just use a newly introduced NX add command and here for instance we let's add the NX V plugin which will then be in installed into your workspace and preconfigured you can then see it in the plugin section on the NX Json file and it has a bunch of predefined targets here for instance for building previewing testing serving uh your project the new thing about the product Crystal plugins is that they directly rely on the underlying framework config so in our case the NX V plug-in optimizes and enhances V applications so it directly relies on the V config in this case now if you have NX console for instance installed you will also see and cod lens feature pop up direct in your V config which allows you to open up all the targets that have been defined automatically for that V application and if you open up the build one we can also see it has been defined to be cachable it automatically infert the inputs and outputs for the caching and the cool part is even if we change now the V config so we change the output directory the plug-in will automatically sync with that and adjust the Outpost directory that needs to be cached so apart from pre configuring like input and output for caching one thing that we really wanted to do with the project Crystal as well which is kind of the theme of The Crystal is to make them more transparent and so as we have seen we want to rely on the existing framework configs and have them in sync but also when we invoke the according task we directly pass through to the underlying CLI so in this case for instance to run the build we will run the Ved build via the vli rather than having our custom programmatic script to run it now how much these plugins do really depends on the plugin itself so we've seen by default it's probably around helping you set up caching making sure the inputs and outputs are in sync with the underlying config so the V config weback config or whatever you're using but potentially these plugins can do more so we've already seen how they automatically infer targets to run so for vence it was the build and running the dev mode server and stuff like that and by being able to dynamically infert these targets we've also found another very interesting use case particularly for Cypress and playright now both of these Frameworks allow you to run like a Cypress or playright test by passing a single spec file so it would run just for that single spec file and that made us think we could actually do this dynamically now with these plugins and just generate targets per file what is the result what it allows you to basically split up that huge single end to endend block into multiple more F rate runs and this is particularly helpful on on CI if you combine it with Distributing tasks on machines now during the launch week a couple weeks ago we didn't just release nx8 but we also released NX agents which is a more Innovative way of automatically Distributing tasks across machines and now NX agents can hook into this product Crystal setup of dynamic inferring and Trend tests and split them easily across machines with very little overhead on your end so to enable distribution in your CI script that can be generated by an X you can enable that start CI run and pass it to NX Cloud binary and also pass the distribute on flag giving it the number of machines you want to distribute on once this is connected to NX Cloud it will pick this up and as you can see here it will take this individual build and Lin scripts as well as all the individual n Trend tests and distribute them across the number of Agents you have given it now probably needless to say that I'm super excited about this feature not only how it integrates as we have seen with now the CI part of anx with NX agents and distribution and how much benefit it gives you there but also how it brings us much much closer to being less intrusive less config habit with an X so really the door opener for us leading us into the direction of staying more out of your way while still providing a lot of the benefits that anx can bring to your table in a monor repo but also the NX plugins in particular so if you want to dive deeper we published a dedicated blog post for the project Crystal as well as a YouTube video which I'm linking here here as well as in the show notes and the comments of this YouTube video so definitely check that out to dive a bit deeper of what project crystal is all about next on my list is NX so we released also a native KNX plugin maintained by the NX core team and which kind of rounds up our view story so we introduced view last year and with KN now as well you have a lot of good options to create monos with anx and view so you can go ahead and create a new workspace with the create NX workspace synx and choose View and now you also have an option to not just create a plain view mon repo but also to directly use KN as your mon repo setup obviously you can also add KN to your existing view mon repo by leveraging the NX add command at the plugin which will then give you a generator to create a new KNX based application now if you give a look to that we have the KNX app and we also created an end to end test alongside it in this case we chose playright but we can also go with Cypress now one of the advantages clearly to leverage code reuse in such a mono here for instance we have that shared UI package with a Hello view component which we have already used in our view app we can now go ahead and jump into our next app and import that same component also there uh in the project graph we see that kind of sharing reflected now both KN and the view depend on that shared UI package now clearly a lot of these benefits come first of all with the easy scaffold holding and integrating a KNX based application into Mon repo but it also gives you nice options now so you could have like your view app in such an NX mon repo you have a bunch of libraries but now you want to share some of those things and publish them as a nox based application which might be more scalable has a lot of the service side rendering benefits and so you can kind of use lots of those modularity approaches as well as the code sharing approach that you might have in such a mon repo now if you want to dive deeper we also released during launch week a dedicated block post about how the KN plug-in Works which has an video embedded a YouTube video and we also had a live stream with Daniel which is the co-maintainer of KN where we did dive into quite some interesting stuff with realtime communication and party kit and much more so definitely jump into that and check that out finally NX release so we've been wanting to have such a feature in NX for a long time and last year at NX con we announced the first alpha or beta version of NX release we've been dock fooding it since then in our own NX repo and we collaborated with a couple of Open Source repos to test it out and now it's ready for prime time so it's ready for production for everyone to be used now as you have seen earlier in this video you can add NX to any monor repo by also adding the NX sljs plugin it will give you NX release capabilities for JavaScript based applications so you can then go ahead and just run NX release the dry run will basically allow you to simulate a release run and if you have not added any type of release configuration it will just guide you through the process so basically you go ahead and choose whether you want a major preor minor or patch version and an X will then automatically version your projects so if you look at the Lock here you will see which projects were affected which version has been added to the project there's also a diff of the package Json files that have been changed as well as a change lock that got generated for you now you can also go ahead and configure some of the behavior you want to have for anex release there is a new release property that you can add to NX Json where you can for instance add which product should be ignored from the versioning you can define a versioning strategy such as conventional comets or how the chain should be created and published here for instance to GitHub as well now if you rerun the command now you will see it does not query for the minor or major version but it rather uses to your git comets because we configured the conventional Comet strategy now this is all very handy but we all know and we also have that on the NX repo that in more complex scenarios you might want to do more work basically you might want to copy files around adjust some of the content and then run the versioning on top of it and so that's why we added a programmatic API to anx release that gives you maximum flexibility so you can basically Define a release JS file or call it however you really want and VI the nx/ relase package you can get access to a couple of utility functions that help you version your project create a change look and also run the publishing process now however you want to structure these configs or this custom script is up to you here's just an example that you can also find in our docs how you can potentially use this and options that you can pass to the release change log and release publish script now there's much more to discover here so NX release first of all in general is kind of Technology agnostic so we implement the JavaScript specific versioning in that NX sljs plugin but you could provide and we might provide actually further releasing strategies for other type of languages that that might go beyond JavaScript also if you want to dive deeper here's a talk that I linked from James Henry which was one of the first creators of the NX release feature in NX and one of the core contributors to that so definitely check that out as it goes a bit deeper into the various aspects of how anx release can be used and so you can dig there deeper and get some more info so that's a wrap up that's all for anex version 18 as usual make sure to subscribe to our YouTube channel to be notified whenever we publish some new content and there's definitely coming quite a lot of interesting things down the pipe so make sure you follow along

Channel: Nx - Smart Monorepos - Fast CI

Views: 2,469

Keywords:

Id: Ed1ZCNqWF1Q

Length: 13min 35sec (815 seconds)

Published: Thu Feb 22 2024