Use Run Commands to launch the API and App of an Nx Workspace

Share this video with your friends

Send Tweet
Published a year ago
Updated 10 months ago

When you host your frontend and backend API in the same Nx workspace, you most often want to launch them simultaneously. Of course, you can run the processes in two different terminals, but that's kinda cumbersome. In this lesson, we're going to look into how you can optimize that developer experience by leveraging the run-many command and Nx run-commands.

Instructor: [0:00] In our monorepo, we now have two different applications. We have our store application and we have now that API which we just added. In order to get both running, we have to create two different terminals here.

[0:12] First of all, we execute our API with API.surf. We can split here our [inaudible] , this is pseudo-code and then Nxrunstore.surf. We have both applications running. If we open up our frontend application, we can now via a proxy that was generated X our games through our backend applications running in the background.

[0:37] Always having to run two different terminals can become cumbersome, also because most of the time you will need both of them in order to properly be able to develop. There are different possibilities to run both of them simultaneously.

[0:49] First of all, you can use the run many commands. Nx supports a command that is run many, which allows you to give it the target and you can say surf, because we want to surf both of the applications. Then it has a projects flag, where we can parse multiple projects separated by a comma.

[1:07] In this case, it will be API, store. Then there is an important part which you have to add which is parallel=true. We want to execute this command in parallel, so we want to surf API and store side by side.

[1:22] If we don't specify that parallel flag, it would start first API and then wait until the project terminates before starting store. Let's try this. We can now see that here we get both applications are being surfed.

[1:35] We first got an API surf, and then afterwards we get our application surf again. If I go back to our browser and if I refresh, it still works as we expect. This is a neat little trick with which you can then add in our package.json, and have it run with a simple command such as launch application and API.

[1:55] Another possibility which we can use are the so-called run commands. Whenever you have some scripts you want to execute, you can most often package them up as a run command within your workspace JSON.

[2:08] If we go to our application store, for instance, and whenever we launch store, we also want to launch our back-end API. What we can do here is, in our build, surf, lint and so on targets, we can add an order custom one, let's say after surf, and call it surf app and API.

[2:27] Now, every command here has to have a builder, which has the proper implementation to run the job. In this case, we use the Novel workspace builder and we use the run commands as the target, which you want to execute. Run commands take a series of options and the options are basically the commands to execute.

[2:47] Here we can list one command after the other. The first command will be to serve our application, which will be Nx surf API, which will be an alternative to Nx run API surf. The second command, which we want to execute is to start our application.

[3:03] In this case, it would be Store Surf. The run commands are by default in parallel. We can just leave it as it is. We can open up here our terminal again. Now, we would do an Nx run. We want to run the project store in this application, because that is where we placed our run command's configuration.

[3:22] As a target here, we don't use surf anymore as we did before, but we have already used our custom target, which we just created. Again, you can see it starts to store, it starts to API and once both are running again. If I jump over to our browser and do a refresh, you can see it still works as we expect.

[3:40] Run commands are very powerful because you can encapsulate whatever script you want to run within your workspace configuration, where all our [inaudible] run commands are.