Add a Remix App to a pnpm Workspace Monorepo

Instructor: [0:00] Now that we have our pnpm workspace set up in that pnpm workspace YAML file, we actually want to have something hosted in that workspace. And so, the first step, what I want to do is I want to add a Remix application into that apps folder. [0:16] As the first step, let's go to the remix.run website and let's find out how to install and set our Remix. The first command that we see here already is we can run npx create Remix the latest. This should set up Remix for us. Let's have a look.

[0:34] Now what we want to do is we want to have that app created in the apps folder. What I'm going to do here is I'm on CD Internet apps folder and then I paste in the command. I might also want to use the pnpx, which is the pnpm equivalent for npx and then just run the command.

[0:52] Here, Remix asks where to install the application. I want to have it inside apps folder into my remix app, that's fine.

[1:00] I just want to have the basics for our example and also the Remix app service perfectly fine for this demo, but obviously feel free to choose whatever suits best to your needs.

[1:11] Again, we want to have TypeScript. Do we want to run pmpm install? Sure. Let's see what we got created here. We have actually a Remix app now living in our apps folder here.

[1:25] It is a fully fresh app created by the Remix setup procedure. You can see the node modules folder is also installed locally to that Remix app based on what that generated us.

[1:37] There's also a fully functional package.json with all the dependencies that Remix needs to run. There should also be some scripts in fact up here that we could run.

[1:47] We could just hear CD into my Remix app, and just do a pmpm run dev to launch the Remix app locally. This then opens at localhost:3000. If we go here we go here, localhost:3000, we see the Remix application running and serving.