Frontend – @dosu/monorepo#

We use a NextJS Turborepo
and TailwindCSS styling with the shadcn/ui
component library.

First, enable Node corepack to automatically manage pnpm versions:

$ corepack enable

Then, go to the /frontend dir and run:

$ pnpm i
$ pnpm dev

to install dependencies and start the development servers for all NextJS apps
on their respective ports:

localhost:3000 # Marketing
localhost:3001 # App
localhost:3005 # Email

The documentation is built with Mintlify, you can start it like

$ mintlify dev --port 3011 # or whatever port you like...

🚀 Turborepo Remote Caching Setup#

We've enabled Turborepo Remote Caching for the frontend project.

1. Login to Vercel CLI (one-time setup)#

# Login to Vercel account (turbo will use Vercel's free remote cache)
pnpm exec turbo login

2. Link the project to the remote cache (one-time setup)#

# In the frontend directory
pnpm exec turbo link

3. Verify the cache effect#

# First build (create cache)
pnpm build

# Second build (cache hit)
pnpm build

4. Available build commands with caching#

# App project build (most common)
pnpm turbo build --filter=app

# All projects build
pnpm build

# Test build (for CI)
pnpm turbo build:test --filter=app

Code Linting & Formatting#

Setup an editor extension#

Get live errors as you type and format when you save. Learn more

Try a command#

More Information#

• Biome

Dependencies Management#

All in one command (Fix semver ranges, sync dependencies, format)

pnpm run syncpack

Format the package.json

# format all of the packages
syncpack format
# only the root package
syncpack format --source 'package.json'
# only packages matching a glob
syncpack format --source 'packages/beta-*'
# multiple values can be provided
syncpack format --source 'package.json' --source 'packages/beta-*'

Update all of the production dependencies to the exact versions

# check if the semver ranges are correct
syncpack lint-semver-ranges
# update the semver ranges to the exact versions 
syncpack set-semver-ranges 
# lint the semver ranges
syncpack lint-semver-ranges 

Keep dependencies in sync with the root package.json

syncpack list-mismatches
syncpack fix-mismatches
syncpack prompt

Update dependencies via syncpack

syncpack update --types dev
syncpack update --filter eslint
syncpack update --filter react --types prod
syncpack update --source packages/foo --types prod

Storybook#

We use Storybook to develop UI components more efficiently. It lives
in the packages/ui directory and you can start it with

$ pnpm storybook

When adding new shadcn components to packages/ui, we should always also add a respective
matching story. The easiest way is to copy it from this related shadcn PR
and update the imports.

Questions#

• What can I do if I encounter this error? "✘ react-intersection-observer ^9.14.0 → 9.14.0 app/package.json > dependencies [SemverRangeMismatch]"

  This is a known issue with the syncpack rules. We only allow exact versions for production dependencies. You can run npx syncpack set-semver-ranges in the Frontend directory to fix it.

• Why we didn't enable the Biome linter?

  This feature will be supported in the future. (more)

• Why we should put the biome.json in the root directory?

  Because the Biome VSCode extension only accepts the biome.json in the root directory.

• Why we should put a piece of Biome config in the frontend directory?

  Because the Biome CLI only accepts the biome.json in this directory.

Troubleshooting#

PNPM 10.x unexpected store location#

This seems to happen when switching between v9 and v10. Fix:

$ pnpm store prune
$ pnpm config set store-dir ~/.pnpm-store --global
$ rm -rf /opt/homebrew/bin/5/node_modules
$ pnpm install -g pnpm@10.x.x

Biome cannot find the binary#

You can either install biome globally, which is not recommended because you need to manually make sure that the version matches the one in package.json, or you can set biome.lsp.bin in your local workspace settings.