diff --git a/docs/site/components/tabs.tsx b/docs/site/components/tabs.tsx index ea2cb1f6d3631..bc2c3bc4876dc 100644 --- a/docs/site/components/tabs.tsx +++ b/docs/site/components/tabs.tsx @@ -22,6 +22,16 @@ export function Tabs({ ); } +const packageManagers = ["pnpm", "yarn", "npm"]; + +const checkPackageManagerIndex = (index: number, provided: string) => { + if (provided !== packageManagers[index]) { + throw new Error( + `Package manager at index ${index} must be ${packageManagers[index]}.` + ); + } +}; + /** Use component to create the tabs. They will automatically be assigned their values in the order ["npm", "yarn", "pnpm"]. */ export function PackageManagerTabs({ storageKey = "package-manager-tabs", @@ -31,17 +41,26 @@ export function PackageManagerTabs({ storageKey?: string; children: ReactNode; }): JSX.Element { - const items = ["npm", "yarn", "pnpm"]; - if (!Array.isArray(children)) { throw new Error("Children must be an array."); } + children.forEach((packageManager, index) => { + if (!packageManager.props.value) { + throw new Error(`Package manager tab is missing a value.`); + } + + checkPackageManagerIndex(index, packageManager.props.value); + }); + return ( - + {children.map((child, index) => { // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment - return { ...child, props: { ...child.props, value: items[index] } }; + return { + ...child, + props: { ...child.props, value: packageManagers[index] }, + }; })} ); diff --git a/docs/site/content/repo-docs/core-concepts/internal-packages.mdx b/docs/site/content/repo-docs/core-concepts/internal-packages.mdx index 93a147d3c2101..a87bcad68a3e3 100644 --- a/docs/site/content/repo-docs/core-concepts/internal-packages.mdx +++ b/docs/site/content/repo-docs/core-concepts/internal-packages.mdx @@ -10,17 +10,18 @@ Internal Packages are libraries whose source code is inside your Workspace. You Internal Packages are used in your repository by installing them in `package.json` similar to an external package coming from the npm registry. However, instead of marking a version to install, you can reference the package using your package manager's workspace installation syntax: - + + ```json title="./apps/web/package.json" { "dependencies": { - "@repo/ui": "*" // [!code highlight] + "@repo/ui": "workspace:*" // [!code highlight] } } ``` - + ```json title="./apps/web/package.json" { "dependencies": { @@ -30,11 +31,11 @@ Internal Packages are used in your repository by installing them in `package.jso ``` - + ```json title="./apps/web/package.json" { "dependencies": { - "@repo/ui": "workspace:*" // [!code highlight] + "@repo/ui": "*" // [!code highlight] } } ``` diff --git a/docs/site/content/repo-docs/core-concepts/remote-caching.mdx b/docs/site/content/repo-docs/core-concepts/remote-caching.mdx index ddff93a3ad393..872f868cefd06 100644 --- a/docs/site/content/repo-docs/core-concepts/remote-caching.mdx +++ b/docs/site/content/repo-docs/core-concepts/remote-caching.mdx @@ -89,15 +89,16 @@ turbo login You can also use your package manager if you do not have [global `turbo`](/docs/getting-started/installation#global-installation) installed: - + + ```bash title="Terminal" -npx turbo login +pnpm dlx turbo login ``` - + ```bash title="Terminal" yarn dlx turbo login @@ -105,10 +106,10 @@ yarn dlx turbo login - + ```bash title="Terminal" -pnpm dlx turbo login +npx turbo login ``` diff --git a/docs/site/content/repo-docs/crafting-your-repository/caching.mdx b/docs/site/content/repo-docs/crafting-your-repository/caching.mdx index cf57616a1893e..116874fbcdd8a 100644 --- a/docs/site/content/repo-docs/crafting-your-repository/caching.mdx +++ b/docs/site/content/repo-docs/crafting-your-repository/caching.mdx @@ -49,23 +49,27 @@ If you have [`turbo` installed globally](/docs/getting-started/installation#glob Alternatively, you can run the `build` script in `package.json` using your package manager. - + ```bash title="Terminal" -npm run build +pnpm run build ``` - + + ```bash title="Terminal" yarn build ``` - + + + ```bash title="Terminal" -pnpm run build +npm run build ``` + diff --git a/docs/site/content/repo-docs/crafting-your-repository/creating-an-internal-package.mdx b/docs/site/content/repo-docs/crafting-your-repository/creating-an-internal-package.mdx index 65e5e6eb90541..3d58f50a4cd19 100644 --- a/docs/site/content/repo-docs/crafting-your-repository/creating-an-internal-package.mdx +++ b/docs/site/content/repo-docs/crafting-your-repository/creating-an-internal-package.mdx @@ -45,7 +45,8 @@ You'll need a directory to put the package in. Let's create one at `./packages/m Next, create the `package.json` for the package. By adding this file, you'll fulfill [the two requirements for an Internal Package](/docs/crafting-your-repository/structuring-a-repository#specifying-packages-in-a-monorepo), making it discoverable to Turborepo and the rest of your Workspace: - + + ```json title="./packages/math/package.json" { "name": "@repo/math", @@ -65,14 +66,14 @@ Next, create the `package.json` for the package. By adding this file, you'll ful } }, "devDependencies": { - "@repo/typescript-config": "*", + "@repo/typescript-config": "workspace:*", "typescript": "latest" } } -```` - +``` - + + ```json title="./packages/math/package.json" { "name": "@repo/math", @@ -98,7 +99,8 @@ Next, create the `package.json` for the package. By adding this file, you'll ful } ``` - + + ```json title="./packages/math/package.json" { "name": "@repo/math", @@ -118,11 +120,12 @@ Next, create the `package.json` for the package. By adding this file, you'll ful } }, "devDependencies": { - "@repo/typescript-config": "workspace:*", + "@repo/typescript-config": "*", "typescript": "latest" } } -``` +```` + @@ -201,17 +204,19 @@ These files map to the outputs that will be created by `tsc` when you run `turbo You're ready to use your new package in an application. Let's add it to the `web` application. - + + ```diff title="apps/web/package.json" "dependencies": { -+ "@repo/math": "*", ++ "@repo/math": "workspace:*", "next": "latest", "react": "latest", "react-dom": "latest" }, ``` - + + ```diff title="apps/web/package.json" "dependencies": { + "@repo/math": "*", @@ -221,10 +226,11 @@ You're ready to use your new package in an application. Let's add it to the `web }, ``` - + + ```diff title="apps/web/package.json" "dependencies": { -+ "@repo/math": "workspace:*", ++ "@repo/math": "*", "next": "latest", "react": "latest", "react-dom": "latest" diff --git a/docs/site/content/repo-docs/crafting-your-repository/managing-dependencies.mdx b/docs/site/content/repo-docs/crafting-your-repository/managing-dependencies.mdx index e49a6f07b097a..fffffbca572fe 100644 --- a/docs/site/content/repo-docs/crafting-your-repository/managing-dependencies.mdx +++ b/docs/site/content/repo-docs/crafting-your-repository/managing-dependencies.mdx @@ -11,17 +11,19 @@ import { LinkToDocumentation } from '#/components/link-to-documentation'; - **Internal dependencies** let you share functionality within your repository, dramatically improving discoverability and usability of shared code. We will discuss how to build an Internal Package in [the next guide](/docs/crafting-your-repository/creating-an-internal-package). - + + ```json title="./apps/web/package.json" { "dependencies": { "next": "latest", // External dependency - "@repo/ui": "*" // Internal dependency + "@repo/ui": "workspace:*" // Internal dependency } } ``` - + + ```json title="./apps/web/package.json" { "dependencies": { @@ -31,12 +33,13 @@ import { LinkToDocumentation } from '#/components/link-to-documentation'; } ``` - + + ```json title="./apps/web/package.json" { "dependencies": { "next": "latest", // External dependency - "@repo/ui": "workspace:*" // Internal dependency + "@repo/ui": "*" // Internal dependency } } ``` @@ -57,16 +60,17 @@ When you install a dependency in your repository, you should install it directly To quickly install dependencies in multiple packages, you can use your package manager: - + + ```bash title="Terminal" -npm install jest --workspace=web --workspace=@repo/ui --save-dev +pnpm install jest --save-dev --recursive --filter=web --filter=@repo/ui --filter=@repo/web ``` -npm documentation +pnpm documentation - + Yarn 1: ```bash title="Terminal" @@ -89,13 +93,13 @@ yarn workspaces foreach -R --from '{web,@repo/ui}' add jest --dev - + ```bash title="Terminal" -pnpm install jest --save-dev --recursive --filter=web --filter=@repo/ui --filter=@repo/web +npm install jest --workspace=web --workspace=@repo/ui --save-dev ``` -pnpm documentation +npm documentation @@ -154,15 +158,16 @@ Tools like [`syncpack`](https://www.npmjs.com/package/syncpack), [`manypkg`](htt You can use your package manager to update dependency versions in one command. - + + ```bash title="Terminal" -npm install typescript@latest --workspaces +pnpm up --recursive typescript@latest ``` - [→ npm documentation](https://docs.npmjs.com/cli/v7/using-npm/config#workspaces) + [→ pnpm documentation](https://pnpm.io/cli/update#--recursive--r) - + Yarn 1: ```bash title="Terminal" yarn upgrade-interactive --latest @@ -179,11 +184,11 @@ yarn upgrade typescript@latest --upgrade - + ```bash title="Terminal" -pnpm up --recursive typescript@latest +npm install typescript@latest --workspaces ``` - [→ pnpm documentation](https://pnpm.io/cli/update#--recursive--r) + [→ npm documentation](https://docs.npmjs.com/cli/v7/using-npm/config#workspaces) diff --git a/docs/site/content/repo-docs/crafting-your-repository/running-tasks.mdx b/docs/site/content/repo-docs/crafting-your-repository/running-tasks.mdx index fb1ea975d0b3b..b51c0cf63fb82 100644 --- a/docs/site/content/repo-docs/crafting-your-repository/running-tasks.mdx +++ b/docs/site/content/repo-docs/crafting-your-repository/running-tasks.mdx @@ -40,24 +40,28 @@ For tasks that you run frequently, you can write your `turbo` commands directly These scripts can then be run using your package manager. - -```bash title="Terminal" -npm run dev -``` + + ```bash title="Terminal" + pnpm dev + ``` - + + ```bash title="Terminal" yarn dev ``` - - ```bash title="Terminal" - pnpm dev - ``` + + + +```bash title="Terminal" +npm run dev +``` + diff --git a/docs/site/content/repo-docs/crafting-your-repository/structuring-a-repository.mdx b/docs/site/content/repo-docs/crafting-your-repository/structuring-a-repository.mdx index 87fbe8c0302f5..2a0e92578fb3e 100644 --- a/docs/site/content/repo-docs/crafting-your-repository/structuring-a-repository.mdx +++ b/docs/site/content/repo-docs/crafting-your-repository/structuring-a-repository.mdx @@ -22,10 +22,31 @@ In this guide, we'll walk through setting up a multi-package workspace (monorepo Setting up a workspace's structure can be tedious to do by hand. If you're new to monorepos, we recommend [using `create-turbo` to get started](/docs/getting-started/installation) with a valid workspace structure right away. + + + +```bash title="Terminal" +pnpm dlx create-turbo@latest +``` + + + + +```bash title="Terminal" +yarn dlx create-turbo@latest +``` + + + + ```bash title="Terminal" npx create-turbo@latest ``` + + + + You can then review the repository for the characteristics described in this guide. ## Anatomy of a workspace @@ -35,28 +56,29 @@ In JavaScript, a workspace can either be [a single package](/docs/guides/single- Below, the structural elements of `create-turbo` that make it a valid workspace are highlighted. - - - - - - - - - - - + + + + + + + + + + + + + - - - - + + + + - - + - + @@ -77,26 +99,27 @@ Below, the structural elements of `create-turbo` that make it a valid workspace - - - - - - - - - - - + + + + + + + + + + + + - - - - + + + + - - + + ### Minimum requirements @@ -117,7 +140,18 @@ Below, the structural elements of `create-turbo` that make it a valid workspace First, your package manager needs to describe the locations of your packages. We recommend starting with splitting your packages into `apps/` for applications and services and `packages/` for everything else, like libraries and tooling. - + + + ```json title="pnpm-workspace.yaml" + packages: + - "apps/*" + - "packages/*" + ``` + pnpm workspace documentation + + + + ```json title="./package.json" { "workspaces": [ @@ -127,9 +161,10 @@ First, your package manager needs to describe the locations of your packages. We } ``` - npm workspace documentation - - + yarn workspace documentation + + + ```json title="./package.json" { "workspaces": [ @@ -139,16 +174,7 @@ First, your package manager needs to describe the locations of your packages. We } ``` - yarn workspace documentation - - - ```json title="pnpm-workspace.yaml" - packages: - - "apps/*" - - "packages/*" - ``` - pnpm workspace documentation - + npm workspace documentation @@ -176,7 +202,8 @@ In the directory of the package, there must be a `package.json` to make the pack The root `package.json` is the base for your workspace. Below is a common example of what you would find in a root `package.json`: - + + ```json title="./package.json" { @@ -189,13 +216,13 @@ The root `package.json` is the base for your workspace. Below is a common exampl "devDependencies": { "turbo": "latest" }, - "packageManager": "npm@10.0.0" + "packageManager": "pnpm@9.0.0" } ``` - + ```json title="./package.json" { @@ -214,7 +241,7 @@ The root `package.json` is the base for your workspace. Below is a common exampl - + ```json title="./package.json" { @@ -227,12 +254,11 @@ The root `package.json` is the base for your workspace. Below is a common exampl "devDependencies": { "turbo": "latest" }, - "packageManager": "pnpm@9.0.0" + "packageManager": "npm@10.0.0" } ``` - ### Root `turbo.json` diff --git a/docs/site/content/repo-docs/crafting-your-repository/upgrading.mdx b/docs/site/content/repo-docs/crafting-your-repository/upgrading.mdx index c9978c20537bf..47b794eac9212 100644 --- a/docs/site/content/repo-docs/crafting-your-repository/upgrading.mdx +++ b/docs/site/content/repo-docs/crafting-your-repository/upgrading.mdx @@ -18,15 +18,15 @@ Get started upgrading from 1.x to 2.0 by running: - + ```bash title="Terminal" -npx @turbo/codemod migrate +pnpm dlx @turbo/codemod migrate ``` - + ```bash title="Terminal" yarn dlx @turbo/codemod migrate @@ -34,10 +34,10 @@ yarn dlx @turbo/codemod migrate - + ```bash title="Terminal" -pnpm dlx @turbo/codemod migrate +npx @turbo/codemod migrate ``` @@ -64,17 +64,18 @@ Additionally, a `name` field will be added to any `package.json` in the Workspac Turborepo 2.0 requires that your Workspace define this field as a way to improve the stability and behavioral predictability of your codebase. If you do not have one already, add this field to your root `package.json`: - + + ```diff title="./package.json" { -+ "packageManager": "npm@10.8.1" ++ "packageManager": "pnpm@9.2.0" } ``` - + ```diff title="./package.json" { @@ -84,11 +85,11 @@ Turborepo 2.0 requires that your Workspace define this field as a way to improve - + ```diff title="./package.json" { -+ "packageManager": "pnpm@9.2.0" ++ "packageManager": "npm@10.8.1" } ``` diff --git a/docs/site/content/repo-docs/getting-started/examples.mdx b/docs/site/content/repo-docs/getting-started/examples.mdx index 8016451289bba..76cd2a445e381 100644 --- a/docs/site/content/repo-docs/getting-started/examples.mdx +++ b/docs/site/content/repo-docs/getting-started/examples.mdx @@ -10,19 +10,20 @@ import { Callout } from '#/components/callout'; Use `create-turbo` to bootstrap an example with your favorite tooling. - + + ```bash title="Terminal" # Use an example listed below -npx create-turbo@latest --example [example-name] +pnpm dlx create-turbo@latest --example [example-name] # Use a GitHub repository from the community -npx create-turbo@latest --example [github-url] +pnpm dlx create-turbo@latest --example [github-url] ``` - + ```bash title="Terminal" # Use an example listed below @@ -34,17 +35,18 @@ yarn dlx create-turbo@latest --example [github-url] - + ```bash title="Terminal" # Use an example listed below -pnpm dlx create-turbo@latest --example [example-name] +npx create-turbo@latest --example [example-name] # Use a GitHub repository from the community -pnpm dlx create-turbo@latest --example [github-url] +npx create-turbo@latest --example [github-url] ``` + ## Core-maintained examples diff --git a/docs/site/content/repo-docs/getting-started/installation.mdx b/docs/site/content/repo-docs/getting-started/installation.mdx index 03901f10c5f74..f08b0c516f4a6 100644 --- a/docs/site/content/repo-docs/getting-started/installation.mdx +++ b/docs/site/content/repo-docs/getting-started/installation.mdx @@ -9,23 +9,24 @@ import { PackageManagerTabs, Tabs, Tab } from '#/components/tabs'; Get started with Turborepo in a few moments using: - + + ```bash title="Terminal" -npx create-turbo@latest +pnpm dlx create-turbo@latest ``` - + ```bash title="Terminal" yarn dlx create-turbo@latest ``` - + ```bash title="Terminal" -pnpm dlx create-turbo@latest +npx create-turbo@latest ``` @@ -47,26 +48,30 @@ For more details on the starter, [visit the README for the basic starter on GitH A global install of `turbo` brings flexibility and speed to your local workflows. - - + + + ```bash title="Terminal" - npm install turbo --global + pnpm install turbo --global ``` + ```bash title="Terminal" yarn global add turbo ``` - + + ```bash title="Terminal" - pnpm install turbo --global + npm install turbo --global ``` - + + Once installed globally, you can run your scripts through `turbo` from your terminal, quickly running one-off commands to use within your repository. For example: @@ -95,26 +100,30 @@ You can also take advantage of global `turbo` when creating your CI pipelines. V When collaborating with other developers in a repository, it's a good idea to pin versions of dependencies. You can do this with `turbo` by adding it as a `devDependency` in the root of your repository: - - - ```bash title="Terminal" - npm install turbo --save-dev - ``` + + + + ```bash title="Terminal" + pnpm add turbo --save-dev --ignore-workspace-root-check + ``` + ```bash title="Terminal" yarn add turbo --dev --ignore-workspace-root-check ``` - - ```bash title="Terminal" - pnpm add turbo --save-dev --ignore-workspace-root-check - ``` + + + ```bash title="Terminal" + npm install turbo --save-dev + ``` - + + You can continue to use your global installation of `turbo` to run commands. Global `turbo` will defer to the local version of your repository if it exists. diff --git a/docs/site/content/repo-docs/guides/ci-vendors/circleci.mdx b/docs/site/content/repo-docs/guides/ci-vendors/circleci.mdx index c6b2e94d57b8c..4af2603a0da74 100644 --- a/docs/site/content/repo-docs/guides/ci-vendors/circleci.mdx +++ b/docs/site/content/repo-docs/guides/ci-vendors/circleci.mdx @@ -50,7 +50,8 @@ And a `turbo.json`: Create a file called `.circleci/config.yml` in your repository with the following contents: - + + ```yaml title=".circleci/config.yml" version: 2.1 @@ -68,18 +69,21 @@ Create a file called `.circleci/config.yml` in your repository with the followin - checkout - node/install-packages - run: - command: npm run build + command: npm i -g pnpm environment: TURBO_UI: "false" - - run: - command: npm run test + command: pnpm build + environment: + TURBO_UI: "false" + - run: + command: pnpm test environment: TURBO_UI: "false" ``` - + ```yaml title=".circleci/config.yml" version: 2.1 @@ -108,7 +112,8 @@ Create a file called `.circleci/config.yml` in your repository with the followin ``` - + + ```yaml title=".circleci/config.yml" version: 2.1 @@ -126,15 +131,12 @@ Create a file called `.circleci/config.yml` in your repository with the followin - checkout - node/install-packages - run: - command: npm i -g pnpm - environment: - TURBO_UI: "false" - - run: - command: pnpm build + command: npm run build environment: TURBO_UI: "false" + - run: - command: pnpm test + command: npm run test environment: TURBO_UI: "false" ``` diff --git a/docs/site/content/repo-docs/guides/ci-vendors/github-actions.mdx b/docs/site/content/repo-docs/guides/ci-vendors/github-actions.mdx index be617b3bd8340..e5dd8afd49817 100644 --- a/docs/site/content/repo-docs/guides/ci-vendors/github-actions.mdx +++ b/docs/site/content/repo-docs/guides/ci-vendors/github-actions.mdx @@ -43,8 +43,7 @@ And a `turbo.json`: Create a file called `.github/workflows/ci.yml` in your repository with the following contents: - - + ```yaml title=".github/workflows/ci.yml" name: CI @@ -63,7 +62,6 @@ Create a file called `.github/workflows/ci.yml` in your repository with the foll # env: # TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }} # TURBO_TEAM: ${{ vars.TURBO_TEAM }} - # TURBO_REMOTE_ONLY: true steps: - name: Check out code @@ -71,24 +69,29 @@ Create a file called `.github/workflows/ci.yml` in your repository with the foll with: fetch-depth: 2 + - uses: pnpm/action-setup@v3 + with: + version: 8 + - name: Setup Node.js environment uses: actions/setup-node@v4 with: node-version: 20 - cache: 'npm' + cache: 'pnpm' - name: Install dependencies - run: npm install + run: pnpm install - name: Build - run: npm run build + run: pnpm build - name: Test - run: npm run test + run: pnpm test ``` - + + ```yaml title=".github/workflows/ci.yml" name: CI @@ -132,7 +135,8 @@ Create a file called `.github/workflows/ci.yml` in your repository with the foll ``` - + + ```yaml title=".github/workflows/ci.yml" name: CI @@ -151,6 +155,7 @@ Create a file called `.github/workflows/ci.yml` in your repository with the foll # env: # TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }} # TURBO_TEAM: ${{ vars.TURBO_TEAM }} + # TURBO_REMOTE_ONLY: true steps: - name: Check out code @@ -158,24 +163,20 @@ Create a file called `.github/workflows/ci.yml` in your repository with the foll with: fetch-depth: 2 - - uses: pnpm/action-setup@v3 - with: - version: 8 - - name: Setup Node.js environment uses: actions/setup-node@v4 with: node-version: 20 - cache: 'pnpm' + cache: 'npm' - name: Install dependencies - run: pnpm install + run: npm install - name: Build - run: pnpm build + run: npm run build - name: Test - run: pnpm test + run: npm run test ``` diff --git a/docs/site/content/repo-docs/guides/ci-vendors/gitlab-ci.mdx b/docs/site/content/repo-docs/guides/ci-vendors/gitlab-ci.mdx index ffde773c25f0e..a3543acf2b74f 100644 --- a/docs/site/content/repo-docs/guides/ci-vendors/gitlab-ci.mdx +++ b/docs/site/content/repo-docs/guides/ci-vendors/gitlab-ci.mdx @@ -42,7 +42,7 @@ And a `turbo.json`: Create a file called `.gitlab-ci.yml` in your repository with the following contents: - + ```yaml title=".gitlab-ci.yml" image: node:latest @@ -50,14 +50,25 @@ Create a file called `.gitlab-ci.yml` in your repository with the following cont - build build: stage: build + before_script: + - curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@6.32.2 + - pnpm config set store-dir .pnpm-store script: - - npm install - - npm run build - - npm run test + - pnpm install + - pnpm build + - pnpm test + cache: + key: + files: + - pnpm-lock.yaml + paths: + - .pnpm-store ``` + > For more information visit the pnpm documentation section on GitLab CI integration, view it [here](https://pnpm.io/continuous-integration#gitlab) - + + ```yaml title=".gitlab-ci.yml" image: node:latest @@ -76,7 +87,8 @@ Create a file called `.gitlab-ci.yml` in your repository with the following cont ``` - + + ```yaml title=".gitlab-ci.yml" image: node:latest @@ -84,22 +96,12 @@ Create a file called `.gitlab-ci.yml` in your repository with the following cont - build build: stage: build - before_script: - - curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@6.32.2 - - pnpm config set store-dir .pnpm-store script: - - pnpm install - - pnpm build - - pnpm test - cache: - key: - files: - - pnpm-lock.yaml - paths: - - .pnpm-store + - npm install + - npm run build + - npm run test ``` - > For more information visit the pnpm documentation section on GitLab CI integration, view it [here](https://pnpm.io/continuous-integration#gitlab) diff --git a/docs/site/content/repo-docs/guides/ci-vendors/travis-ci.mdx b/docs/site/content/repo-docs/guides/ci-vendors/travis-ci.mdx index b8cb089912b00..0162f5a36d819 100644 --- a/docs/site/content/repo-docs/guides/ci-vendors/travis-ci.mdx +++ b/docs/site/content/repo-docs/guides/ci-vendors/travis-ci.mdx @@ -42,38 +42,7 @@ And a `turbo.json`: Create a file called `.travis.yml` in your repository with the following contents: - - - ```yaml title=".travis.yml" - language: node_js - node_js: - - lts/* - install: - - npm install - script: - - npm run build - script: - - npm run test - ``` - - - - Travis CI detects the use of Yarn by the presence of `yarn.lock`. It will automatically ensure it is installed. - - ```yaml title=".travis.yml" - language: node_js - node_js: - - lts/* - install: - - yarn - script: - - yarn build - script: - - yarn test - ``` - - - + ```yaml title=".travis.yml" language: node_js @@ -96,6 +65,38 @@ Create a file called `.travis.yml` in your repository with the following content > For more information visit the pnpm documentation section on Travis CI integration, view it [here](https://pnpm.io/continuous-integration#travis) + + + Travis CI detects the use of Yarn by the presence of `yarn.lock`. It will automatically ensure it is installed. + + ```yaml title=".travis.yml" + language: node_js + node_js: + - lts/* + install: + - yarn + script: + - yarn build + script: + - yarn test + ``` + + + + + + ```yaml title=".travis.yml" + language: node_js + node_js: + - lts/* + install: + - npm install + script: + - npm run build + script: + - npm run test + ``` + diff --git a/docs/site/content/repo-docs/guides/frameworks/nextjs.mdx b/docs/site/content/repo-docs/guides/frameworks/nextjs.mdx index 0270880c2067f..68a342d63f5b6 100644 --- a/docs/site/content/repo-docs/guides/frameworks/nextjs.mdx +++ b/docs/site/content/repo-docs/guides/frameworks/nextjs.mdx @@ -13,15 +13,16 @@ import { Callout } from '#/components/callout'; To get started with Next.js in a Turborepo quickly, follow the [quickstart](/docs/getting-started/installation) to create a repository with two Next.js applications: - + + ```bash title="Terminal" -npx create-turbo@latest +pnpm dlx create-turbo@latest ``` - + ```bash title="Terminal" yarn dlx create-turbo@latest @@ -29,10 +30,10 @@ yarn dlx create-turbo@latest - + ```bash title="Terminal" -pnpm dlx create-turbo@latest +npx create-turbo@latest ``` @@ -43,15 +44,16 @@ pnpm dlx create-turbo@latest Use [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app) to set up a new Next.js application in a package. From the root of your repository, run: - + + ```bash title="Terminal" -npx create-next-app@latest apps/my-app +pnpm dlx create-next-app@latest apps/my-app ``` - + ```bash title="Terminal" yarn dlx create-next-app@latest apps/my-app @@ -59,10 +61,10 @@ yarn dlx create-next-app@latest apps/my-app - + ```bash title="Terminal" -pnpm dlx create-next-app@latest apps/my-app +npx create-next-app@latest apps/my-app ``` @@ -73,20 +75,21 @@ pnpm dlx create-next-app@latest apps/my-app To add [Internal Packages](/docs/core-concepts/internal-packages) to your new application, install them into the app with your package manager: - + + ```diff title="./apps/my-app/package.json" { - "name": "my-app", + "name": "my-app", "dependencies": { -+ "@repo/ui": "*" ++ "@repo/ui": "workspace:*" } } ``` - + ```diff title="./apps/my-app/package.json" { @@ -99,13 +102,13 @@ To add [Internal Packages](/docs/core-concepts/internal-packages) to your new ap - + ```diff title="./apps/my-app/package.json" { - "name": "my-app", + "name": "my-app", "dependencies": { -+ "@repo/ui": "workspace:*" ++ "@repo/ui": "*" } } ``` diff --git a/docs/site/content/repo-docs/guides/frameworks/nuxt.mdx b/docs/site/content/repo-docs/guides/frameworks/nuxt.mdx index f62c45c9e3ee6..f5111498ff49b 100644 --- a/docs/site/content/repo-docs/guides/frameworks/nuxt.mdx +++ b/docs/site/content/repo-docs/guides/frameworks/nuxt.mdx @@ -13,15 +13,16 @@ import { Callout } from '#/components/callout'; To get started with Nuxt in a Turborepo quickly, use [the `with-vue-nuxt` example](https://github.com/vercel/turborepo/tree/main/examples/with-vue-nuxt): - + + ```bash title="Terminal" -npx create-turbo@latest -e with-vue-nuxt +pnpm dlx create-turbo@latest -e with-vue-nuxt ``` - + ```bash title="Terminal" yarn dlx create-turbo@latest -e with-vue-nuxt @@ -29,10 +30,10 @@ yarn dlx create-turbo@latest -e with-vue-nuxt - + ```bash title="Terminal" -pnpm dlx create-turbo@latest -e with-vue-nuxt +npx create-turbo@latest -e with-vue-nuxt ``` @@ -43,15 +44,16 @@ pnpm dlx create-turbo@latest -e with-vue-nuxt Use [Nuxi](https://www.npmjs.com/package/nuxi), Nuxt's CLI, to set up a new Nuxt application in a package. From the root of your repository, run: - + + ```bash title="Terminal" -npx nuxi@latest init apps/my-app +pnpm dlx nuxi@latest init apps/my-app ``` - + ```bash title="Terminal" yarn dlx nuxi@latest init apps/my-app @@ -59,10 +61,10 @@ yarn dlx nuxi@latest init apps/my-app - + ```bash title="Terminal" -pnpm dlx nuxi@latest init apps/my-app +npx nuxi@latest init apps/my-app ``` @@ -73,20 +75,21 @@ pnpm dlx nuxi@latest init apps/my-app To add [Internal Packages](/docs/core-concepts/internal-packages) to your new application, install them into the app with your package manager: - + + ```diff title="./apps/my-app/package.json" { - "name": "my-app", + "name": "my-app", "dependencies": { -+ "@repo/ui": "*" ++ "@repo/ui": "workspace:*" } } ``` - + ```diff title="./apps/my-app/package.json" { @@ -99,13 +102,13 @@ To add [Internal Packages](/docs/core-concepts/internal-packages) to your new ap - + ```diff title="./apps/my-app/package.json" { - "name": "my-app", + "name": "my-app", "dependencies": { -+ "@repo/ui": "workspace:*" ++ "@repo/ui": "*" } } ``` diff --git a/docs/site/content/repo-docs/guides/frameworks/sveltekit.mdx b/docs/site/content/repo-docs/guides/frameworks/sveltekit.mdx index 079b6a9f50dcc..2369f2cb11080 100644 --- a/docs/site/content/repo-docs/guides/frameworks/sveltekit.mdx +++ b/docs/site/content/repo-docs/guides/frameworks/sveltekit.mdx @@ -13,15 +13,16 @@ import { Callout } from '#/components/callout'; To get started with SvelteKit in a Turborepo quickly, use [the `with-svelte` example](https://github.com/vercel/turborepo/tree/main/examples/with-svelte): - + + ```bash title="Terminal" -npx create-turbo@latest -e with-svelte +pnpm dlx create-turbo@latest -e with-svelte ``` - + ```bash title="Terminal" yarn dlx create-turbo@latest -e with-svelte @@ -29,10 +30,10 @@ yarn dlx create-turbo@latest -e with-svelte - + ```bash title="Terminal" -pnpm dlx create-turbo@latest -e with-svelte +npx create-turbo@latest -e with-svelte ``` @@ -43,15 +44,16 @@ pnpm dlx create-turbo@latest -e with-svelte Use [`npm create svelte`](https://kit.svelte.dev/docs/creating-a-project) to set up a new SvelteKit application in a package. From the root of your repository, run: - + + ```bash title="Terminal" -npm create svelte@latest apps/my-app +pnpm create svelte@latest apps/my-app ``` - + ```bash title="Terminal" yarn create svelte@latest apps/my-app @@ -59,10 +61,10 @@ yarn create svelte@latest apps/my-app - + ```bash title="Terminal" -pnpm create svelte@latest apps/my-app +npm create svelte@latest apps/my-app ``` @@ -73,20 +75,21 @@ pnpm create svelte@latest apps/my-app To add [Internal Packages](/docs/core-concepts/internal-packages) to your new application, install them into the app with your package manager: - + + ```diff title="./apps/my-app/package.json" { - "name": "my-app", + "name": "my-app", "dependencies": { -+ "@repo/ui": "*" ++ "@repo/ui": "workspace:*" } } ``` - + ```diff title="./apps/my-app/package.json" { @@ -99,13 +102,13 @@ To add [Internal Packages](/docs/core-concepts/internal-packages) to your new ap - + ```diff title="./apps/my-app/package.json" { - "name": "my-app", + "name": "my-app", "dependencies": { -+ "@repo/ui": "workspace:*" ++ "@repo/ui": "*" } } ``` diff --git a/docs/site/content/repo-docs/guides/frameworks/vite.mdx b/docs/site/content/repo-docs/guides/frameworks/vite.mdx index 423a363804fc7..a3cb7317f9023 100644 --- a/docs/site/content/repo-docs/guides/frameworks/vite.mdx +++ b/docs/site/content/repo-docs/guides/frameworks/vite.mdx @@ -13,15 +13,16 @@ import { Callout } from '#/components/callout'; To get started with Vite in a Turborepo quickly, use [the `with-vite` example](https://github.com/vercel/turborepo/tree/main/examples/with-vite): - + + ```bash title="Terminal" -npx create-turbo@latest -e with-vite +pnpm dlx create-turbo@latest -e with-vite ``` - + ```bash title="Terminal" yarn dlx create-turbo@latest -e with-vite @@ -29,10 +30,10 @@ yarn dlx create-turbo@latest -e with-vite - + ```bash title="Terminal" -pnpm dlx create-turbo@latest -e with-vite +npx create-turbo@latest -e with-vite ``` @@ -43,15 +44,16 @@ pnpm dlx create-turbo@latest -e with-vite Use [`npm create vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to set up a new Vite application in a package. From the root of your repository, run: - + + ```bash title="Terminal" -npm create vite@latest apps/my-app +pnpm create vite@latest apps/my-app ``` - + ```bash title="Terminal" yarn create vite@latest apps/my-app @@ -59,10 +61,10 @@ yarn create vite@latest apps/my-app - + ```bash title="Terminal" -pnpm create vite@latest apps/my-app +npm create vite@latest apps/my-app ``` @@ -73,20 +75,21 @@ pnpm create vite@latest apps/my-app To add [Internal Packages](/docs/core-concepts/internal-packages) to your new application, install them into the app with your package manager: - + + ```diff title="./apps/my-app/package.json" { - "name": "my-app", + "name": "my-app", "dependencies": { -+ "@repo/ui": "*" ++ "@repo/ui": "workspace:*" } } ``` - + ```diff title="./apps/my-app/package.json" { @@ -99,13 +102,13 @@ To add [Internal Packages](/docs/core-concepts/internal-packages) to your new ap - + ```diff title="./apps/my-app/package.json" { - "name": "my-app", + "name": "my-app", "dependencies": { -+ "@repo/ui": "workspace:*" ++ "@repo/ui": "*" } } ``` diff --git a/docs/site/content/repo-docs/guides/generating-code.mdx b/docs/site/content/repo-docs/guides/generating-code.mdx index 5f6d0ad404108..fb26a0a1d6e82 100644 --- a/docs/site/content/repo-docs/guides/generating-code.mdx +++ b/docs/site/content/repo-docs/guides/generating-code.mdx @@ -90,46 +90,47 @@ manually at `turbo/generators/config.ts` (or `config.js`) at the root of your re For example, the following illustrates a monorepo with three locations for generators: - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - + + + + + + + + + + - - - - - + + + + + - - - - - + + + + - + @@ -168,7 +169,7 @@ For example, the following illustrates a monorepo with three locations for gener - + @@ -202,7 +203,7 @@ For example, the following illustrates a monorepo with three locations for gener - + diff --git a/docs/site/content/repo-docs/guides/migrating-from-nx.mdx b/docs/site/content/repo-docs/guides/migrating-from-nx.mdx index e2cb008d1144c..11230816200bd 100644 --- a/docs/site/content/repo-docs/guides/migrating-from-nx.mdx +++ b/docs/site/content/repo-docs/guides/migrating-from-nx.mdx @@ -169,17 +169,16 @@ Turborepo is built on top of package manager workspaces, a JavaScript ecosystem - + -```json title="package.json" -{ - "workspaces": ["apps/*"] -} +```yml title="pnpm-workspace.yaml" +packages: + - apps/* ``` - + ```json title="package.json" { @@ -189,11 +188,12 @@ Turborepo is built on top of package manager workspaces, a JavaScript ecosystem - + -```yml title="pnpm-workspace.yaml" -packages: - - apps/* +```json title="package.json" +{ + "workspaces": ["apps/*"] +} ``` @@ -233,17 +233,17 @@ The root package.json needs to have the `packageManager` field. This ensures dev - + ```json title="./package.json" { - "packageManager": "npm@10.0.0" + "packageManager": "pnpm@9.0.0" } ``` - + ```json title="./package.json" { @@ -253,11 +253,11 @@ The root package.json needs to have the `packageManager` field. This ensures dev - + ```json title="./package.json" { - "packageManager": "pnpm@9.0.0" + "packageManager": "npm@10.0.0" } ``` @@ -271,15 +271,15 @@ Update your lockfile by running your installation command. - + ```bash title="Terminal" -npm install +pnpm install ``` - + ```bash title="Terminal" yarn install @@ -287,10 +287,10 @@ yarn install - + ```bash title="Terminal" -pnpm install +npm install ``` @@ -305,15 +305,15 @@ Add Turborepo to the root `package.json` of the workspace. - + ```bash title="Terminal" -npm install turbo --save-dev +pnpm install turbo --save-dev --workspace-root ``` - + ```bash title="Terminal" yarn add turbo --save-dev --ignore-workspace-root-check @@ -321,10 +321,10 @@ npm install turbo --save-dev - + ```bash title="Terminal" -pnpm install turbo --save-dev --workspace-root +npm install turbo --save-dev ``` @@ -335,15 +335,15 @@ You can also optionally install `turbo` globally for added convenience when work - + ```bash title="Terminal" -npm install turbo --global +pnpm install turbo --global ``` - + ```bash title="Terminal" yarn global add turbo @@ -351,10 +351,10 @@ yarn global add turbo - + ```bash title="Terminal" -pnpm install turbo --global +npm install turbo --global ``` @@ -386,15 +386,15 @@ Build the application with Turborepo. Using global `turbo`, this would be `turbo - + ```bash title="Terminal" -npx turbo run build +pnpm exec turbo build ``` - + ```bash title="Terminal" yarn dlx turbo build @@ -402,10 +402,10 @@ npx turbo run build - + ```bash title="Terminal" -pnpm exec turbo build +npx turbo run build ``` diff --git a/docs/site/content/repo-docs/guides/multi-language.mdx b/docs/site/content/repo-docs/guides/multi-language.mdx index 528a5e2afaf26..8d9b3fe88242f 100644 --- a/docs/site/content/repo-docs/guides/multi-language.mdx +++ b/docs/site/content/repo-docs/guides/multi-language.mdx @@ -11,7 +11,19 @@ Turborepo is built on the conventions of the JavaScript ecosystem to find script As an example, you may have a Rust project in the `./cli` directory in your repository. To add this directory as a package to your JavaScript package manager's workspace, add the directory to the workspace definition: - + + + ```json title="pnpm-workspace.yaml" + packages: + - "apps/*" + - "packages/*" + - "cli" // [!code highlight] + ``` + pnpm workspace documentation + + + + ```json title="./package.json" { "workspaces": [ @@ -22,9 +34,10 @@ As an example, you may have a Rust project in the `./cli` directory in your repo } ``` - npm workspace documentation - - + yarn workspace documentation + + + ```json title="./package.json" { "workspaces": [ @@ -35,17 +48,7 @@ As an example, you may have a Rust project in the `./cli` directory in your repo } ``` - yarn workspace documentation - - - ```json title="pnpm-workspace.yaml" - packages: - - "apps/*" - - "packages/*" - - "cli" // [!code highlight] - ``` - pnpm workspace documentation - + npm workspace documentation @@ -83,18 +86,19 @@ Because the directory is now a part of the package manager's workspace, you can For instance, if you wanted to make sure that the `rust-cli` "package" from above is built before your `web` application, install it into the dependencies for the `web` application: - + ```diff title="./web/package.json" { "devDependencies": { -+ "@repo/rust-cli": "*" ++ "@repo/rust-cli": "workspace:*" } } ``` - + + ```diff title="./web/package.json" { @@ -105,12 +109,13 @@ For instance, if you wanted to make sure that the `rust-cli` "package" from abov ``` - + + ```diff title="./web/package.json" { "devDependencies": { -+ "@repo/rust-cli": "workspace:*" ++ "@repo/rust-cli": "*" } } ``` diff --git a/docs/site/content/repo-docs/guides/single-package-workspaces.mdx b/docs/site/content/repo-docs/guides/single-package-workspaces.mdx index 2cbe7d9fe0307..2afa4f1e26c1c 100644 --- a/docs/site/content/repo-docs/guides/single-package-workspaces.mdx +++ b/docs/site/content/repo-docs/guides/single-package-workspaces.mdx @@ -20,24 +20,27 @@ Turborepo's most important features work in single-package workspaces including Install `turbo` into your application: - - ```bash title="Terminal" - npm install turbo --save-dev - ``` - - + ```bash title="Terminal" - yarn add turbo --dev + pnpm install turbo --save-dev ``` - + + ```bash title="Terminal" - pnpm install turbo --save-dev + yarn add turbo --dev ``` + + + ```bash title="Terminal" + npm install turbo --save-dev + ``` + + ### Running a `package.json` script using global `turbo` (optional) diff --git a/docs/site/content/repo-docs/guides/tools/eslint.mdx b/docs/site/content/repo-docs/guides/tools/eslint.mdx index 5cb35d77f1826..1d6c756549e1b 100644 --- a/docs/site/content/repo-docs/guides/tools/eslint.mdx +++ b/docs/site/content/repo-docs/guides/tools/eslint.mdx @@ -71,16 +71,18 @@ Notably, the `next.js` and `react-internal.js` configurations use the `base.js` In our `web` app, we first need to add `@repo/eslint-config` as a dependency. - + + ```jsonc title="./apps/web/package.json" { "devDependencies": { - "@repo/eslint-config": "*" + "@repo/eslint-config": "workspace:*" } } ``` - + + ```jsonc title="./apps/web/package.json" { "devDependencies": { @@ -89,11 +91,12 @@ In our `web` app, we first need to add `@repo/eslint-config` as a dependency. } ``` - + + ```jsonc title="./apps/web/package.json" { "devDependencies": { - "@repo/eslint-config": "workspace:*" + "@repo/eslint-config": "*" } } ``` @@ -203,16 +206,17 @@ Note that the ESLint dependencies are all listed here. This is useful, since it In our `web` app, we first need to add `@repo/eslint-config` as a dependency. - + + ```jsonc title="./apps/web/package.json" { "dependencies": { - "@repo/eslint-config": "*" + "@repo/eslint-config": "workspace:*" } } ``` - + ```jsonc title="./apps/web/package.json" { "dependencies": { @@ -221,11 +225,12 @@ In our `web` app, we first need to add `@repo/eslint-config` as a dependency. } ``` - + + ```jsonc title="./apps/web/package.json" { "dependencies": { - "@repo/eslint-config": "workspace:*" + "@repo/eslint-config": "*" } } ``` diff --git a/docs/site/content/repo-docs/guides/tools/jest.mdx b/docs/site/content/repo-docs/guides/tools/jest.mdx index 6f3a2bf0ecabc..dbc28f505800a 100644 --- a/docs/site/content/repo-docs/guides/tools/jest.mdx +++ b/docs/site/content/repo-docs/guides/tools/jest.mdx @@ -32,15 +32,16 @@ Let's say we have a monorepo that looks like this: Install `jest` into the packages where you plan on having test suites. For this example, we will have tests in `web` and `@repo/ui`: - + + ```bash title="Terminal" -npm install jest --workspace=web --workspace=@repo/ui --save-dev +pnpm install jest --save-dev --filter=@repo/ui --filter=web ``` - + ```bash title="Terminal" yarn workspace web add jest --dev @@ -49,10 +50,10 @@ yarn workspace @repo/ui add jest --dev - + ```bash title="Terminal" -pnpm install jest --save-dev --filter=@repo/ui --filter=web +npm install jest --workspace=web --workspace=@repo/ui --save-dev ``` diff --git a/docs/site/content/repo-docs/guides/tools/playwright.mdx b/docs/site/content/repo-docs/guides/tools/playwright.mdx index 097452e2e63e1..6ab0fd95c711b 100644 --- a/docs/site/content/repo-docs/guides/tools/playwright.mdx +++ b/docs/site/content/repo-docs/guides/tools/playwright.mdx @@ -99,19 +99,18 @@ You can also create a common package for shared utilities that you need in your - + ```json title="./packages/playwright-utilities/package.json" { - "name": "@repo/playwright-utilities", - "peerDependencies": { - "playwright": "*" + "name": "@repo/playwright-utilities", + "peerDependencies": { + "playwright": "workspace:*" } } ``` - - + ```json title="./packages/playwright-utilities/package.json" { "name": "@repo/playwright-utilities", @@ -122,15 +121,16 @@ You can also create a common package for shared utilities that you need in your ``` - + ```json title="./packages/playwright-utilities/package.json" { - "name": "@repo/playwright-utilities", - "peerDependencies": { - "playwright": "workspace:*" + "name": "@repo/playwright-utilities", + "peerDependencies": { + "playwright": "*" } } ``` + diff --git a/docs/site/content/repo-docs/guides/tools/shadcn-ui.mdx b/docs/site/content/repo-docs/guides/tools/shadcn-ui.mdx index f1c042f8341ec..c560b1764a456 100644 --- a/docs/site/content/repo-docs/guides/tools/shadcn-ui.mdx +++ b/docs/site/content/repo-docs/guides/tools/shadcn-ui.mdx @@ -10,15 +10,16 @@ import { PackageManagerTabs, Tab } from '#/components/tabs'; To get started with shadcn/ui in a new monorepo, run: - + + ```bash title="Terminal" -npx shadcn@canary init +pnpm dlx shadcn@canary init ``` - + ```bash title="Terminal" npx shadcn@canary init @@ -26,10 +27,10 @@ npx shadcn@canary init - + ```bash title="Terminal" -pnpm dlx shadcn@canary init +npx shadcn@canary init ``` @@ -40,15 +41,16 @@ When prompted, select the option for monorepos. To add a component, run: - + + ```bash title="Terminal" -npx shadcn@canary add [COMPONENT] +pnpm dlx shadcn@canary add [COMPONENT] ``` - + ```bash title="Terminal" npx shadcn@canary add [COMPONENT] @@ -56,10 +58,10 @@ npx shadcn@canary add [COMPONENT] - + ```bash title="Terminal" -pnpm dlx shadcn@canary add [COMPONENT] +npx shadcn@canary add [COMPONENT] ``` diff --git a/docs/site/content/repo-docs/guides/tools/storybook.mdx b/docs/site/content/repo-docs/guides/tools/storybook.mdx index 760834dbba8c2..9756686d15ceb 100644 --- a/docs/site/content/repo-docs/guides/tools/storybook.mdx +++ b/docs/site/content/repo-docs/guides/tools/storybook.mdx @@ -14,15 +14,16 @@ import { Steps, Step } from '#/components/steps'; If you'd rather use a template, this guide is walking through how to build [this Storybook/Turborepo template](https://vercel.com/templates/react/turborepo-design-system) on Vercel. - + + ```bash title="Terminal" -npx create-turbo@latest -e design-system +pnpm dlx create-turbo@latest -e design-system ``` - + ```bash title="Terminal" yarn dlx create-turbo@latest -e design-system @@ -30,10 +31,10 @@ yarn dlx create-turbo@latest -e design-system - + ```bash title="Terminal" -pnpm dlx create-turbo@latest -e design-system +npx create-turbo@latest -e design-system ``` @@ -49,15 +50,16 @@ pnpm dlx create-turbo@latest -e design-system If you don't have an existing project, use [create-turbo](/docs/getting-started/installation) to create a new monorepo: - + + ```bash title="Terminal" -npx create-turbo@latest +pnpm dlx create-turbo@latest ``` - + ```bash title="Terminal" yarn dlx create-turbo@latest @@ -65,10 +67,10 @@ yarn dlx create-turbo@latest - + ```bash title="Terminal" -pnpm dlx create-turbo@latest +npx create-turbo@latest ``` @@ -94,24 +96,26 @@ cd apps/storybook In the `apps/storybook` directory, initialize a new Storybook application: - + + ```bash title="Terminal" -npm create storybook@latest +pnpm create storybook@latest ``` - + ```bash title="Terminal" yarn create storybook@latest ``` - + + ```bash title="Terminal" -pnpm create storybook@latest +npm create storybook@latest ``` @@ -132,15 +136,16 @@ Follow the prompts to create an application. For the rest of this guide, we'll a Now, install your UI package into Storybook. - + + ```bash title="Terminal" -npm install @repo/ui --workspace=storybook +pnpm install @repo/ui --filter=storybook ``` - + ```bash title="Terminal" yarn workspace storybook add @repo/ui @@ -148,10 +153,10 @@ yarn workspace storybook add @repo/ui - + ```bash title="Terminal" -pnpm install @repo/ui --filter=storybook +npm install @repo/ui --workspace=storybook ``` @@ -289,15 +294,16 @@ Update components imports so that they reference the now co-located modules. For You'll also need to install any Storybook packages required for writing stories. For example, moving the story from above would require that you install `@storybook/react` into your `@repo/ui` package. - + + ```bash title="Terminal" -npm install @storybook/react --workspace=@repo/ui --save-dev +pnpm install @storybook/react --filter=@repo/ui --save-dev ``` - + ```bash title="Terminal" yarn workspace @repo/ui add @storybook/react --dev @@ -305,10 +311,10 @@ yarn workspace @repo/ui add @storybook/react --dev - + ```bash title="Terminal" -pnpm install @storybook/react --filter=@repo/ui --save-dev +npm install @storybook/react --workspace=@repo/ui --save-dev ``` diff --git a/docs/site/content/repo-docs/guides/tools/typescript.mdx b/docs/site/content/repo-docs/guides/tools/typescript.mdx index 813a91d9dde08..1883b03296666 100644 --- a/docs/site/content/repo-docs/guides/tools/typescript.mdx +++ b/docs/site/content/repo-docs/guides/tools/typescript.mdx @@ -29,15 +29,16 @@ TypeScript's `tsconfig.json` sets the configuration for the TypeScript compiler This guide will use [`create-turbo`](/docs/reference/create-turbo) as an example. - + + ```bash title="Terminal" -npx create-turbo@latest +pnpm dlx create-turbo@latest ``` - + ```bash title="Terminal" yarn dlx create-turbo@latest @@ -45,10 +46,10 @@ yarn dlx create-turbo@latest - + ```bash title="Terminal" -pnpm dlx create-turbo@latest +npx create-turbo@latest ``` @@ -98,17 +99,19 @@ Inside `package.json`, name the package so it can be referenced in the rest of t First, install the `@repo/typescript-config` package into your package: - + + ```json title="./apps/web/package.json" { "devDependencies": { - "@repo/typescript-config": "*", + "@repo/typescript-config": "workspace:*", "typescript": "latest", } } ``` - + + ```json title="./apps/web/package.json" { "devDependencies": { @@ -118,11 +121,12 @@ First, install the `@repo/typescript-config` package into your package: } ``` - + + ```json title="./apps/web/package.json" { "devDependencies": { - "@repo/typescript-config": "workspace:*", + "@repo/typescript-config": "*", "typescript": "latest", } } diff --git a/docs/site/content/repo-docs/reference/create-turbo.mdx b/docs/site/content/repo-docs/reference/create-turbo.mdx index 9b39b9273cb0b..6645e784df9a7 100644 --- a/docs/site/content/repo-docs/reference/create-turbo.mdx +++ b/docs/site/content/repo-docs/reference/create-turbo.mdx @@ -9,20 +9,26 @@ import { ExamplesTable } from '#/components/examples-table'; The easiest way to get started with Turborepo is by using `create-turbo`. Use this CLI tool to quickly start building a new monorepo, with everything set up for you. - + + ```bash title="Terminal" -npx create-turbo@latest +pnpm dlx create-turbo@latest ``` + - + + ```bash title="Terminal" yarn dlx create-turbo@latest ``` + - + + ```bash title="Terminal" -pnpm dlx create-turbo@latest +npx create-turbo@latest ``` + @@ -32,23 +38,24 @@ pnpm dlx create-turbo@latest The community curates a set of examples to showcase ways to use common tools and libraries with Turborepo. To bootstrap your monorepo with one of the examples, use the `--example` flag: - + + ```bash title="Terminal" -npx create-turbo@latest --example [example-name] +pnpm dlx create-turbo@latest --example [example-name] ``` - + ```bash title="Terminal" yarn dlx create-turbo@latest --example [example-name] ``` - + ```bash title="Terminal" -pnpm dlx create-turbo@latest --example [example-name] +npx create-turbo@latest --example [example-name] ``` @@ -74,23 +81,24 @@ The community curates a set of examples to showcase ways to use common tools and You can also use a custom starter or example by using a GitHub URL. This is useful for using your own custom starters or examples from the community. - + + ```bash title="Terminal" -npx create-turbo@latest --example [github-url] +pnpm dlx create-turbo@latest --example [github-url] ``` - + ```bash title="Terminal" yarn dlx create-turbo@latest --example [github-url] ``` - + ```bash title="Terminal" -pnpm dlx create-turbo@latest --example [github-url] +npx create-turbo@latest --example [github-url] ``` diff --git a/docs/site/content/repo-docs/reference/eslint-config-turbo.mdx b/docs/site/content/repo-docs/reference/eslint-config-turbo.mdx index 7c346025ef9f9..0dcd2a1241383 100644 --- a/docs/site/content/repo-docs/reference/eslint-config-turbo.mdx +++ b/docs/site/content/repo-docs/reference/eslint-config-turbo.mdx @@ -12,24 +12,27 @@ import { PackageManagerTabs, Tab } from '#/components/tabs'; Install `eslint-config-turbo` into the location where your ESLint configuration is held: - + + ```bash title="Terminal" - npm i --save-dev eslint-config-turbo -w @acme/eslint-config + pnpm add eslint-config-turbo --filter=@repo/eslint-config ``` - + + ```bash title="Terminal" yarn workspace @acme/eslint-config add eslint-config-turbo --dev ``` - + + ```bash title="Terminal" - pnpm add eslint-config-turbo --filter=@repo/eslint-config + npm i --save-dev eslint-config-turbo -w @acme/eslint-config ``` diff --git a/docs/site/content/repo-docs/reference/eslint-plugin-turbo.mdx b/docs/site/content/repo-docs/reference/eslint-plugin-turbo.mdx index 2aecafc7a2868..6c125ed46909c 100644 --- a/docs/site/content/repo-docs/reference/eslint-plugin-turbo.mdx +++ b/docs/site/content/repo-docs/reference/eslint-plugin-turbo.mdx @@ -12,24 +12,27 @@ import { PackageManagerTabs, Tab } from '#/components/tabs'; Install `eslint-config-turbo` into the location where your ESLint configuration is held: - + + ```bash title="Terminal" - npm i --save-dev eslint-config-turbo -w @acme/eslint-config + pnpm add eslint-config-turbo --filter=@repo/eslint-config ``` - + + ```bash title="Terminal" yarn workspace @acme/eslint-config add eslint-config-turbo --dev ``` - + + ```bash title="Terminal" - pnpm add eslint-config-turbo --filter=@repo/eslint-config + npm i --save-dev eslint-config-turbo -w @acme/eslint-config ```