Setup: Vite

Product apps are built with Vite as client-rendered single-page apps (D-05). This guide goes from an empty folder to a working screen. The reason for each step is on the React app page.

1. App folder

The app lives in this repository’s workspace, under apps/; pnpm-workspace.yaml already covers that folder.

apps/example-app/
  index.html
  package.json
  tsconfig.json
  vite.config.ts
  src/
    app.css
    App.tsx
    main.tsx

2. package.json

apps/example-app/package.json

{
  "name": "@bigbang/example-app",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite --host 127.0.0.1",
    "build": "tsc --noEmit && vite build",
    "preview": "vite preview --host 127.0.0.1"
  },
  "dependencies": {
    "@bigbang/tokens": "workspace:*",
    "@bigbang/ui": "workspace:*",
    "@fontsource-variable/inter": "5.3.0",
    "react": "19.3.1",
    "react-dom": "19.3.1"
  },
  "devDependencies": {
    "@tailwindcss/vite": "4.3.3",
    "@types/react": "19.3.0",
    "@types/react-dom": "19.3.0",
    "@vitejs/plugin-react": "6.1.2",
    "tailwindcss": "4.3.3",
    "typescript": "6.0.3",
    "vite": "8.3.5"
  }
}

The versions are the ones used in the repository; compare with the lockfile before adding a different one. Then run pnpm install at the repository root.

3. Vite config

apps/example-app/vite.config.ts

import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
  // Inline nothing: fonts and images are served as files, so the CSP needs no data: fonts.
  build: { assetsInlineLimit: 0 },
});

Vite compiles the TypeScript source of workspace packages without further settings.

4. TypeScript

apps/example-app/tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "types": ["vite/client"]
  },
  "include": ["src"]
}

5. Styles and entry file

apps/example-app/src/app.css

@import '@bigbang/ui/styles.css';
@import '@bigbang/tokens/css/neutral-light.css';
@import '@bigbang/tokens/css/neutral-dark.css';

@source '../node_modules/@bigbang/ui/src';

apps/example-app/src/main.tsx

import '@fontsource-variable/inter';
import './app.css';
import { Provider } from '@bigbang/ui';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Provider locale="en-GB">
      <App />
    </Provider>
  </StrictMode>,
);

apps/example-app/index.html

<!doctype html>
<html lang="en" data-brand="neutral" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Example app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

6. First screen

apps/example-app/src/App.tsx

import { Button, Card } from '@bigbang/ui';

export function App() {
  return (
    <main className="p-xl">
      <Card className="max-w-96">
        <Card.Header>
          <Card.Title>Card title</Card.Title>
          <Card.Description>The card description goes here.</Card.Description>
        </Card.Header>
        <Card.Footer>
          <Button>Primary button</Button>
        </Card.Footer>
      </Card>
    </main>
  );
}

pnpm --filter @bigbang/example-app dev

Next steps

• For the screen frame, see the AppShell template.
• To let users choose the brand and mode, change the data-brand and data-theme attributes; see Theming and white label.
• Security headers (CSP) for the production build follow the app repository’s rules; no inline style attributes and no inline scripts are used.