Kurulum: Vite

Ürün uygulamaları Vite ile, istemci tarafında çizilen tek sayfalık uygulama olarak kurulur (D-05). Bu rehber boş bir klasörden çalışan bir ekrana kadar gider. Her adımın nedeni React uygulaması sayfasındadır.

1. Uygulama klasörü

Uygulama bu deponun çalışma alanında, apps/ altında yer alır; pnpm-workspace.yaml bu klasörü zaten kapsar.

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"
  }
}

Sürümler depoda kullanılan sürümlerdir; yeni bir sürüm eklemeden önce kilit dosyasıyla karşılaştırın. Ardından depo kökünde pnpm install çalıştırın.

3. Vite ayarı

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, çalışma alanındaki paketlerin TypeScript kaynağını ayrıca bir ayar gerektirmeden derler.

4. TypeScript

apps/example-app/tsconfig.json

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

5. Stiller ve giriş dosyası

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="tr-TR">
      <App />
    </Provider>
  </StrictMode>,
);

apps/example-app/index.html

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

6. İlk ekran

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>Kart başlığı</Card.Title>
          <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
        </Card.Header>
        <Card.Footer>
          <Button>Birincil buton</Button>
        </Card.Footer>
      </Card>
    </main>
  );
}

pnpm --filter @bigbang/example-app dev

Sonraki adımlar

• Ekranın iskeleti için AppShell şablonuna bakın.
• Marka ve mod seçimini kullanıcıya açmak için data-brand ve data-theme özniteliklerini değiştirin; bkz. Tema ve beyaz etiket.
• Üretim derlemesinin güvenlik başlıkları (CSP) uygulama deposunun kurallarına göre eklenir; satır içi style özniteliği ve satır içi betik kullanılmaz.