Installation

Both packages are currently consumed from source, through a bundler and TypeScript alias, rather than installed from the npm registry. create-cskn-app sets this up for you. The steps below are for adding them to a project by hand.

Peer dependencies

The host app provides these. Install them in your app:

pnpm add react react-dom @tanstack/react-query axios zustand

Package	Version
`react`, `react-dom`	19
`@tanstack/react-query`	5
`axios`	1
`zustand`	5

Vite alias

Point both package names at their src folders, and dedupe the shared libraries so the app and the packages use one copy of each:

vite.config.ts

import path from 'node:path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  base: '/my-app/', // your app slug
  plugins: [react()],
  resolve: {
    alias: {
      '@cskn/sdk': path.resolve(__dirname, '../../sdk/src'),
      '@cskn/ui': path.resolve(__dirname, '../../ui/src'),
    },
    dedupe: ['react', 'react-dom', 'zustand', '@tanstack/react-query'],
  },
});

Leaving out dedupe gives you two copies of React or TanStack Query. The usual symptom is an “invalid hook call” error, or queries that never share a cache.

TypeScript paths

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@cskn/sdk": ["../../sdk/src/index.ts"],
      "@cskn/sdk/*": ["../../sdk/src/*"],
      "@cskn/ui": ["../../ui/src/index.ts"],
      "@cskn/ui/*": ["../../ui/src/*"]
    }
  }
}

Asset base vs. router base

base: '/<slug>/' in Vite is where your assets are served from, and it is correct on every host. Where your router is mounted is not something the build can know: the same bundle is served at the root of <slug>.cskn.app and under /<slug> on a creator’s page. Pass appBasename() to your router instead of hard-coding it:

import { BrowserRouter } from 'react-router-dom';
import { appBasename } from '@cskn/sdk';

<BrowserRouter basename={appBasename()}>{/* routes */}</BrowserRouter>

See URLs and routing for the details.

Get started

Concepts

Peer dependencies

Vite alias

TypeScript paths

Asset base vs. router base

​Peer dependencies

​Vite alias

​TypeScript paths

​Asset base vs. router base

Peer dependencies

Vite alias

TypeScript paths

Asset base vs. router base