Vite

This is a guide for setting up React Cosmos in a Vite project.

Getting Started

Do you already have Vite installed?

If you're starting from scratch, follow this guide (opens in a new tab) to get started with Vite with React. At a minimum you'll need the index.html and main.jsx root files and @vitejs/plugin-react installed.

Install the required packages:

npm i -D react-cosmos react-cosmos-plugin-vite

Create cosmos.config.json and enable the Vite plugin:

cosmos.config.json

{
  "plugins": ["react-cosmos-plugin-vite"]
}

Add cosmos and cosmos-export scripts to package.json:

package.json

"scripts": {
  "cosmos": "cosmos",
  "cosmos-export": "cosmos-export",
}

Create a basic fixture at src/Hello.fixture.jsx:

src/Hello.fixture.jsx

export default <h1>Hello World!</h1>;

Start React Cosmos:

npm run cosmos

🚀 Open localhost:5000 (opens in a new tab) in your browser.

The Hello fixture will show up in your Cosmos UI and will render when you select it.

Congratulations 😎

You've taken the first step towards designing reusable components. You're ready to prototype, test and interate on components in isolation.

Vite Config

Cosmos generates a default Vite config if a custom one isn't provided.

Custom Vite Config

Cosmos picks up vite.config.js from the project root automatically. Use the vite.configPath setting to provide an existing Vite config at a different path:

cosmos.config.json

{
  "vite": {
    "configPath": "./tools/vite.config.js"
  }
}

Configuration

Vite-related settings you can optionally customize in your Cosmos config:

Option	Description	Default
`vite.configPath`	Path to Vite config. Set to false to disable reading it from the default path.	`"vite.config.js"` or `"vite.config.ts"`
`vite.indexPath`	Path to index module (eg. `"src/my-index.tsx"`).	Detects common index/main module paths.
`vite.port`	Vite renderer port.	`5050`

Getting Started Webpack