Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Quickstart

To get started with Vite in a Turborepo quickly, use the with-vite example:

Terminal

pnpm dlx create-turbo@latest -e with-vite

Terminal

yarn dlx create-turbo@latest -e with-vite

Terminal

npx create-turbo@latest -e with-vite

Terminal

bunx create-turbo@latest -e with-vite

Adding a Vite application to an existing repository

Use npm create vite to set up a new Vite application in a package. From the root of your repository, run:

Terminal

pnpm create vite@latest apps/my-app

Terminal

yarn create vite@latest apps/my-app

Terminal

npm create vite@latest apps/my-app

Terminal

bun create vite@latest apps/my-app

Integrating with your repository

To add Internal Packages to your new application, install them into the app with your package manager:

./apps/my-app/package.json

{
  "name": "my-app",
  "dependencies": {
+   "@repo/ui": "workspace:*"
  }
}

./apps/my-app/package.json

{
  "name": "my-app",
  "dependencies": {
+   "@repo/ui": "*"
  }
}

./apps/my-app/package.json

{
 "name": "my-app",
  "dependencies": {
+   "@repo/ui": "*"
  }
}

./apps/my-app/package.json

{
 "name": "my-app",
  "dependencies": {
+   "@repo/ui": "workspace:*"
  }
}

Make sure to run your package manager's install command. You also may need to update scripts in package.json to fit your use case in your repository.

Customizing tasks

By default, the new application will use the tasks defined in the root turbo.json. If you'd like to configure tasks differently for the new application, use Package Configurations.

Microfrontends

When using Vite with Turborepo's microfrontends, make sure to set the base property for child applications. This ensures the assets like images and CSS will be routed to the correct application.

./apps/my-app/vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  base: "/admin",
});

For runtime composition with Vite, use the with-vite-module-federation example. Module Federation works with many frameworks and libraries, including React, Vue, Svelte, Solid, Preact, and many others. See the Module Federation Vite working implementations for more examples.

Terminal

pnpm dlx create-turbo@latest -e with-vite-module-federation

Terminal

yarn dlx create-turbo@latest -e with-vite-module-federation

Terminal

npx create-turbo@latest -e with-vite-module-federation

Terminal

bunx create-turbo@latest -e with-vite-module-federation

The example includes a react-host Vite app, a react-remote Vite app, and an @mf-vite-example/shared-ui package. The host consumes the remote's exposed ./remote-app module and both apps share React dependencies through Module Federation.

During development, run turbo dev from the example root. The host runs on localhost:4173 and the remote runs on localhost:4174.

./turbo.json

{
  "tasks": {
    "dev": {
      "cache": false,
      "persistent": true,
      "dependsOn": ["^build"]
    },
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", "*.tsbuildinfo"]
    }
  }
}

Keep dev uncached and persistent for Vite servers. Use dependsOn: ["^build"] so shared packages are built before the host and remote start.