Genarrative/apps/ai-game-creator-shell/vite.config.ts

import { existsSync, readFileSync } from 'node:fs';
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';

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

const appRoot = dirname(fileURLToPath(import.meta.url));
const repoRoot = resolve(appRoot, '../..');

function resolveDevApiTarget() {
  const statePath = resolve(repoRoot, '.app/dev-stack.json');
  if (!existsSync(statePath)) {
    return 'http://127.0.0.1:8082';
  }
  try {
    const state = JSON.parse(readFileSync(statePath, 'utf8')) as {
      services?: {
        'api-server'?: {
          status?: string;
          url?: string;
        };
      };
    };
    const apiServer = state.services?.['api-server'];
    if (
      apiServer &&
      ['running', 'reused', 'starting'].includes(apiServer.status ?? '') &&
      apiServer.url
    ) {
      return apiServer.url;
    }
    return 'http://127.0.0.1:8082';
  } catch {
    return 'http://127.0.0.1:8082';
  }
}

const apiTarget = resolveDevApiTarget();

export default defineConfig({
  root: appRoot,
  plugins: [
    tailwindcss(),
    react(),
    {
      name: 'genarrative-ai-game-creator-dev-marker',
      configureServer(server) {
        server.middlewares.use(
          '/__agc_dev_server.json',
          (_request, response) => {
            response.setHeader(
              'Content-Type',
              'application/json; charset=utf-8',
            );
            response.end(
              JSON.stringify({
                schemaVersion: 1,
                app: 'ai-game-creator-shell',
                port: server.config.server.port,
                apiTarget,
              }),
            );
          },
        );
      },
    },
  ],
  resolve: {
    alias: {
      '@genarrative/image-canvas-core': resolve(
        repoRoot,
        'packages/image-canvas-core/src/index.ts',
      ),
      '@genarrative/image-canvas-react/styles.css': resolve(
        repoRoot,
        'packages/image-canvas-react/src/styles.css',
      ),
      '@genarrative/image-canvas-react': resolve(
        repoRoot,
        'packages/image-canvas-react/src/index.ts',
      ),
    },
    dedupe: ['react', 'react-dom'],
  },
  server: {
    host: '127.0.0.1',
    port: 3080,
    strictPort: true,
    fs: {
      allow: [repoRoot],
    },
    proxy: {
      '/api': {
        target: apiTarget,
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: resolve(appRoot, 'dist'),
    emptyOutDir: true,
  },
});