Create a Shared React Library in an Nx Workspace
Nx is designed to best work with large monorepos. As such it aims to help you scale your development across teams and applications. One of the guiding principles is to split your code into apps and libs. Most of your code lives inside dedicated, well bounded libs, whereas apps can be seen as the "linkers" that include the various libraries into a deployable and cohesive unit.
In this lesson we're going to learn how to create a new React library within our Nx workspace, how to generate a component into that library and then re-use it within our store application.
Instructor: [0:00] The real power of Nx comes when you have to scale your development across different teams and across different applications. Nx is actually designed to work in large monorepos where you have most of your applications or a subset of correlated applications within the same workspace.
[0:17] Scaling an application development simply means splitting it up in different libraries. In a typical workspace, what you see is that the applications are very thin layers that mostly bundle codes that list down in that library's folder.
[0:32] An application to us a linker that links together variety of libraries in that lib's folder. It's usually a rule of thumb is that you will have 20 percent code up here and about 80 percent code down here. Let's try to explore this concept with our simple application by generating a new library that hosts the top header bar here for our application.
[0:54] To generate a new library, we again use the comment line, and we use Nx generate at Novel React again, but this time we don't use application, but we use rather lib for library.
[1:05] The name of our library is UI shared and we generate it inside a directory store inside that libs folder, because the intention of this library is that it hosts all shared UI components for our store application.
[1:19] Again, in the first time, let's just do a dry run to see whether the code that's being generated is what we expect. We see like inside the libs folder a store folder with the UI shared library.
[1:31] Let's remove the dry run and generate. As you now see here in that lib folder, you get a new store folder and a UI shared folder, which then hosts our library.
[1:40] It already created a component for us, which is kind of a placeholder and that got also exported, but we don't need this component, and rather want to generate a new component for us.
[1:50] To generate our new component, we can use yarn Nx generate at Novel React. This time we use component and we use header as the name of our component. We want also to say that it should be generated inside our project, which is named store UI shared.
[2:07] The name of the project here is a combination of the folder path, which we have here in that libs folder. You can also just to be sure go to the workspace JSON and if you go to the project node here, you can see that we have the names of our applications in here.
[2:23] We have basically store, which is an application sitting in apps folder. We have store end-to-end, which is recording end-to-end test and then we have our library project, which we just generated before and the name there is store UI shared.
[2:37] If we hit enter, it's going to ask us whether we want to export our component. We definitely want that because it's something that we want to reuse in our application, not something that is internal to our library.
[2:49] Finally, what we get here is we get a new header folder that hosts our header components, and also gets exported in our index.ts file. Let's implement our header component. I'm just going to copy over some setup, which uses some of the material components from Material-UI core. Finally, we are ready to actually reuse that component in our app.
[3:11] All of the libraries that get generated are exposed as a path mapping over that tsconfig file down here. You can see, initially we specified our workspace name, which will be used as your npm-scope within that workspace. We can import our library via that path mapping.
[3:29] If you go up here into our application component, we can go to the very top and import our header component from that new path which just got generated, and we can import here our header.
[3:44] Finally, in order to use the header, we need to wrap that whole part down here with a fragment, which we can do like this, and add our header at the very top here. Let's save and restart our project. If you go to our browser again and refresh, we can see that our header gets visualized at the very top here.
[4:05] We might want to make some style adjustments, which we can do here in our global styles file and say something like body margin zero, padding zero. If we go back, it looks already much nicer and cleaner.