Remix has already a package.json with corresponding scripts configured: You should have now a Remix app, within the apps/my-remix-app folder or whatever name you chose.
The particular options are not really relevant for our article here, so feel free to choose whatever best suits your needs.
In addition, the Remix setup process is also going to ask you a couple of questions that customize the exact setup. Obviously feel free to use a different one. Let’s just go with “my-remix-app” which we’ll be using for the rest of this article. Since we want to have the app within the apps folder, we need to cd into it: ❯ cd apps ❯ npx will be asked for an app name. Info: We use the normal Remix installation & setup procedure here which you can find on their docs page. For this example I picked Remix but you can really host any type of application in here, it won’t really matter. We should now be ready to add our first application. Basically we have to create a pnpm-workspace.yaml file at the root of the repository, defining our monorepo structure: # pnpm-workspace.yaml packages: # executable/launchable applications - 'apps/*' # all packages in subdirs of packages/ and components/ - 'packages/*' Adding a Remix application Now let’s configure PNPM to properly recognize the monorepo workspace. In this article we’re going to use the “app centric” approach, to demonstrate how we can have an application that consumes packages from within the monorepo.Ĭreate an apps and packages folder within pnpm-mono: ❯ mkdir apps packages You can still also publish some of these libs to a public registry. Such repos are characterized in having an apps and packages or libs folder, where the apps folder contains the buildable and deployable applications, while the packages or libs folder contains libraries that are specific to one or multiple applications that are being developed within the monorepo.
app centric repositories which are used mainly for developing applications and products.Those repos are characterized by most commonly having a packages folder and which are then commonly published to some public registry such as NPM. This is a common setup in the open source world and can be seen in repositories such as Angular, React, Vue and many others. package centric repositories which are used for developing and publishing a cohesive set of reusable packages.There are generally two kinds of monorepo: The structure of a monorepo might vary depending on what you plan to use it for. gitignore node_modules dist build Setting up the Monorepo structure gitignore file to immediately exclude things like node_modules and common build output folders. It is probably also handy to initialize a new Git repository such that we can commit and backup things as we progress in the setup: ❯ git initĪt this point let’s also create a.
❯ mkdir pnpm-mono ❯ cd pnpm-mono ❯ pnpm init This will be the root package.json for our PNPM monorepo. Let’s create a new folder named pnpm-mono, cd into it and then run pnpm init to generate a top-level package.json. I also recommend using something like Volta in particular if you have to deal with multiple different versions of NPM/PNPM and node versions. The official docs have an installation page with detailed instructions. To get started, let’s make sure you have PNPM installed.