Development tasks#

Once you have a working development environment (see Setting up a development environment), you can run tasks to help you develop and test applications and packages in the Squareone monorepo. This page outlines those development tasks.

Start the development server#

You can spin up auto-reloading development versions of all the apps at once:

pnpm dev

Find the URLs for the apps in the output of the command, or:

  • View Squareone at http://localhost:3000.

    API routes are accessed on http://localhost:3000/api/*. The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages. The purpose of the pages/api/dev endpoints are to mock external services in the RSP; see the re-writes in next.config.js.

Run a single app in development#

You can run a single app (e.g. Squareone) in development mode:

pnpm dev --filter squareone

Tip

Turbo Repo provides a powerful filtering syntax to let you run tasks on a subsets of app and packages, and their dependencies or dependents. Learn more in the Turbo Repo –filter documentation.

Start the Storybook server#

Storybook is an environment for designing, testing, and documenting UI components. Applications and component packages in Squareone have their own Storybook environments. From the monorepo root, you can start up the Storybook server for all apps and packages:

pnpm storybook

Linting and formatting#

The monorepo uses Biome as the primary tool for code formatting and linting, with ESLint providing additional comprehensive rule coverage. Prettier is still used specifically for YAML files. These tools run automatically in your IDE and when you commit code (via Husky pre-commit hooks), but you can also run them manually.

Format code with Biome#

Check code formatting for JavaScript, TypeScript, JSON, and CSS:

pnpm biome:format:check

Automatically format and fix files:

pnpm biome:format

Lint code with Biome#

Biome provides fast linting for correctness, accessibility, performance, security, and code style issues. This command allows warnings but fails on errors:

pnpm biome:lint

Comprehensive linting with ESLint#

ESLint runs via Turborepo and provides comprehensive rule coverage across all packages. This is the same linting that runs in CI:

pnpm lint

Format YAML files#

YAML files are formatted with Prettier (Biome doesn’t support YAML):

pnpm prettier:yaml

Running local CI validation#

You can run the complete CI pipeline locally to catch issues before pushing. This validates formatting, linting, type checking, tests, builds, and Docker version synchronization:

pnpm localci

This command runs all the same checks as the GitHub Actions CI workflow, including:

  • Docker version validation (ensures Dockerfile versions match package.json)

  • Biome format checking

  • YAML formatting with Prettier

  • ESLint linting

  • TypeScript type checking

  • Unit and Storybook tests

  • Production builds

  • Biome linting

Tip

Run pnpm localci before pushing to ensure your changes will pass CI. It’s faster to catch issues locally than to wait for the GitHub Actions workflow.

Create a production build#

You can create a production build of all applications and packages, which can be a useful check of a process that typically runs inside the Docker image build:

pnpm build

To build a specific application and its dependencies, use the --filter flag:

pnpm build --filter squareone

Tip

Learn more about the filtering syntax in the Turbo Repo –filter documentation.

VS Code tasks#

Many of these tasks are also available as VS Code tasks. From the VS Code command pallet run Tasks: Run Task and select the task you want to run.