Skip to content

Setup

Jump to bottom
Roni bhakta edited this page Jul 31, 2025 · 3 revisions

Lenny-app

This Lenny-app is maintained by the ArchiveLabs. which is client app example for Lenny

This Turborepo includes the following packages/apps to handle lenny-app:

Run the following command:

   - pnpm run build: Build all apps and packages
   - pnpm run dev: Develop all apps and packages
   - pnpm run lint: Lint all apps and packages

What's inside?

This Lenny Turborepo includes the following packages/apps:

Apps and Packages

  • docs: a Next.js app with Tailwind CSS
  • web: another Next.js app with Tailwind CSS
  • ui: a stub React component library with Tailwind CSS shared by both web and docs applications
  • @repo/eslint-config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
  • @repo/typescript-config: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Building packages/ui

This example is set up to produce compiled styles for ui components into the dist directory. The component .tsx files are consumed by the Next.js apps directly using transpilePackages in next.config.ts. This was chosen for several reasons:

  • Make sharing one tailwind.config.ts to apps and packages as easy as possible.
  • Make package compilation simple by only depending on the Next.js Compiler and tailwindcss.
  • Ensure Tailwind classes do not overwrite each other. The ui package uses a ui- prefix for it's classes.
  • Maintain clear package export boundaries.

Another option is to consume packages/ui directly from source without building. If using this option, you will need to update the tailwind.config.ts in your apps to be aware of your package locations, so it can find all usages of the tailwindcss class names for CSS compilation.

For example, in tailwind.config.ts:

  content: [
    // app content
    `src/**/*.{js,ts,jsx,tsx}`,
    // include packages if not transpiling
    "../../packages/ui/*.{js,ts,jsx,tsx}",
  ],

If you choose this strategy, you can remove the tailwindcss and autoprefixer dependencies from the ui package.

Utilities

This Turborepo has some additional tools already setup for you:

Adding shadcn/ui components

This is an example to add components to you app, run the following command at the root of your web and Docs app:

pnpm dlx shadcn@latest add button -c apps/web

This will place the ui components in the packages/ui/src/components directory.

Tailwind

The tailwind.config.ts and globals.css are already set up to use the components from the ui package.

Using components

Example to use the components in you app, import them from the ui package.

import { Button } from "@workspace/ui/components/button"

Apps and Packages

  • docs: a Next.js app for Lenny
  • web: another Next.js app i.e Lenny-app
  • @repo/ui: a stub React component library shared by both web and docs applications
  • @repo/eslint-config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
  • @repo/typescript-config: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Utilities

This Lenny Turborepo has some additional tools already setup for you:

Build

To build all apps and packages, run the following command:

cd my-turborepo

# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
turbo build

# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
npx turbo build
yarn dlx turbo build
pnpm exec turbo build

You can build a specific package by using a filter:

# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
turbo build --filter=docs

# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
npx turbo build --filter=docs
yarn exec turbo build --filter=docs
pnpm exec turbo build --filter=docs

Develop

To develop all apps and packages, run the following command:

cd my-turborepo

# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
turbo dev

# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
npx turbo dev
yarn exec turbo dev
pnpm exec turbo dev

You can develop a specific package by using a filter:

# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
turbo dev --filter=web

# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
npx turbo dev --filter=web
yarn exec turbo dev --filter=web
pnpm exec turbo dev --filter=web

Remote Caching

Tip

Vercel Remote Cache is free for all plans. Get started today at vercel.com.

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

cd my-turborepo

# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
turbo login

# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
npx turbo login
yarn exec turbo login
pnpm exec turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:

# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
turbo link

# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
npx turbo link
yarn exec turbo link
pnpm exec turbo link

Useful Links

Learn more about the power of Turborepo:

Clone this wiki locally