Generate a TypeScript library in an Nx Workspace

Instructor: [0:00] Right now in our Nx monorepo, we have an application which is a store application. We also got a small library here which is the UI shared which contains a header component which is imported by store at the moment.

[0:13] The application looks pretty solid. You can see here that header component at the very top and a couple of games that are being visualized here in a card. There's one thing that's a bit strange which is that rating which seems like not being formatted in a proper way.

[0:28] In order to explore that, let's create a new library, which is kind of a utility library, which will contain our formatter. The library will be a pure TypeScript library, so we don't need any React functionality in there. We don't need a React component.

[0:42] We will just create a plain TypeScript library. Again, we use yarn Nx generate @nrwl, and before, we had nrwl/react for generating a React library. Now, we'll change that react with simply nrwl/workspace, and we give that library a name, let's say util.formatters, and let's also specify directory.

[1:05] We want to have that bundled under that store here. We could have it shared for the entire workspace, but right now let's just keep it for store. In terms of organization, we want to have it nicely grouped inside a small folder.

[1:18] Again, let's use directory=store. I'm using the dry run just to see whether my command is right. What we will get here, we will get libsstore and you can see already, I made a small typo here, should be store, and we get libstore and util.formatters library folder with an encoding code in there.

[1:40] Let's go for it. It looks like what we want. Now, inside that source folder, we also have that util.formatters. Let's implement here our code. It's pretty simple. Here, we have already store util.formatters.

[1:53] Let's reuse that and paste in some code here, which just does export a format rating function, which gets some rating and formats it properly. It should also be exported, which is already set up by the code generation part, so we don't have to do anything here. Again, let's check the tsconfig.

[2:11] How our basically new formatting library here gets exported, and we have here that Nx egghead scope. We have the store folder and the util.formatters. We can copy and paste this and directly go to our application up here, go to our code, and import our formatting functionality.

[2:29] I'm going here and I'll say import from this one here, and I'm going to import the format rating. Now, in our rendering for down here, we can replace our rating, which is here by using the new function. I'm doing something like format rating, and print that out.

[2:48] Again, let's save, let's restart our application. If we go over to our application again, and refresh, we can now see we have some nice formatting here, which shows like the scores, which our game got by the ratings.

[3:03] If you go back, the main difference here if you would look at our libraries is that first of all, we didn't get any component generated out of the box, as we would have for a React library.

[3:13] Moreover, you can see some small differences such as we don't have any Fable file for our util.formatters down here, because it's not needed in that case, because it's not really React library.

[3:24] For more general purpose libraries, which can also be even shared across frameworks, you could have such a utility library or even like some more business oriented logic library, which is completely agnostic from the UI framework you're using.

[3:37] Therefore, you could share it on your React application, which lives up here as well as in your Angular application, which lives up here.