@tmraaex/create-structure/src/templates/reactTemplate.js

CLI-verktyg för att skapa en standardiserad projektstruktur med TypeScript

import fs from "fs";
import path from "path";
import { execSync } from "child_process";

const createReactStructure = (root, projectName) => {
  // Step 1: Run npx create-vite to create a React project
  console.log("🔧 Skapar Vite + React projekt...");
  // Change directory to the root directory to avoid creating nested folders
  execSync(`npx create-vite@latest ./ --template react-ts`, {
    cwd: root, // Run the command in the root directory
    stdio: "inherit",
  });

  // Step 2: Modify the project structure
  const srcDir = path.join(root, "src");

  // Create new directories in src
  const customDirs = [
    "components",
    "hooks",
    "utils",
    "styles",
    "interfaces",
    "models",
    "pages",
    "providers",
    "context",
    "reducers",
    "services",
  ];
  customDirs.forEach((dir) => {
    const dirPath = path.join(srcDir, dir);
    if (!fs.existsSync(dirPath)) {
      fs.mkdirSync(dirPath);
      console.log(`📁 Mapp skapad: ${dirPath}`);
    }
  });

  // Create some example page
  const pageContent = `
export default function Home() {
    return <div>Hello World!</div>;
};

`;

  fs.writeFileSync(path.join(srcDir, "pages", "index.tsx"), pageContent);
  console.log("📝 Exempel component skapad!");

  // Step 3: Replace the entire content of App.tsx with new content
  const appTsxPath = path.join(srcDir, "App.tsx");

  const newAppTsxContent = `
import {RouterProvider} from "react-router"
import {fileRouter} from "@tmraaex/simpleframework"
import "./App.css";
export default function App() {
  return (
    <div className="App">
      <RouterProvider router={fileRouter} />
    </div>
  );
}
`;

  // Write the new content to App.tsx (this will overwrite the entire file)
  fs.writeFileSync(appTsxPath, newAppTsxContent);
  console.log("🔧 App.tsx har blivit uppdaterad!");

  // Step 4: Update tsconfig.json
  const tsconfigPath = path.join(root, "tsconfig.app.json");
  const tsconfigContent = fs.readFileSync(tsconfigPath, "utf8");
  const updatedTsconfig = tsconfigContent.replace(
    '"skipLibCheck": true',
    `"skipLibCheck": true,
    \n
    /* Path import aliases */
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@styles/*": ["src/styles/*"],
      "@pages/*": ["src/pages/*"],
      "@models/*": ["src/models/*"],
      "@interfaces/*": ["src/interfaces/*"],
      "@context/*": ["src/context/*"],
      "@providers/*": ["src/providers/*"],
      "@services/*":["src/services/*"],
      "@reducers/*":["src/reducers/*"]
    }`
  );

  fs.writeFileSync(tsconfigPath, updatedTsconfig);
  console.log("🔧 tsconfig.json har blivit uppdaterad med import alias");

  const viteConfigPath = path.join(root, "vite.config.ts");

  const newViteConfigContent = `
import {defineConfig} from 'vite';
import tsconfigPaths from 'vite-plugin-tsconfig-paths';

import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [react(), tsconfigPaths()],
    build: {
        target: "es2022" 
    },
    esbuild: {
        target: "es2022" 
    },
    optimizeDeps: {
        esbuildOptions: {
            target: "es2022" 
        }
    },
    resolve: {
        alias: {
            '@components': '/src/components',
            '@hooks': '/src/hooks',
            '@styles': '/src/styles',
            '@pages': '/src/pages',
            '@models': '/src/models',
            '@interfaces': '/src/interfaces',
            '@context': '/src/context',
            '@providers': '/src/providers',
            '@services': '/src/services',
            '@reducers': '/src/reducers'
        },
    },
});

`;
  fs.writeFileSync(viteConfigPath, newViteConfigContent, "utf8");
  console.log("🔧 vite.config.json har blivit uppdaterad med import alias");

  // Step 5: Run `npm install` to install dependencies
  console.log("🔧 Kör npm install...");
  execSync("npm install --save-dev @types/react", {
    cwd: root,
    stdio: "ignore",
  });

  execSync(
    "npm install vite-plugin-tsconfig-paths react-router @tmraaex/simpleframework",
    {
      cwd: root,
      stdio: "ignore",
    }
  );

  execSync("npm install", {
    cwd: root,
    stdio: "inherit",
  });
  console.log("✅ Alla paket installerade!");
};

export { createReactStructure };