Creating Custom Generators for Project Scaffolding with Nx

[00:00 - 00:10] In this lesson we are going to look how we can use the generators to scaffold our projects. First let's install nx plugin package to create automation generators at root level.

[00:11 - 00:43] Now we can see the existing plugins using nx list command. nx plugins have these capabilities. They're able to generate the plugins, packages, intent projects, migrations, generators, executors, plugin link checks and presets.

[00:44 - 01:00] Here we are going to build the plugin. So let's run npnx generate. We can shorten the generate command to g.

[01:01 - 01:17] Now it asks for a name. Let's call it building blocks. Now what we are planning to do is creating a basic library within our packages folder.

[01:18 - 01:31] So I would duplicate the shared UI library and then I rename it to UI. And here we have the dist files and node builders which we don't need.

[01:32 - 01:42] So we will delete them but we will keep the rest of the files. So you have a button, an index.x file, packages and anti-asconfig.

[01:43 - 01:53] Okay now we can go ahead and create our generator. So in order to do that we will change our directory into the plugin folder that we just created.

[01:54 - 02:13] So inside the packages building blocks folder. And then here we could say npx nx g for generate and nx plugin generator.

[02:14 - 02:28] And then we call it UI. And it prompts us this question. It asks if you want to generate in the building blocks folder or do we want to build it inside the generators folder.

[02:29 - 02:41] So we pick derived and it has gone and created the generators. So you could see inside the solve folder file there is a generators folder and there are some files in here.

[02:42 - 02:52] So inside the files source folder there is this index.ts template. So this is a template file as you can see it has this template markings.

[02:53 - 03:07] So it gives us this template where we can go and replace the names we supply for the generator. Now going back to our building blocks folder going to generators again and the files and the source.

[03:08 - 03:18] So we have this variable here which we don't need so we can just delete it. And what we can do is now copy over the files the UI folder.

[03:19 - 03:40] So we'll go to a UI folder and we'll copy over these files. So in the source folder we will paste those files and make sure that your package.json and tsconfig.json files are inside the files folder not on the source folder.

[03:41 - 03:55] So we move them out outside of the source folder and now we have these files. So whenever we have a placeholder for our template we should rename it to a dot template.

[03:56 - 04:09] So our package.json file we will rename it to dot template. We suffix it with the dot template so that it can pass the placeholders that we provide.

[04:10 - 04:34] So for example we can change the UI here to accept a placeholder and we can call it name and the description as well. So to remind you again the reason why we add dot template suffix in front of the file is because we are using these template markers.

[04:35 - 05:08] So we can remove the index file from here because there's another index file and we don't really need this button because we are not going to generate a button every time we create a library out of this package. So we can delete it and then let's add a comment here saying import your components. So you are pretty much import and export these components here so we could pretty much freedom it to export your components here.

[05:09 - 05:38] And for the TS config file we don't have to change anything because we are not passing in any name or description value here. So we leave those as it is. Now let's go to schema.json file and here we already have our name property but we do have to add description property as well. So let's copy this over and change it to description.

[05:39 - 05:53] And we can change it here to something like why do you need this. So the next thing go to the schema.ts types and we need to add the description here as well.

[05:54 - 06:19] So it's and let's go to general.ts file. So here in our project we are using packages instead of lips. So we can change these two packages for the project root. Now everything looks good. So we can try out this generator. Okay now let's try out this generator.

[06:20 - 06:40] We can pass in the drive-on command see which files it generates. So let's give it the name shared lip.

[06:41 - 07:03] And it shows us the files that it will generate. So we can actually run this command without the drive-run suffix. So we'll give the same answers.

[07:04 - 08:26] Now if we go to our packages folder you could see there's a new shared lip library has been generated. So our template was successful and it has generated our index.ts file correctly as well as the package.json file. You could see that the shared lip has been added to its name and also the description as we've entered. So this looks good. So the next thing is we if you look at it it's not being built yet. So to test if it works back then we can first install the NPM packages. After the installation the node modules. So if you're looking in the package.json file we could see that it has the build command already. So we can give it a try. The build was successful and the inside the dist folder we could see the index file.

[08:27 - 08:54] Well at the moment there's nothing in it because in our source folder it was only an empty index file. So what we can do is we can create a read file. And we can export that file here.

[08:55 - 09:28] Let's run our build again. It worked and if you go into the dist folder and check you could see the button has been compiled as well as the index file. So this looks good. Now we can use our generator to generate various React libraries. In this lesson we learned how to create a custom plugin and a generator and how to scaffold a simple React library using these commands .