Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skillrecordings/products
🎧 Skill Recordings products and core-libs
https://github.com/skillrecordings/products
library monorepo nextjs react typescript
Last synced: 23 days ago
JSON representation
🎧 Skill Recordings products and core-libs
- Host: GitHub
- URL: https://github.com/skillrecordings/products
- Owner: skillrecordings
- License: other
- Created: 2021-08-06T20:19:43.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-22T17:15:51.000Z (7 months ago)
- Last Synced: 2024-04-23T10:38:14.288Z (7 months ago)
- Topics: library, monorepo, nextjs, react, typescript
- Language: TypeScript
- Homepage: https://products-scriptkit.vercel.app
- Size: 215 MB
- Stars: 310
- Watchers: 8
- Forks: 27
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Skill Recordings Projects
This is an exploratory project using Turborepo and pnpm to create a monorepo working environment for multiple applications and a shared common core library (or set of libraries.
## Get Started
You'll need [PNPM](https://twitter.com/pnpmjs) installed.
pnpm is used here based on [significant performance gains](https://twitter.com/jaredpalmer/status/1422574985323950083?s=20) reported by Jared Palmer from a customer.
install pnpm:
```bash
npm i pnpm@latest -g
```
Install all dependencies (all apps and packages) and build all apps and packages
```bash
pnpm install
pnpm build
```
This will build (and cache) the library packages and applications.
You can start an app or package for development:
```bash
cd apps/{{appname}} && pnpm dev
```
```bash
cd packages/{{packagename}} && pnpm dev
```
## Adding a Project to Vercel
The build command needs to be scoped to the specific project so we aren't building all of the repos for every single run. The `-w` flag runs pnpm in the root of the project so all projects are built.
`build`:
The entire repo, all apps and dependencies
```bash
pnpm -w build
```
A single app/package can be filtered (from the root of the repo)
```bash
pnpm -- turbo run build --filter="testingaccessibility"
```
The install command needs to also add `pnpm` and then run install.
`install`:
```bash
npm i pnpm -g && pnpm i
```
## Develop locally using vercel
Because of the way vercel handles monorepo projects, you can only have a single
project linked locally at a given time.
In the root of the project:
```bash
vercel link
vercel dev
```
Calling `vercel link` asks if you want to link the project (yes), has you pick the account (`skillrecordings`), and
finally you enter the project name for the project you are working on.
Repeat this process if you want to work on a different project.
## Tools Used
### Turborepo
> abstracting the complex configuration needed for most monorepos into a single cohesive build system
Turbo is the core of the developer experience that this playground is exploring and provides cohesive logical building of a monorepo that contains many apps and library packages.
It's a closed source paid product that we are excited to use and support.
### pnpm
> Fast, disk space efficient package manager
performant npm is just what it says it is and a modern evolution of npm/yarn etc that follows the same conventions and gives efficiency in a monorepo environment and can shave a lot of time off of builds.
### cypress
for integration and e2e testing!
## Resources
Here's a general tour of Turborepo from Jared:
[](https://www.loom.com/embed/6be074dc590d44b192ab7e126f04c36b)
Some good examples and background in [Jared's TSDX monorepo platground](https://github.com/jaredpalmer/tsdx-monorepo).
[](https://www.vercel.com/?utm_source=[skillrecordings]&utm_campaign=oss)