Nx After Dark: Migrating to standalone project configurations

hello welcome to nx after dark it's very dark now that the summer has come to an end so pitch black and denmark right now and uh today i want to look into this new i think it's new so it must be something an x 12 something so standalone project configurations where we instead of having one big workspace json or maybe angularjson if you're used to angular we can split them into having just one config per project inside of the project directories so it'll be a project json and there will be one entry in our workspace json configuration file pointing to that project specific configuration even the tags from the nx json file will also be part of this project json configuration file so let's have a look how we can do that we're working with this the angular 2 of heroes routing tutorial i converted that to an nx repository instead of angular cli workspace and that's in nx workspace it did that in previous episodes and we are already starting to see quite a few projects here and we only really split up one feature or sorry one yeah feature or domain or whatever you want to call it and into the libraries that are already or should be available in my opinion in this feature the crisis center so the rest of them are some shared ones a couple of hero features i guess this one is empty right now and yeah so everything is still has just been moved from the main angle app originally it was one project like many are now there's only an app module and app component and an app routing module left so this is then pointing or referencing lazy loading to our different features here okay so looking at our workspace json currently so this is using the workspace json version 2 schema rather than the angular json version one schema nx does support both but we're starting to see some significant changes now and this is one of them that now we can split into a configuration inside of each project folder and if we take the angular library generator for example and we wanted to create the picture shell for for the heroes domain we see that somewhere here there is an option to standalone config so if we did run that we see that sorry i'm having some issues with vs code lately i don't know which extension is crashing all the time so we see that we're getting this project json it will be here right here looks like so has all the properties that are normally in the workspace json and then it has tags i forgot to add some tags so but they will be here similar to usually they're here inside of the nx json in the projects object with all the different tags that we have added and yeah you can set up the tags you want i've used some conventional ones here but i'm still to add linting rules for for enforcing the the boundaries between these different tags we'll set up set that up in another episode so basically if we go to the standalone project configurations all of this will disappear and the workspace json file will have just one line per project like so so that's what we want to do let's discard these changes and i'm going to one by one oh man i wish i knew what extension is crashing all the time this has been such a pain today um yeah i'm going to migrate the our existing projects i'll delete this empty folder again and we're just i thought someone created a migration schematic for this so i'm going to be doing it manually which is not that bad rather i'd rather do it now than once i have five times the amount of libraries so let's just go through them starting at the top we have this admin feature page so we will go to the admin feature page library and where was that oh where was that project json again i have to make sure i put it in the right directory so creating a stand-alone config where does that go it goes in yeah just a root folder of the project okay good so i will go to add feature page i will add project json now i will take this whole object put it in here and add one more right here called tags and let's see if we can find the tags in nx json here it is so facing this go removing it here and in our workspace json it should say let's see ellipse what was it like yeah this one yes yeah when i generated it it was like so but that's because i'm on windows windows does support forward slash as well so unless certain tools that don't but most of the time it does so this should actually be good for now we migrated this this one um this one project so let's see if we can still i don't know build it now it doesn't have build it must have a test feature page can we test it come on now oh yeah it's going good it failed but it ran so i'm happy i'm happy so that works that was one move uh admin page feature to and alone project configuration yeah okay so that was the first one let's see oh nice you have some questions so gregory there's an official schematic to handle the update oh really nice oh cool well let's try that then awesome and ryan do the nx tags move out of nx json and into the separate project json file yeah they do they do so now that i migrated this one one project let's try this schematic from that gregory is mentioning here nx generate now on workspace convert [Music] to nx project all ah if i knew which extension was messing things up for me man i would uninstall it oh cool okay so now all the projects here are gone where the tags were in nx json so i'll delete this whole project property and now workspace json oh nice let's go look at that workspace json in full length here it is i'll just replace with forward slash i don't like the back flashes oh this is getting annoying crashes all the time okay so look at this now we have a 40 line configuration instead of i don't know how many hundreds we had before more than 300 right 327. it's a big improvement um and so why and thank you very much gregory for mentioning that official schematic migration schematic or generator that's very nice um so i'm just going to commit this migrate projects to stand alone configurations so why would we do this i think i think that having having them in separate files instead of this one file will lead to fewer merge conflicts when working especially on the larger repos where we're adding libraries and and projects and targets and all that all the time um so yeah i mean it'll be a lot easier to resolve whether one line goes here or there so i really expect this will lead to a lot fewer um merge conflicts so that that's great and the other thing i think this could lead to more efficient affected detections because we will yeah i mean the only thing is it will take more time it has to load all these files right but still i don't know say we had 200 projects 200 files it's not that that slow to load i guess um so yeah but i don't know if there's a real performance issue i mean also take some time to load thousands of lines of json in one file so i don't know but certainly oh gregory which version of nx the backslash issue should be fixed well i'm on let's see i don't know oh that was angular nx i'm on twelve eight uh and yeah i mean i could do a migraine and we could check it out yeah so why would we do it well for uh fewer merge conflicts and that's that's a big one i mean i don't know how much time i'm spending resolving merge conflicts in angularjs and the workspace json or nx json so yeah i think i'm going to start using this the only downside i see is it this probably doesn't work in i mean maybe it does but i don't expect it to work with the version one uh schema the one that's normally used by angular cli um and yeah and and then sometimes you need to stay on that one is with certain angular schematics especially like the some of the some of the ngrx ones and then nd2 charts and some other libraries they don't work at least the last few times i tried they didn't work with nx workspace schema schema version 2. all right this is really slow and i hope it will also migrate angular for me i'm on stone version 12 1. this was fetched from the angle i o website if it's not fixed in 12 9 gregory will have another look okay well i mean it's it's perfectly valid to have these [Music] backslashes in windows um but yeah why not have it i mean not everyone on this project is going to use windows probably so i'd rather have it across platform compatible uh the latest release was a few days before the commit got merged oh okay so there was a fix or improvement for this one but it's not in the latest release okay well thank you uh gregory let's migrate this workspace anyways so that we're on the latest version that's always nice and then i guess we can i mean gregory if you have any insights on to whether effector is more efficient or more precise when using project jsons i'd love to have some feedback on that there was a few major versions ago or at least in version was it 10 or 11. uh like we were i was always affecting all the projects every time i was i was adding a library because it affected the angular json or workspace json or whatever and annex json i think you since then you added some rules no i thought there were some more precise rules for some of this for detecting changes but that must be some internal things i thought it was a more precise configuration here in these implicit dependencies on on the global configuration files by the way i should really this needs to be changed to workspace.json now that i'm not using uh angularjson anymore in this workspace i i changed the name so that's a good one too man my extensions are just breaking today in vs code i wonder which one it is [Music] what is this one extension host process remote call code zero exit failed due to an error nothing nice oh this is the thunder client okay oh also the nx console basically everything okay i won't get much help from that one okay so how far away with this migration hmm still something missing it's getting there okay crackery so with the default nx json this does help a bit since we have the implicit dependency that links workspace json to all files but if you remove the dependency nx hash is only what's needed so what's the recommendation should i i mean should i remove this entry probably not i mean the configurations in there will potentially affect all or some projects now it's mostly generators things that are left here yeah so i guess it doesn't really affect much at this point when all the project specific settings are now in separate files and because the the project jsons are inside of the project folders they are also in the root folders so they will be detected as belonging to this project so changes in them will affect this project i guess that's the way i'm thinking okay so we download everything and um if we keep nx json depth and project json helps nx affect it if you remove it then they should be equal um okay so i will i will so i will keep this one then okay thank you for the advice okay so yeah so i forgot to share my screen before when i was saying that the project files are inside of for example this this project library which is the root property here so i guess a change to this file will be count as affecting this project that's nice and what's left here in workspace.json now is um what i have at least is generator settings a default project a default collection of plugins and a schema version and i i mean i guess the schema version will affect something in the projects but generators default collection that's not really affecting the project much okay uh yeah we're doing a migration extension host crashed again let's finish this migration to the latest nx and angular hopefully fixes invalid import paths for buildable and publishable libs i don't have buildable and publishing here but whatever so what's the command like nx migrate run migrations json i lost the output or should i should install the dependencies first i don't remember i definitely need to correct workspace configuration name i think i'll try what's what am i using here yarn i think i'll try yarn install first it's new dependencies angular 12 2 now all our nx 12 9. and while we wait for that michael have a question off topic is there anything you're missing in inject component store from the jerks store no nothing absolutely nothing i'm using component store for everything now i mean the only thing that that's immediately obvious is that the redux dev tools for ngrx there's not currently that i'm aware of a public plug-in for njx component store to the redux dev tools it would be possible to do so i think um but i mean that there's always an issue with that because to have them be very useful you have to have everything integrated to that so if you if we start moving some things in global store something in component store i mean the whole state will not really be visible in the redox dev tools so what will they how much will they help realistically um i can tell you about the things that i i'm not missing and that's the actions and the angular modules uh angular modules for configuration just makes everything worse so i'm very very happy with component store compared to indirect store and effects and i like that it's flexible in that when you have a component store service you can make it injectable provided in root to make it a global store or or at least something that's shared between multiple services or components and you can make it a view provider or provider a component level one or you could even make it a platform provider using the platform provider scope so that's really flexible um and and yeah i mean you're going to manage the place that the provider is placed on the unless you're using root or any or platform the provider scope shorthands so that's the downside here is um if you're using component level providers for component store you have to like as soon as you start sharing it in let's say a page with multiple components sharing it between them has some shared state you're going to have to be very aware of that view provider or providers in in the component the parent common component and that that can be a little hard to keep track of but then again modules are even harder to keep track of okay we installed the dependencies and now i think we should i think this is the command if i remember correctly let's see or maybe i should have committed this first i don't know uh lock the dependencies and then package json has been updated there are no migrations to run make sure package json change just makes sense and then run yarn there are some what okay so this is not the uh the right correct command help me out here what's the command for running this migrations file nx migrate help help show help okay that doesn't do me any good help migrate that doesn't help me either migrate help oh here's something run migrations strange all right let's try that one uh you're looking forward to reading my book yeah today is what wednesday tomorrow it's being uploaded to the bookstore sometime tomorrow thursday the 30th of september and then it will take three days i don't know if it's three calendar days or um if it's free working days then it should be available in most online bookstores and of course the printing and the distribution of that will start as soon as possible i believe so yeah it's very soon and everything's everything's done so that's great okay migrations are done but there was no change because of this because i don't have buildable publishable libraries in this workspace so now i can delete this one and i'm fully up to date great i'll push these changes and um yeah that's all i wanted to do in this stream oh let's see you don't have to specify file like that just if it's a different file than normal okay um so so what i could just lift up this one and it will have would have detected that file maybe try that next time hello i'm just about to end the stream i have just i mean i could do another one but i have just finished migrating to standalone project configurations so now every project in the workspace has its project properties and its tags which means that now workspace.json is much leaner there's not as much in here just one entry one line of code per or one line per of configuration per project and nx json likewise doesn't have the tags in here as well so it's nice to have more stable common configurations that will lead to a lot fewer merge conflicts and might even be more effective on the nx affected command so yeah i don't know so maybe i'm kind of a little interested in whether this path has anything to do with uh affected like or does it have to read the project configurations inside of here or does it detect all changes inside that folder without having to read the file that also states root is exactly the same if i chose to write library right here exactly the same it's interesting oh now i understand quick uh nx migrate run migrations and i don't have to specify the file name if it's this the one generated automatically rewatch the video yeah it was uh first i was migrating one project manually and then gregory was nice enough to let me know of this official migration so that's my recommendation for today now a workspace converts to nx project all yeah i'll keep that in mind that was really nice and oh craig let's try this uh let's try generating a library now and with the standalone config and then something and let's see whether the workspace json entry has backslashes or forward slashes it still has backwards backslash so yeah you were also saying that this fix has not been part of the latest release yet so yeah okay i'm going to end the stream i'm might start another one doing some i'll do some yeah i think i'm going to convert another domain to shell libraries and features and all of that just for practicing and showing it again and i'm i'm i'm starting to think about writing an article about feature libraries i'm i'm doing research for a talk about spectacular and feature testing with angular testing libraries spectacular uh because i'm going to do a talk at ng poland in two months from now in person uh about spectacular feature testing so that's going to be great but uh feel free to join it's on this youtube channel and i'll tweet about it i'm going to start another stream in a few minutes so uh one last comment here if all other projects use standalone config it's the default tool so don't have to keep specifying the flag okay that's good to know because otherwise i would have to add it to my generator default options and thanks for the information inside information gregory uh i i noticed this standalone option standalone config so i was a bit curious as to what it did so just wanted to explore that and i can really see the benefit of yeah both from from merge conflicts also i guess it's a lot more it's easier to look at one file with 20 lines of code instead of this one this big one with hundreds of thousands of lines of code so uh interesting thing um the only thing i'm worried about is backward compatibility with the uh some of the angular schematics that don't deal well with new schemas in workspace configurations oh well but that's it for this session going to start another one feel free to join me and keep learning you

Channel: Lars Gyrup Brink Nielsen

Views: 109

Keywords:

Id: y9YplnYEAGo

Length: 34min 50sec (2090 seconds)

Published: Thu Sep 30 2021