Install and use external npm packages in an Nx Workspace
Nx has been design to work especially well in large monorepos. One particularity (compare to other monorepo solutions) is that Nx follows the principle of having one single version of a package in the entire workspace. That said, you'll have one version of React, one version of Angular etc.. This helps to keep things consistent, facilitates code sharing as well as easier migrations. In this lesson we're looking into adding the material-ui package to our React app.
Instructor: [0:00] Now that we have our React store application generated in our Nx workspace, let's create something a bit more meaningful such that we get a better feel of what it is like to work in Nx workspace. First of all, let's run our store App. Let's serve it in our browser.
[0:16] In a browser, if you go to localhost 4.200, we get the default page that has been generated for us. There's a couple of nice links here. Since we specify to use the React router, we even got an example page generated so we have our routing page already setup for us.
[0:34] Let's clean this up a bit and create our own UI. To do so, let's open up the App here and we go to source.app and App.jsx component. Let's remove here all those header parts. We also remove the route for now. We don't need that logo SVG. We can even remove that here as well, as well as the star, remove those imports and print out just the message.
[0:59] If we save this to def server is still running in the background recompiling the app and serving it again. If we switch over to the browser, we see that we get the updated message.
[1:10] We want to build a store app for board games. As a first step, we need some API to fetch the data. For now, we don't implement a real API, but rather we just create here a folder fake API, let's create a new file index.ts, based in some data.
[1:29] Here we have an array of different kind of board games with some data attached to them and some functions that allow us to fetch that data. Also, to make the UI a bit more appealing, let's use the Material-UI, which is a React library to use Material-UI components inside your app.
[1:47] We install that in our Nx workspace just as we would do in any other React application. I'm using yarn here, so I'm using yarn at Material-UI core and add that to my package. The difference is that this package is being installed for anti-workspace.
[2:02] Even older applications are able to use the same package in the same version. Back in our application, let's import our fake API, and we import it from fake API which we just created, and we will use here to get all games, which allow us to fetch all of our games and use them to render out each individual card for each of these games.
[2:23] Also, I'm importing directly a series of UI elements, which come from Material-UI core. We have a card, card areas. For each of the game, we want to display a card basically. Down here in our main application rendering, we are going to have something like container, and probably some class that defines our games layout, such that we basically can render off our components in there.
[2:52] Then, for the sake of simplicity, let me just paste in here the actual layout. What we do here is we invoke that get all games function, which returns basically the data, which is now our fake API, and then we render out the various properties of our game inside here.
[3:07] The web source would still be running in the background. It should have recompiled our application. Let's see what our changes look like. Again, you can now see we have our cards, which we just added and they have that nice effect which you expect from material Y, but it definitely needs some more laugh in terms of design and styling.