# Setup with Turborepo

To configure Rslib in a monorepo managed with Turborepo, follow these steps 👇

# Setup the workspace

# Install the packages

Open a terminal at the root of the solution's workspace (the root of the repository) and install the following packages:

pnpm add -D turbo

# Configure Turborepo

First, create a configuration file named turbo.json at the root of the solution's workspace:

workspace
├── packages
├──── pkg-1
├────── src
├──────── ...
├────── package.json
├── apps
├──── app-1
├────── src
├──────── ...
├────── package.json
├──── storybook
├────── .storybook
├────── src
├──────── ...
├────── package.json
├── package.json
├── turbo.json

Then, open the newly created file and copy/paste the following content:

turbo.json
{
    "$schema": "https://turbo.build/schema.json",
    "ui": "tui",
    "tasks": {
        "dev": {
            "dependsOn": ["^build"],
            "cache": false,
            "persistent": true
        },
        "build": {
            "dependsOn": ["^build"],
            "outputs": ["dist/**", "storybook-static/**"]
        }
    }
}

Notice the ^ at the beginning of ^build ? In Turborepo, the caret (^) indicates that a task depends on the same task in its upstream dependencies. For example, ^build means "run the build task of all dependencies before running the current package's build task".

This ensures that tasks are executed in the correct order, with dependencies built before their dependents, optimizing task execution order in a monorepo.

For additional information, refer to the Turborepo documentation.

# Add CLI scripts

Finally, add the dev and build scripts to your solution's workspace package.json file.

workspace
├── packages
├──── pkg-1
├────── src
├──────── ...
├────── package.json
├── apps
├──── app-1
├────── src
├──────── ...
├────── package.json
├──── storybook
├────── .storybook
├────── src
├──────── ...
├────── package.json
├── package.json    <------- (this one!)
├── turbo.json

The dev script will execute the dev task configured earlier in the turbo.json file:

package.json
{
    "dev-pkg-1": "turbo run dev --filter=./packages/pkg-1",
    "dev-storybook": "turbo run dev --filter=./apps/storybook"
}

The build script will execute the build task configured earlier in the turbo.json file:

package.json
{
    "build-pkg-1": "turbo run build --filter=./packages/pkg-1",
    "build-storybook": "turbo run build --filter=./apps/storybook"
}

The --filter option is used to control which projects tasks are executed. In the previous examples, project paths are used, but you can also filter by package name.

# Setup projects

# Configure for development

To configure a project with Rslib for development, follow the Configuration for development guide. Ensure that the project's CLI script is named dev.

# Configure for build

To configure a project with Rslib for build, follow the Configuration for build guide. Ensure that the project's CLI script is named build.

# Configure for Storybook

To configure a project with Rslib for Storybook, follow the Configuration for Storybook guide. Ensure that the project's CLI scripts are named dev and build.

# Try it 🚀

To test the new Rslib configurations, open a terminal at root of the solution's workspace and execute the CLI scripts added earlier:

For development scripts, the application development server should start without outputting any terminal errors.
For build scripts, the application's bundled outputs should be available in either the dist or /storybook-static folder.