Configure Assets for my React app in an Nx Workspace
Every app needs assets, whether it's images or json files that need to be available for your app at runtime. In this lesson we look into how Nx already generates and configures a dedicated assets folder for you and how you can even customize that further.
Lecturer: [0:00] Now that we have added so much here of components as well as some styling, our application looks already much nicer. As you can see here, there are some white spaces up here at our very top of our board game visualization. Here are some images supposed to be.
[0:16] If you go back into our code, we can see that there is some image being passed in which contains the URL. If we go to our fake data, you can see that the image basically points to slash assets [inaudible 29.9] PNG which we don't have at the moment.
[0:32] In order to serve assets within an nx workspace, especially within our React App here inside of the nx workspace, we have already a pre-defined folder which is here assets. That has been pre-generated for you when you generated the React application.
[0:45] What I can do is I can go and paste in here the corresponding assets. Let's also restart a WebDev server just to be sure. Now, if you go to our application you can see that now we have according images visualized at the very top of each game.
[1:00] Now, you can, of course, determine and define by yourself which type of folder you'd like to have, and what you would like to have included in your application in terms of assets. That whole thing is configured again in the workspace JSON.
[1:12] If we open that up and go to the project store and scroll down a bit, you can see we have an assets node in here, which is an array of different kind of strings, which bind to either files, or in this case, an entire directory.
[1:25] This is a simple way of defining assets. You can even go a bit more complicated based on your needs, and specify the extended way of copying assets. You can give it an input, which points to some folder location. It could be even the current location of that specific project.
[1:42] You give it a glob, which is a pattern which you want to specify in terms of what you want to copy. For instance, you can say all .png files and nothing else. Then you give it an output directory, which points to where the asset should be copied.
[1:57] When our application is being served, those assets are directly being served during the webpack-dev-server stage, as well as when you compile the application, they are being copied over to your disk folder.