create-bluecopa-react-app/templates/latest/vite.config.ts

CLI tool to create bluecopa React applications

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import federation from "@originjs/vite-plugin-federation";
import react from "@vitejs/plugin-react-swc";
import path from "path";

export default defineConfig({
  server: {
    host: "::",
    port: 8080,
    cors: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
      "Access-Control-Allow-Headers":
        "Origin, X-Requested-With, Content-Type, Accept, Authorization, Cache-Control",
    },
  },
  plugins: [
    react(),
    tailwindcss(),
    tsconfigPaths(),
    federation({
      name: "__copa_ext_app__react_route",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./app/single-spa.tsx",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  build: {
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
    ssr: false,
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        format: "system",
        assetFileNames: (assetInfo) => {
          const fileName = assetInfo.names?.[0] || assetInfo.name;
          if (fileName && fileName.endsWith('.css')) {
            return "assets/remoteEntry.css";
          }
          return fileName || "assets/remoteEntry.css";
        },
      },
    },
  },
  base: "/",
});