Setup a Monorepo with PNPM workspaces and speed it up with Nx!

• React

  1,700 222,406 9.9 JavaScript

  The library for web and native user interfaces.

  

package centric repositories which are used for developing and publishing a cohesive set of reusable packages. This is a common setup in the open source world and can be seen in repositories such as Angular, React, Vue and many others. Those repos are characterized by most commonly having a packages folder and which are then commonly published to some public registry such as NPM.

• Angular

  699 94,599 10.0 TypeScript

  Deliver web apps with confidence 🚀

  

package centric repositories which are used for developing and publishing a cohesive set of reusable packages. This is a common setup in the open source world and can be seen in repositories such as Angular, React, Vue and many others. Those repos are characterized by most commonly having a packages folder and which are then commonly published to some public registry such as NPM.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Vue.js

  381 207,025 7.7 TypeScript

  This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

  

package centric repositories which are used for developing and publishing a cohesive set of reusable packages. This is a common setup in the open source world and can be seen in repositories such as Angular, React, Vue and many others. Those repos are characterized by most commonly having a packages folder and which are then commonly published to some public registry such as NPM.

• TypeScript

  1,307 98,169 9.9 TypeScript

  TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  

As the technology stack I've chosen to go with React (so we can import it in Remix) and TypeScript (because it can almost be considered a standard nowadays). Let's install these dependencies from the root of the workspace:

• nx-recipes

  6 226 7.2 TypeScript

  🧑‍🍳 Common recipes to productively use Nx with various technologies and in different setups. Made with ❤️ by the Nx Team

  

You can find an example of such setup on the Nx Recipe GitHub repository: https://github.com/nrwl/nx-recipes/tree/main/pnpm-workspace

• volta

  84 10,018 9.1 Rust

  Volta: JS Toolchains as Code. ⚡

  

To get started, let's make sure you have PNPM installed. The official docs have an installation page with detailed instructions. I also recommend using something like Volta in particular if you have to deal with multiple different versions of NPM/PNPM and node versions.

• nx

  347 22,188 10.0 TypeScript

  Smart Monorepos · Fast CI

  

This is exactly where Nx can help. It is optimized for monorepo scenarios and comes with an advanced task scheduling mechanism. We still rely on the package installation and package linking mechanism that PNPM workspaces provide us, but use Nx instead to run our tasks in the most efficient way.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project