react-vite.yamlā¢6.72 kB
# src/tools/fullstack-starter-kit-generator/templates/frontend/react-vite.yaml
moduleName: react-vite-frontend
description: "React frontend with Vite and TypeScript for {projectName}."
type: frontend
# Placeholders used in this template that need to be provided at composition time
placeholders:
- projectName
provides:
techStack:
frontendFramework: # Using more specific keys for merging
name: React
version: "^18.2.0"
rationale: "Industry-standard UI library with a strong ecosystem."
frontendBuildTool:
name: Vite
version: "^5.1.0" # Example, can be parameterized
rationale: "Next-generation frontend tooling offering fast HMR and optimized builds."
frontendLanguage:
name: TypeScript
version: "^5.2.0" # Example
rationale: "Strongly typed language for robust frontend development."
directoryStructure:
# Defines a snippet of the directory structure for this module.
# Paths are relative to a designated 'frontend' root (e.g., 'packages/client' or 'client/').
# The composer will handle placing this under the correct parent.
- path: "src/" # Relative to the module's assumed root
type: directory
children:
- path: "App.tsx"
type: file
content: |
// {moduleRoot}/src/App.tsx
import './App.css';
function App() {
return (
<>
<h1>{projectName} - React + Vite</h1>
<p>Edit <code>src/App.tsx</code> and save to test HMR</p>
</>
);
}
export default App;
- path: "main.tsx"
type: file
content: |
// {moduleRoot}/src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
- path: "index.css"
type: file
content: |
/* {moduleRoot}/src/index.css */
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
- path: "App.css"
type: file
content: |
/* {moduleRoot}/src/App.css */
h1 {
color: #333;
}
- path: "package.json" # Relative to the module's assumed root
type: file
content: |
{
"name": "{projectName}-client",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"typescript": "^5.2.2",
"vite": "^5.1.0"
}
}
- path: "vite.config.ts" # Relative to the module's assumed root
type: file
content: |
// {moduleRoot}/vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
});
- path: "tsconfig.json" # Relative to the module's assumed root
type: file
content: |
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
- path: "tsconfig.node.json" # Relative to module root
type: file
content: |
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts"]
}
- path: "index.html" # Relative to module root
type: file
content: |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{projectName} - Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
dependencies:
npm:
"{frontendPath}": # Placeholder for actual path like "client" or "packages/frontend"
dependencies:
react: "^18.2.0"
react-dom: "^18.2.0"
devDependencies:
"@types/react": "^18.2.55"
"@types/react-dom": "^18.2.19"
"@typescript-eslint/eslint-plugin": "^6.21.0"
"@typescript-eslint/parser": "^6.21.0"
"@vitejs/plugin-react": "^4.2.1"
eslint: "^8.56.0"
"eslint-plugin-react-hooks": "^4.6.0"
"eslint-plugin-react-refresh": "^0.4.5"
typescript: "^5.2.2"
vite: "^5.1.0"
setupCommands:
# Example: Command to be run in the context of the frontend directory
- context: "{frontendPath}" # Placeholder for actual path
command: "npm install"
- context: "{frontendPath}"
command: "npm run lint -- --fix" # Example initial lint
```