Skip to content

Commit

Permalink
chore(cleanup): Adjustments to README.
Browse files Browse the repository at this point in the history
  • Loading branch information
himerus committed Apr 5, 2024
1 parent 8fcbced commit 94121e6
Showing 1 changed file with 37 additions and 0 deletions.
37 changes: 37 additions & 0 deletions packages/storybook/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,43 @@ yarn install
yarn dev
```

## Development Environment(s)

When we use the `yarn dev` command in the Storybook starter-kit, we have two servers running in parallel. Two development environments, one for Storybook, and one for Vite are running. The following are the links available out of the box. As seen in the following code from `package.json`, we can see where we would customize the ports used at a per-project level, and how we would alter the links below.

- **Local Vite Environment:** [localhost:6001](http://localhost:6001/)
- **Local Storybook Environment:** [localhost:6002](http://localhost:6002/)

```json
{
"scripts": {
"dev": "yarn watch",
"watch": "npm-run-all -n -p 'watch:**'",
"watch:vite": "yarn vite dev --port 6001",
"watch:storybook": "yarn storybook dev -p 6002"
}
}
```

### Storybook Development Mode

Storybook serves as a dynamic platform for showcasing your components. By running the Storybook server, you can create `*.stories.ts` files or `*.md[x]` documentation that are directly tied to your components. This setup leverages Hot Module Replacement (HMR), ensuring that any modifications you make to your component files are instantly reflected in the Storybook UI. This real-time feedback loop is invaluable for developing and fine-tuning your components' visual and functional aspects in isolation.

### Vite Development Mode

Vite Development Mode provides a convenient way to test your components in a
simplified environment. At the root of Vite projects, there is an `index.html`
file that acts as the entry point for the application. This file is served by
the Vite dev server and can be used to manually test components.

Incorporating your web components into the `index.html` file allows you to
observe their behavior in a live setting. This is especially advantageous for
conducting swift experiments or demonstrations, as it bypasses the need for
an intricate setup. Additionally, Vite's development server employs Hot Module
Replacement (HMR), which means any changes you make to your components are
immediately updated in the browser without requiring a full page reload. This
feature streamlines the development process by providing instant feedback.

## Scripts

### `yarn start`
Expand Down

0 comments on commit 94121e6

Please sign in to comment.