Run Locally

Detailed instructions on how to run Knapsack locally for development, testing, and deployment purposes.
View as Markdown

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):

CommandDescription
startStarts 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.
buildBuilds 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.
serveServes a URL for when Knapsack is deployed. You need to run knapsack build first before using serve.
testRuns 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:

1{
2 "scripts": {
3 "ks:build": "knapsack --config ./knapsack/knapsack.config.js build",
4 "ks:start": "knapsack --config ./knapsack/knapsack.config.js start",
5 "ks:serve": "NODE_ENV=production knapsack --config ./knapsack/knapsack.config.js serve",
6 "ks:test": "knapsack --config ./knapsack/knapsack.config.js test"
7 }
8}

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.

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

1devServer: {
2 https: true,
3}

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:

1devServer: {
2 https: true,
3 ssl: {
4 cert: './path-to-ssl-cert',
5 key: './path-to-ssl-key'
6 }
7}

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.