---
url: /cli/create.md
description: >-
  Bootstrapping a KosmoJS project with npm create kosmo - the interactive flow,
  the flags, and what the new project contains.
---

A KosmoJS project starts with the `create kosmo` command:

### npm

```sh
npm create kosmo
```

### pnpm

```sh
pnpm create kosmo
```

### yarn

```sh
yarn create kosmo
```

Use `.` to bootstrap in the current directory:

```sh
npm create kosmo .
```

You'll be asked for:

* **Name** - the project name (unless `.` used to bootstrap in current directory)
* **Frontend** - React, Vue, Solid, Svelte, MDX, or *None (API-only folder)*
* **Backend** - Hono, H3, Koa, or *None (client-only folder)*

The first source folder is always **`app`**, with its pages at `/` and its API at `/api`.
Add differently-shaped folders at any time with [kosmo folder](/cli/folder.md).

If the target directory has anything in it other than `.git*`, `README*` or `LICENSE*`,
you are asked first what to do with it:

* Remove the existing files
* Keep them and overwrite as needed
* Cancel

## CLI mode

Provide up front the `--name` and `--frontend`/`--backend` (or `--no-frontend`/`--no-backend` counterparts)
and no prompts appear:

### create kosmo | CLI mode | npm

```sh
# npm needs an extra -- to pass flags through
npm create kosmo -- --name demo --frontend solid --backend hono
```

### create kosmo | CLI mode | pnpm

```sh
pnpm create kosmo --name demo --frontend solid --backend hono
```

### create kosmo | CLI mode | yarn

```sh
yarn create kosmo --name demo --frontend solid --backend hono
```

| Flag | Meaning |
|---|---|
| `--name <name>` | Project name. Ignored when using `.` to bootstrap in current directory |
| `--frontend <stack>` | `react`, `solid`, `vue`, `svelte`, `mdx`. |
| `--no-frontend` | API-only folder - no `pages/`, no client entries. |
| `--backend <stack>` | `hono`, `h3`, `koa`. |
| `--no-backend` | Client-only folder - no `api/` directory. |
| `--overwrite` | Proceed even though the target directory is not empty. |
| `-h, --help` | Print usage and exit. |

:::info The frontend and backend choices are never implied
Either `--frontend <stack>` **or** `--no-frontend` is required -
omitting both is an error, and passing them both is an error too (same for backend).
:::

## What you get

```txt
demo/
├── .gitignore
├── package.json
├── tsconfig.json
├── lib/                       # generated support code, reached through `_/`
└── src/app/
    ├── kosmo.config.ts        # the frontend / backend blocks your answers imply
    ├── tsconfig.json
    ├── index.html
    ├── app.tsx                # root component, extension per framework
    ├── router.ts
    ├── components/Link.tsx    # the typed Link
    ├── pages/404.tsx          # the 404 page
    ├── entry/client.ts        # the client entry
    ├── entry/server.ts        # the server entry, used by SSR builds
    ├── public/favicon.svg
    └── api/                   # if a backend was chosen
        ├── app.ts             # app middleware, the native instance
        ├── use.ts             # global middleware
        ├── errors.ts          # the default error handler
        ├── dev.ts             # dev-only hooks
        ├── server.ts
        └── env.d.ts           # global context types
```

Every one of those files comes filled in. What the scaffold does not write is routes -
`api/` has no endpoints and `pages/` no index page yet.

***

### After bootstrap

`cd` into freshly created project (unless the project was bootstrapped in the current folder):

```sh
cd ./demo
```

### Install Dependencies

#### create kosmo | Install Dependencies | npm

```sh
npm install
```

#### create kosmo | Install Dependencies | pnpm

```sh
pnpm install
```

#### create kosmo | Install Dependencies | yarn

```sh
yarn install
```

### Start the dev server

The dev server watches your routes and recomputes as you work -
and seeds starter code into any route or page file you create empty:

#### create kosmo | Start the dev server | npm

```sh
npm run dev
```

#### create kosmo | Start the dev server | pnpm

```sh
pnpm dev
```

#### create kosmo | Start the dev server | yarn

```sh
yarn dev
```

Your app is now running at `http://localhost:4556`.