> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Run Locally

## Knapsack CLI

* Knapsack uses a tool called the **Knapsack CLI** (Command Line Interface). It gets installed from the `@knapsack/app` package and should be located in the `./node_modules/.bin/knapsack` folder.
* You'll run Knapsack commands via **NPM Scripts** (from your package.json file).

### Available Commands

Here's a list of the most important Knapsack commands you'll use. They all start with knapsack (e.g., knapsack start):

| Command  | Description                                                                                                                                                                                                                    |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ` start` | Starts Knapsack for local development. You'll see a link like `http://localhost:3999` in your terminal. Open that link in your browser to view your design system. Changes to components will automatically trigger a rebuild. |
| ` build` | Builds all your assets, like design tokens. It's usually run in a CI/CD environment (automated testing and building), but you can run it locally, too.                                                                         |
| ` serve` | Serves a URL for when Knapsack is deployed. You need to run knapsack build first before using serve.                                                                                                                           |
| ` test`  | Runs all configured renderers to ensure patterns build correctly, catching syntax errors and rendering issues, and is ideal for CI/CD integration.                                                                             |

### Example: Package.json with Knapsack Commands

Here's an example of how your package.json might look after adding Knapsack commands. These commands make it easy to run Knapsack from your terminal:

```json
{
  "scripts": {
    "ks:build": "knapsack --config ./knapsack/knapsack.config.js build",
    "ks:start": "knapsack --config ./knapsack/knapsack.config.js start",
    "ks:serve": "NODE_ENV=production knapsack --config ./knapsack/knapsack.config.js serve",
    "ks:test": "knapsack --config ./knapsack/knapsack.config.js test"
  }
}
```

You can run these commands like this:

```
npm run ks:start
```

***

## Enabling HTTPS Mode for Local Development

You can enable HTTPS (secure connection) when running Knapsack locally, which is useful when developing with services that require HTTPS.

Knapsack lets you use either **automatic SSL certificates** (recommended) or your own **custom SSL certificate**.

### Option 1: Using Automatic SSL Certificate (Recommended)

To enable HTTPS automatically, add this to your knapsack.config.js file:

```js
devServer: {
  https: true,
}
```

### **Option 2: Using a Custom SSL Certificate**

If you have your own SSL certificate, you can configure Knapsack to use it. Add this to your `knapsack.config.js` file:

```js
devServer: {
  https: true,
  ssl: {
    cert: './path-to-ssl-cert',
    key: './path-to-ssl-key'
  }
}
```

**Note**: When you run the start command for the first time after setting up HTTPS, you might be asked for your password. This allows **mkcert** to create and register your SSL certificate securely.