Creating Your First React App in a PNPM Worskpace
Create our first application inside the PNPM workspace.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The Art of Enterprise Monorepos with Nx and pnpm course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The Art of Enterprise Monorepos with Nx and pnpm, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:06] Now we have configured the workspace. In this lesson we are going to create our first application by adding a React app in our workspace.
[00:07 - 00:15] Let's start by creating two folders. We specify in our nxconfig file app and packages.
[00:16 - 00:34] Let's cd into the apps folder so that we can create our create. Usually when we create a create React app we use npx package to create React app.
[00:35 - 00:45] But for p and px we will need to add p at the beginning. So we will create it like so.
[00:46 - 00:55] Cool. Now we have our React app sitting inside the front end folder.
[00:56 - 01:01] Here we created a React app using create React app command. But that does not have to stop there.
[01:02 - 01:18] If your choice is not quite create React app you can create many different types of apps inside your p and p and workspace whether it will be a view app or a remix app. You can use the commands listed here to scaffold your app easily within the workspace.
[01:19 - 01:30] Before running the new app we created let's look at the filter command that bn pm provides us. By using --filter you could run any application within the pnpm workspace.
[01:31 - 01:47] So to test the app we created with create React app we can use the filter command that we have configured the provides us. Instead of changing the directory into the apps/frontend folder let's try and run the filter command.
[01:48 - 01:57] We are targeting the front end folder so we don't need to tie apps beforehand. And now we can type the command.
[01:58 - 02:05] So which command should we run? You can look into the project that we created inside the packages and file.
[02:06 - 02:18] As you can see in the script section it is the start command. So let's try that out.
[02:19 - 02:31] We have configured the manage to clear you identify the directory and run the script successfully. In this lesson we implemented a new repository scaffolded by create React app.
[02:32 - 02:42] And in this module we learned how to configure pnpm and create our first React app. In the next lesson we will look into creating a shared library that can be shared within our workspace.
[02:43 - 02:44] Look forward to see you in the next module.