> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt
> Use this file to discover all available pages before exploring further.

# start (dev server)

> Build your components on save, serve them on port 4000, and feed them to Ollie Studio for a live preview in the real checkout

`ollieshop start` is the local half of [Ollie Studio](/ollie-shop/studio.md). It builds every component of the project, serves the bundles with hot reload, and opens Studio, which pushes them into a preview of your real checkout.

```bash theme={"system"}
npm start                 # in a scaffolded project
ollieshop start           # with a global install
ollieshop start --no-open --browser-logs
```

Needs an `ollie.json` with a `storeId` (see [Project configuration](/ollie-shop/cli/project-config.md)). Does not need a login.

| Flag | Meaning |
| - | - |
| `--stage <name>`, `-s <name>` | Start on a stage other than `prod`. Also read from `OLLIE_STAGE`. Write it as two tokens: `--stage dev` |
| `--no-open` | Do not open Studio in the browser. Also implied when the `CI` variable is set |
| `--browser-logs` | Stream the `console` output of your components, as they run inside the checkout preview, to the terminal |

## What you see

```text theme={"system"}
Ollie Shop dev server

Server running at http://localhost:4000 [stage: prod]
Studio: https://admin.ollie.shop/studio?storeId=7f3c9a1e-…

Components: http://localhost:4000/<name>/index.js

  ● HelloWorld            cart_header_full_page    studio-HelloWorld (unlinked)

Press q to quit | r to rebuild | o to open Studio
```

Each component row shows its name, slot and id. `studio-*` ids mark unlinked components (not yet in your store). Below the list the server logs the last requests and, with `--browser-logs`, the console lines your components print in the preview. Keys: `q` quits, `r` forces a rebuild, `o` opens Studio.

## How it works

* The server listens on **port 4000**. The port is fixed because Studio looks for it there. It also uses port 4001 internally, which is the default port of [`function dev`](/ollie-shop/cli/function-dev); run that one on another port when both are up.
* Components are discovered from the `ollie.json` components map, then from folders under `components/`. Each `index.tsx` is bundled to `node_modules/.ollie/build/<name>/index.js` (plus a `.css` when the component imports styles). `react`, `react-dom`, `next`, `next-intl` and `@ollie-shop/sdk` are left external: the checkout provides them.
* `components/` and the `ollie*.json` files are watched. Saving a file rebuilds and notifies Studio, which reloads the component in the preview.
* `http://localhost:4000/manifest.json` lists the components with their ids, slots and build errors. Studio reads it; you can open it to see what the server found.
* When Studio publishes an unlinked component, it asks the dev server to record the new UUID in `ollie.json`, so the folder is linked from then on.

## Startup messages

| Message | Cause |
| - | - |
| `No ollie.json found or storeId is missing. Run this command in a project directory.` | Not in a project, or `ollie.json` has no `storeId`. Run [`init`](/ollie-shop/cli/project-config#init) |
| `No components found. Create components in ./components/<name>/index.tsx` | Nothing to build |
| `<name>: no slot defined - component will be built but not placed in checkout` | Add a `slot` to the component's `ollie.json` entry or set it in Studio |
| `Local server not connected` (in Studio) | Studio cannot reach port 4000. Check the server is running and allow local network access if the browser asks |

## Related

* [Ollie Studio](/ollie-shop/studio.md): what happens on the other side of port 4000
* [Project configuration](/ollie-shop/cli/project-config.md): the components map and stages
* [deploy](/ollie-shop/cli/deploy.md): shipping a component from the terminal instead of Studio


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.