fs-starter 1.0.0

package/index.js

@@ -0,0 +1,531 @@
+#!/usr/bin/env node
+
+import { input, select, confirm } from '@inquirer/prompts';
+import { execa } from 'execa';
+import chalk from 'chalk';
+import ora from 'ora';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Check Node.js version (requires >= 18 for ESM and top-level await)
+const NODE_VERSION_REQUIRED = '18.0.0';
+const currentVersion = process.version.slice(1); // Remove 'v' prefix
+
+function compareVersions(current, required) {
+  const currentParts = current.split('.').map(Number);
+  const requiredParts = required.split('.').map(Number);
+  
+  for (let i = 0; i < requiredParts.length; i++) {
+    if (currentParts[i] > requiredParts[i]) return 1;
+    if (currentParts[i] < requiredParts[i]) return -1;
+  }
+  return 0;
+}
+
+if (compareVersions(currentVersion, NODE_VERSION_REQUIRED) < 0) {
+  console.error(chalk.red(`\n❌ Error: Node.js ${NODE_VERSION_REQUIRED} or higher is required.`));
+  console.error(chalk.yellow(`Current version: ${process.version}`));
+  console.error(chalk.cyan(`Please upgrade Node.js: https://nodejs.org/\n`));
+  process.exit(1);
+}
+
+// Helper to read templates
+async function readTemplate(templateName) {
+  const templatePath = path.join(__dirname, 'templates', templateName);
+  return await fs.readFile(templatePath, 'utf-8');
+}
+
+async function setup() {
+  console.log(chalk.bold.cyan(`
+______               _                 _       _             _            
+|  ___|             | |               | |     | |           | |           
+| |_ _ __ ___  _ __ | |_ ___ _ __   __| |  ___| |_ __ _ _ __| |_ ___ _ __ 
+|  _| '__/ _ \\| '_ \\| __/ _ \\ '_ \\ / _\` | / __| __/ _\` | '__| __/ _ \\ '__|
+| | | | | (_) | | | | ||  __/ | | | (_| | \\__ \\ || (_| | |  | ||  __/ |   
+\\_| |_|  \\___/|_| |_|\\__\\___|_| |_|\\__,_| |___/\\__\\__,_|_|   \\__\\___|_|   
+                                                                          
+`));
+
+  // --- 1. INTERACTIVE QUESTIONS ---
+  const projectName = await input({ 
+    message: 'Project name:', 
+    default: 'my-react-app',
+    validate: (value) => {
+      if (!value || value.trim() === '') {
+        return 'Project name is required';
+      }
+      if (!/^[a-z0-9-_]+$/.test(value)) {
+        return 'Use only lowercase letters, numbers, hyphens and underscores';
+      }
+      if (fs.existsSync(path.join(process.cwd(), value))) {
+        return 'A folder with this name already exists';
+      }
+      return true;
+    }
+  });
+
+  const packageManager = await select({
+    message: 'Choose package manager:',
+    choices: [
+      { name: chalk.blue('yarn'), value: 'yarn' },
+      { name: chalk.red('npm'), value: 'npm' },
+      { name: chalk.yellow('pnpm'), value: 'pnpm' },
+    ],
+    default: 'yarn'
+  });
+
+  const lang = await select({
+    message: 'Choose language:',
+    choices: [
+      { name: chalk.blue('TypeScript'), value: 'ts' },
+      { name: chalk.yellow('JavaScript'), value: 'js' },
+    ],
+  });
+
+  const useTailwind = await confirm({ 
+    message: 'Install Tailwind CSS v4?', 
+    default: true 
+  });
+
+  const useZustand = await confirm({ 
+    message: 'Install Zustand?', 
+    default: false 
+  });
+
+  const useTanstackQuery = await confirm({ 
+    message: 'Install TanStack Query (React Query)?', 
+    default: false 
+  });
+
+  const useRouter = await confirm({ 
+    message: 'Install React Router Dom?', 
+    default: true 
+  });
+
+  const useAtomic = await confirm({ 
+    message: 'Use Atomic Design folder structure?', 
+    default: true 
+  });
+
+  const initGit = await confirm({ 
+    message: 'Initialize Git repository?', 
+    default: true 
+  });
+
+  const useEslint = await confirm({ 
+    message: 'Install ESLint?', 
+    default: true 
+  });
+
+  const usePrettier = await confirm({ 
+    message: 'Install Prettier?', 
+    default: true 
+  });
+
+  const useFormik = await confirm({ 
+    message: 'Install Formik + Yup for form handling?', 
+    default: false 
+  });
+
+  // Ask about Error Boundary only if Router is not installed
+  // (Router has its own errorElement system)
+  let useErrorBoundary = false;
+  if (!useRouter) {
+    useErrorBoundary = await confirm({ 
+      message: 'Add Error Boundary component (react-error-boundary)?', 
+      default: true 
+    });
+  }
+
+  // Path aliases are always configured
+  const usePathAliases = true;
+
+  // --- PATH CONFIGURATION ---
+  const projectPath = path.join(process.cwd(), projectName);
+  const template = lang === 'ts' ? 'react-ts' : 'react';
+  const ext = lang === 'ts' ? 'ts' : 'js';
+  const jsxExt = lang === 'ts' ? 'tsx' : 'jsx';
+
+  // --- CLEANUP FUNCTION ---
+  const cleanup = async () => {
+    if (fs.existsSync(projectPath)) {
+      await fs.remove(projectPath);
+      console.log(chalk.yellow('Project folder removed due to error.'));
+    }
+  };
+
+  // --- 2. BASE PROJECT CREATION ---
+  const spinner = ora('Creating base project with Vite...').start();
+  try {
+    const createCmd = packageManager === 'npm' ? 'npm' : packageManager;
+    const createArgs = packageManager === 'npm' 
+      ? ['create', 'vite@latest', projectName, '--', '--template', template]
+      : ['create', 'vite', projectName, '--template', template];
+    
+    await execa(createCmd, createArgs);
+    spinner.succeed('Base project created.');
+  } catch (err) {
+    spinner.fail('Error creating project.');
+    console.error(chalk.red(err.message));
+    await cleanup();
+    process.exit(1);
+  }
+
+  // --- 3. FOLDER STRUCTURE CREATION ---
+  const structureSpinner = ora("Creating folder structure...").start();
+  try {
+    const folders = useAtomic 
+      ? ['Atoms', 'Molecules', 'Organisms', 'Pages', 'Stores', 'Utils']
+      : ['Stores', 'Utils', 'Pages'];
+    
+    for (const folder of folders) {
+      await fs.ensureDir(path.join(projectPath, 'src', folder));
+    }
+    structureSpinner.succeed(`Folders created: ${folders.join(', ')}`);
+  } catch (err) {
+    structureSpinner.fail(`Error creating folders: ${err.message}`);
+    console.error(chalk.red(err));
+    await cleanup();
+    process.exit(1);
+  }
+
+  // --- 4. TAILWIND V4 CONFIGURATION ---
+  if (useTailwind) {
+    const twSpinner = ora('Configuring Tailwind v4...').start();
+    try {
+      // Development dependencies only (-D flag)
+      await execa(packageManager, ['add', '-D', 'tailwindcss', '@tailwindcss/vite'], { cwd: projectPath });
+
+      const viteConfigFileName = lang === 'ts' ? 'vite.config.ts' : 'vite.config.js';
+      const viteConfigPath = path.join(projectPath, viteConfigFileName);
+      
+      // Use template with or without path aliases
+      const templateName = usePathAliases 
+        ? `vite.config-with-alias.${lang === 'ts' ? 'ts' : 'js'}.template`
+        : `vite.config.${lang === 'ts' ? 'ts' : 'js'}.template`;
+      const viteConfigContent = await readTemplate(templateName);
+      await fs.writeFile(viteConfigPath, viteConfigContent);
+
+      const cssPath = path.join(projectPath, 'src/index.css');
+      const cssContent = await readTemplate('index.css.template');
+      await fs.writeFile(cssPath, cssContent);
+      
+      twSpinner.succeed('Tailwind v4 configured.');
+    } catch (err) {
+      twSpinner.fail(`Error configuring Tailwind: ${err.message}`);
+      console.error(chalk.red(err));
+      await cleanup();
+      process.exit(1);
+    }
+  }
+
+  // --- 5. ZUSTAND CONFIGURATION ---
+  if (useZustand) {
+    const zSpinner = ora('Installing Zustand...').start();
+    try {
+      // Runtime dependency
+      await execa(packageManager, ['add', 'zustand'], { cwd: projectPath });
+      
+      const storeContent = await readTemplate(`zustand-store.${lang === 'ts' ? 'ts' : 'js'}.template`);
+      await fs.writeFile(path.join(projectPath, 'src/Stores', `useStore.${ext}`), storeContent);
+      zSpinner.succeed('Zustand installed in src/Stores/.');
+    } catch (err) {
+      zSpinner.fail(`Error installing Zustand: ${err.message}`);
+      console.error(chalk.red(err));
+      await cleanup();
+      process.exit(1);
+    }
+  }
+
+  // --- 6. REACT ROUTER CONFIGURATION ---
+  if (useRouter) {
+    const rSpinner = ora('Installing React Router...').start();
+    try {
+      // Runtime dependency
+      await execa(packageManager, ['add', 'react-router-dom'], { cwd: projectPath });
+
+      // Create HomePage component
+      const homePageContent = await readTemplate(`HomePage.${jsxExt}.template`);
+      await fs.writeFile(path.join(projectPath, 'src/Pages', `HomePage.${jsxExt}`), homePageContent);
+
+      // Create ErrorPage component for router error handling
+      const errorPageContent = await readTemplate(`ErrorPage.${jsxExt}.template`);
+      await fs.writeFile(path.join(projectPath, 'src', `ErrorPage.${jsxExt}`), errorPageContent);
+
+      // Create router file
+      const routerContent = await readTemplate(`router.${jsxExt}.template`);
+      await fs.writeFile(path.join(projectPath, `src/router.${jsxExt}`), routerContent);
+
+      // App.tsx will be created later based on Router + Query combination
+      rSpinner.succeed('React Router configured with error handling.');
+    } catch (err) {
+      rSpinner.fail(`Error installing React Router: ${err.message}`);
+      console.error(chalk.red(err));
+      await cleanup();
+      process.exit(1);
+    }
+  }
+
+  // --- 7. TANSTACK QUERY CONFIGURATION ---
+  if (useTanstackQuery) {
+    const tqSpinner = ora('Installing TanStack Query...').start();
+    try {
+      // Runtime dependencies
+      await execa(packageManager, ['add', '@tanstack/react-query', '@tanstack/react-query-devtools'], { cwd: projectPath });
+      
+      // Create queryClient file
+      const queryClientContent = await readTemplate(`queryClient.${ext}.template`);
+      await fs.writeFile(path.join(projectPath, 'src', `queryClient.${ext}`), queryClientContent);
+      
+      tqSpinner.succeed('TanStack Query installed and configured.');
+    } catch (err) {
+      tqSpinner.fail(`Error installing TanStack Query: ${err.message}`);
+      console.error(chalk.red(err));
+      await cleanup();
+      process.exit(1);
+    }
+  }
+
+  // --- 7.5. APP.TSX/JSX GENERATION (after Router and Query setup) ---
+  // This ensures the correct template is used based on Router + Query combination
+  const appSpinner = ora('Generating App component...').start();
+  try {
+    let appTemplate;
+    
+    if (useRouter && useTanstackQuery) {
+      // Router + Query: includes RouterProvider and QueryClientProvider
+      appTemplate = `App-with-query.${jsxExt}.template`;
+    } else if (useRouter && !useTanstackQuery) {
+      // Router only: includes RouterProvider
+      appTemplate = `App.${jsxExt}.template`;
+    } else if (!useRouter && useTanstackQuery) {
+      // Query only: includes QueryClientProvider
+      appTemplate = `App-query-only.${jsxExt}.template`;
+    } else {
+      // Neither Router nor Query: basic App
+      appTemplate = `App.${jsxExt}.template`;
+    }
+    
+    const appContent = await readTemplate(appTemplate);
+    await fs.writeFile(path.join(projectPath, `src/App.${jsxExt}`), appContent);
+    
+    appSpinner.succeed('App component generated.');
+  } catch (err) {
+    appSpinner.fail(`Error generating App component: ${err.message}`);
+    console.error(chalk.red(err));
+  }
+
+  // --- 8. PATH ALIASES CONFIGURATION ---
+  if (usePathAliases && !useTailwind) {
+    const aliasSpinner = ora('Configuring path aliases...').start();
+    try {
+      // Update vite.config with aliases if Tailwind is not installed
+      const viteConfigFileName = lang === 'ts' ? 'vite.config.ts' : 'vite.config.js';
+      const viteConfigPath = path.join(projectPath, viteConfigFileName);
+      
+      const templateName = `vite.config-alias-no-tailwind.${lang === 'ts' ? 'ts' : 'js'}.template`;
+      const viteConfigContent = await readTemplate(templateName);
+      await fs.writeFile(viteConfigPath, viteConfigContent);
+      
+      aliasSpinner.succeed('Path aliases configured.');
+    } catch (err) {
+      aliasSpinner.fail(`Error configuring path aliases: ${err.message}`);
+      console.error(chalk.red(err));
+    }
+  }
+
+  // Configure tsconfig/jsconfig for path aliases
+  if (usePathAliases) {
+    try {
+      const configFileName = lang === 'ts' ? 'tsconfig.json' : 'jsconfig.json';
+      const configPath = path.join(projectPath, configFileName);
+      
+      const configContent = await readTemplate(`${configFileName}.template`);
+      await fs.writeFile(configPath, configContent);
+    } catch (err) {
+      console.error(chalk.red(`Error creating ${lang === 'ts' ? 'tsconfig' : 'jsconfig'}: ${err.message}`));
+    }
+  }
+
+  // --- 9. FORMIK + YUP CONFIGURATION ---
+  if (useFormik) {
+    const formikSpinner = ora('Installing Formik + Yup...').start();
+    try {
+      // Runtime dependencies
+      await execa(packageManager, ['add', 'formik', 'yup'], { cwd: projectPath });
+      
+      // Create example form in Utils folder
+      const formContent = await readTemplate(`ExampleForm.${jsxExt}.template`);
+      await fs.writeFile(path.join(projectPath, 'src/Utils', `ExampleForm.${jsxExt}`), formContent);
+      
+      formikSpinner.succeed('Formik + Yup installed with example form in src/Utils/.');
+    } catch (err) {
+      formikSpinner.fail(`Error installing Formik + Yup: ${err.message}`);
+      console.error(chalk.red(err));
+      await cleanup();
+      process.exit(1);
+    }
+  }
+
+  // --- 10. ERROR BOUNDARY CONFIGURATION ---
+  if (useErrorBoundary) {
+    const ebSpinner = ora('Installing Error Boundary...').start();
+    try {
+      // Runtime dependency
+      await execa(packageManager, ['add', 'react-error-boundary'], { cwd: projectPath });
+      
+      // Create ErrorFallback component
+      const errorFallbackContent = await readTemplate(`ErrorBoundary.${jsxExt}.template`);
+      await fs.writeFile(path.join(projectPath, 'src', `ErrorFallback.${jsxExt}`), errorFallbackContent);
+      
+      // Update main.tsx/jsx to wrap App with ErrorBoundary
+      const mainContent = await readTemplate(`main-with-error-boundary.${jsxExt}.template`);
+      const mainFileName = lang === 'ts' ? 'main.tsx' : 'main.jsx';
+      await fs.writeFile(path.join(projectPath, 'src', mainFileName), mainContent);
+      
+      ebSpinner.succeed('Error Boundary configured with react-error-boundary.');
+    } catch (err) {
+      ebSpinner.fail(`Error configuring Error Boundary: ${err.message}`);
+      console.error(chalk.red(err));
+    }
+  }
+
+  // --- 11. ESLINT CONFIGURATION ---
+  if (useEslint) {
+    const eslintSpinner = ora('Installing ESLint...').start();
+    try {
+      // Development dependencies only (-D flag)
+      const eslintPkgs = lang === 'ts'
+        ? ['eslint', '@eslint/js', 'typescript-eslint', 'eslint-plugin-react', 'eslint-plugin-react-hooks', 'eslint-plugin-react-refresh', 'globals']
+        : ['eslint', '@eslint/js', 'eslint-plugin-react', 'eslint-plugin-react-hooks', 'eslint-plugin-react-refresh', 'globals'];
+      
+      await execa(packageManager, ['add', '-D', ...eslintPkgs], { cwd: projectPath });
+
+      const eslintConfig = await readTemplate(`eslint.config.${lang === 'ts' ? 'ts' : 'js'}.template`);
+      await fs.writeFile(path.join(projectPath, 'eslint.config.js'), eslintConfig);
+      eslintSpinner.succeed('ESLint configured.');
+    } catch (err) {
+      eslintSpinner.fail(`Error installing ESLint: ${err.message}`);
+      console.error(chalk.red(err));
+    }
+  }
+
+  // --- 12. PRETTIER CONFIGURATION ---
+  if (usePrettier) {
+    const prettierSpinner = ora('Installing Prettier...').start();
+    try {
+      // Development dependency only (-D flag)
+      await execa(packageManager, ['add', '-D', 'prettier'], { cwd: projectPath });
+      
+      const prettierConfig = await readTemplate('.prettierrc.template');
+      await fs.writeFile(
+        path.join(projectPath, '.prettierrc'),
+        prettierConfig
+      );
+      
+      const prettierIgnore = await readTemplate('.prettierignore.template');
+      await fs.writeFile(
+        path.join(projectPath, '.prettierignore'),
+        prettierIgnore
+      );
+      
+      prettierSpinner.succeed('Prettier configured.');
+    } catch (err) {
+      prettierSpinner.fail(`Error installing Prettier: ${err.message}`);
+      console.error(chalk.red(err));
+    }
+  }
+
+  // --- 13. GIT INITIALIZATION ---
+  if (initGit) {
+    const gitSpinner = ora('Initializing Git...').start();
+    try {
+      await execa('git', ['init'], { cwd: projectPath });
+      await execa('git', ['add', '.'], { cwd: projectPath });
+      await execa('git', ['commit', '-m', 'Initial commit'], { cwd: projectPath });
+      gitSpinner.succeed('Git repository initialized.');
+    } catch (err) {
+      gitSpinner.fail(`Error initializing Git: ${err.message}`);
+      console.error(chalk.yellow('Git is not required, continuing...'));
+    }
+  }
+
+  // --- 14. README GENERATION ---
+  const readmeSpinner = ora('Generating README.md...').start();
+  try {
+    const features = [];
+    if (useTailwind) features.push('Tailwind CSS v4');
+    if (useZustand) features.push('Zustand');
+    if (useTanstackQuery) features.push('TanStack Query (React Query)');
+    if (useRouter) features.push('React Router with Error Handling');
+    if (usePathAliases) features.push('Path Aliases (@/ imports)');
+    if (useFormik) features.push('Formik + Yup');
+    if (useErrorBoundary) features.push('Error Boundary (react-error-boundary)');
+    if (useEslint) features.push('ESLint');
+    if (usePrettier) features.push('Prettier');
+    
+    const readmeContent = `# ${projectName}
+
+React project generated with Vite.
+
+## 🚀 Features
+
+- ⚡ Vite
+- ⚛️ React 18
+- ${lang === 'ts' ? '📘 TypeScript' : '📗 JavaScript'}
+${features.map(f => `- ✨ ${f}`).join('\n')}
+${useAtomic ? '- 📁 Atomic Design Structure' : ''}
+
+## 📦 Installation
+
+\`\`\`bash
+${packageManager} install
+\`\`\`
+
+## 🏃 Start
+
+\`\`\`bash
+${packageManager} ${packageManager === 'npm' ? 'run ' : ''}dev
+\`\`\`
+
+## 🏗️ Build
+
+\`\`\`bash
+${packageManager} ${packageManager === 'npm' ? 'run ' : ''}build
+\`\`\`
+
+## 📂 Project Structure
+
+\`\`\`
+src/
+${useAtomic ? '├── Atoms/        # Atomic components\n├── Molecules/    # Molecular components\n├── Organisms/    # Complex components\n' : ''}├── Pages/        # Application pages
+├── Stores/       # State management
+└── Utils/        # Utility functions
+\`\`\`
+
+---
+
+Generated with ❤️ using frontend-starter
+`;
+    
+    await fs.writeFile(path.join(projectPath, 'README.md'), readmeContent);
+    readmeSpinner.succeed('README.md generated.');
+  } catch (err) {
+    readmeSpinner.fail(`Error generating README: ${err.message}`);
+  }
+
+  // --- CONCLUSION ---
+  console.log(chalk.green(`\n✅ Project "${projectName}" successfully generated!`));
+  console.log(chalk.white(`\n📋 To get started:`));
+  console.log(chalk.cyan(`  1. cd ${projectName}`));
+  console.log(chalk.cyan(`  2. ${packageManager} install`));
+  console.log(chalk.cyan(`  3. ${packageManager} ${packageManager === 'npm' ? 'run ' : ''}dev\n`));
+}
+
+setup().catch((err) => {
+  console.error(chalk.red('\n❌ Fatal error:'), err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "fs-starter",
+  "version": "1.0.0",
+  "type": "module",
+  "bin": {
+    "fs-starter": "./index.js"
+  },
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@inquirer/prompts": "^8.2.0",
+    "chalk": "^5.6.2",
+    "execa": "^9.6.1",
+    "fs-extra": "^11.3.3",
+    "inquirer": "^13.2.2",
+    "ora": "^9.2.0"
+  },
+  "files": [
+    "index.js",
+    "templates/",
+    "utils/"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/templates/.prettierignore.template

@@ -0,0 +1,3 @@
+dist
+node_modules
+.git

package/templates/.prettierrc.template

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2
+}

package/templates/App-query-only.jsx.template

@@ -0,0 +1,18 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { queryClient } from './queryClient';
+import './App.css';
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div>
+        <h1>Welcome to React + Vite</h1>
+        <p>Start building your app!</p>
+      </div>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
+
+export default App;

package/templates/App-query-only.tsx.template

@@ -0,0 +1,18 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { queryClient } from './queryClient';
+import './App.css';
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div>
+        <h1>Welcome to React + Vite</h1>
+        <p>Start building your app!</p>
+      </div>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
+
+export default App;

package/templates/App-with-query.jsx.template

@@ -0,0 +1,17 @@
+import { RouterProvider } from 'react-router-dom';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { router } from './router';
+import { queryClient } from './queryClient';
+import './App.css';
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
+
+export default App;

package/templates/App-with-query.tsx.template

@@ -0,0 +1,17 @@
+import { RouterProvider } from 'react-router-dom';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { router } from './router';
+import { queryClient } from './queryClient';
+import './App.css';
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
+
+export default App;

package/templates/App.jsx.template

@@ -0,0 +1,9 @@
+import { RouterProvider } from 'react-router-dom';
+import { router } from './router';
+import './App.css';
+
+function App() {
+  return <RouterProvider router={router} />;
+}
+
+export default App;

package/templates/App.tsx.template

@@ -0,0 +1,9 @@
+import { RouterProvider } from 'react-router-dom';
+import { router } from './router';
+import './App.css';
+
+function App() {
+  return <RouterProvider router={router} />;
+}
+
+export default App;