Building your React app with Nx
At some point you definitely want to build and deploy your app. Obviously, Nx got your back as well. In this lesson we're going to explore the command & configuration for producing a deployable bundle. We'll go through some of the options and learn about the --configuration=production configuration.
Instructor: [0:00] Once we have our applications living in our Nx workspace, we obviously also want to build and deploy them. You can always go into the workspace.json and inspect what kind of targets you'll have available within that architect node, which is the main node for doing the whole things about building, testing, linting, and other things as well.
[0:21] In our case, if we look at the store application, we can see that we have that build target in here and the build target has a variety of options, which depend on which framework you're using for developing that store application. In this case, we have a React application. These are the options that are being passed in. You can also modify these to your own needs and adjust them as you want.
[0:43] Furthermore, we have different kinds of configurations. In this case, you can see we have a production configuration. You could add different ones and whenever we pass in the production configuration, we'll go and take these parameters and override the default ones which are specified in that builder options.
[0:59] The output path here is the dist directory. Let's quickly open up our terminal and invoke that target. Again, as we did in the previous videos, let's use nx run store and there we use the --target=build and we pass also in the --configuration=production, which we'll use our production configuration on here and produce a more optimized, build bundle.
[1:21] Once this is done, if we go to the dist directory, we can see here app store and we have a variety of assets and all the static files that can be deployed. Now, since the build target is something that you might use more often, you can also use the actual nx build command rather than using nx run and just give it a store. Again, we can use --configuration=production, and build the exact same thing.
[1:45] Also, since we also have the API in here, we can do the exact same for API. We can just use here build, the name of the project here is API. Again, we can deduct that here from the project. If we close this here, the end-to-end tests, then we will see further down here, there is the API node.
[2:04] We can use that one here as the target to invoke to build on, and then we just use nx build API --configuration=production and in the very same fashion, in the dist directory we'll also have now the deployables for our API.