import { Tabs, Tab } from "../../../../components/Tabs";
import { Callout } from "../../../../components/Callout";

# Building your App

Unless your monorepo is only used for [publishing packages to npm](/repo/docs/handbook/publishing-packages), it will likely contain at least one application. Coordinating your app's builds with Turborepo can lead to some extraordinary gains in speed.

## Setting up the build

Turborepo works by keeping your workspace tasks where they belong - in each workspace's `package.json`. Let's imagine you have a monorepo that looks like this:

```
├── apps
│   └── web
│       └── package.json
├── package.json
└── turbo.json
```

Your `apps/web/package.json` should have a `build` script inside:

<Tabs items={['Next.js', 'Vite']} storageKey="selected-framework">
  <Tab>
```json filename="apps/web/package.json"
{
  "scripts": {
    "build": "next build"
  }
}
```
  </Tab>
  <Tab>
```json filename="apps/web/package.json"
{
  "scripts": {
    "build": "vite build"
  }
}
```
  </Tab>
</Tabs>

Inside `turbo.json`, you can add `build` to the pipeline.

<Tabs items={['Next.js', 'Vite']} storageKey="selected-framework">
  <Tab>
```json filename="turbo.json"
{
  "pipeline": {
    "build": {
      "outputs": [".next/**", "!.next/cache/**"]
    }
  }
}
```
  </Tab>
  <Tab>
```json filename="turbo.json"
{
  "pipeline": {
    "build": {
      "outputs": ["dist/**"]
    }
  }
}
```
  </Tab>
</Tabs>

<Callout type="info">

We configure the `outputs` so that we can enable [caching](/repo/docs/core-concepts/caching) - an extremely powerful feature of Turborepo that can skip tasks that have been done before.

</Callout>

This means that running `turbo build` from root will build all of the apps in the repository. Thanks to Turborepo's task cache, you can end up with extremely fast build times.
