Running a React App in the Browser with Nx
After having generated a brand new React app we definitely want to serve it in our browser. In this lesson we explore the workspace.json file which contains your workspace project's configuration. We learn about builders and how to customize their options and how to ultimately use the serve target to run our app in the browser.
More customization possibilities can be found here
Instructor: [0:00] Here, we have a new Nx workspace, with already a React application joining it in here, which is called Store. We would like to serve that in our web browser. The most important information is in that workspace JSON. The workspace JSON contains all of the projects you have in your workspace.
[0:18] It contains the core configuration and how you can run, build, or in general what you can do with it. We see the default product here is Store. If we open up that projects node, up here we can see we have here Store, and Store and Trend Test. Trend Test is really a Cypress test that runs tests based on that Store application.
[0:39] For now, let's ignore that and focus on our Store app here. The Store app here has a couple of basic information at the very top here, which determines the root of the application where the source lives, and the project type. Usually you have product type application, and product type library for those parts of products that live down in that libs folder.
[0:58] The other important note here is that architect note. The architect contains all of the targets an app can run. Targets can be, for instance, to build an app, to surf the app, to link the app, to test the app, but you could really just add your own as well by extending here that architect note.
[1:16] In order to be able to surf the app in a browser, let's open up that SURF note here. Every architect note usually has such a builder entry. The builder is basically responsible for running the operation. It's a task runner, which in this case uses that Novel web package and specifically the def server within that package.
[1:37] For instance, the build task at the very top here uses a novel web package again, but to build target, for building the application. In order to execute this builder and this task here in general, what you can do is, again, on the comment line use the Nx binary.
[1:52] The structure of the commands is the following. You either prefix it with NPX or yarn, or you can just use Nx if you installed it globally. In my case, I'm using yarn, so I'm doing yarn Nx and then you specify run and now you have to specify which product you want to run.
[2:09] The name of the product is the one that appears here on that note, in our case, it is store. We write here store and you write colon, and now the target you want to execute. In our case, it is SURF.
[2:21] I'm writing surf and I hit enter. You can see our application is now being compiled. Web server is now listening on that port, on 4200. If you go to our browser, we see the application is serving at that port. Since serving an application is something you do very often, what you end up doing is most often also create some scripts.
[2:42] Actually, when you generate a new Nx workspace, there are already some scripts predefined for you. You can see, for instance, here for a start command, it just runs nxserve without any further parameters.
[2:54] The reason why that works is because our store app is the default project. Nx will default to the store app and serve the store app in your browser. You can also customize how you want to serve the application. For instance, if you open up here that SURF part, there are different kinds of options which you can specify.
[3:13] For instance, if you don't want to use the default port, what we could do is we can add here another parameter port and say we don't want it 4200, but we want it 3000. If you save this again, and we again run our project, you can now see that our app now runs on localhost:3000.
[3:33] If you open up the browser and go to localhost, we see that app runs there. Similarly, you can also pass these options as comment line arguments. Instead of customizing the options directly, we could use our SURF command and specifyport=3001. Again, you can see how now the port is being changed to what we specified.
[3:56] This mechanism of running specific targets of a project obviously work with other targets than to serve as well. For instance, we can land our project by using a similar command. We again use yarn Nx run store: and now instead of SURF, we just specify Lint and our project will be Linted.