React + TypeScript + Vite

Requisitos

Este proyecto usa Vite 8, que necesita Node.js 20.19+ o 22.12+. Con versiones anteriores (por ejemplo 20.18) falla el arranque por bindings nativos de rolldown.

nvm use          # lee .nvmrc (Node 22)
rm -rf node_modules package-lock.json
npm install
npm run dev

Modo librería

Paquete ESM para compartir código entre apps CMS. El código público vive en src/lib/ y se exporta desde src/index.ts. src/App.tsx y src/main.tsx son solo playground de desarrollo.

npm run build    # genera dist/ (JS + tipos)

Contenido compartido (src/lib)

| Área | Descripción | |------|-------------| | components/shell | AppShell (layout sidebar + topbar) | | components/sidebar | Sidebar genérico (recibe navBlocks) | | components/top-bar | TopBar, NotificationsMenu, ProfileMenu | | components/site-selector-menu | Selector de publicación | | components/mui-provider | CmsMuiProvider, NextCmsMuiProvider | | theme/ | createAppTheme + tokens Material | | types/ | Contratos API/UI (publicación, perfil, notificaciones, navegación) | | utils/ | URLs CMS, avatar, utilidades de sitios/publicaciones |

Lo específico de cada app (rutas del sidebar, logos Next/Image, acciones server) queda en el proyecto consumidor.

Consumir en otro proyecto (monorepo)

En package.json del consumidor:

{
  "dependencies": {
    "sass-cms-template-common": "file:../sass-cms-template-common"
  }
}

Luego instala y importa:

import { LIB_VERSION } from 'sass-cms-template-common'

react y react-dom son peer dependencies; el proyecto host debe proveerlas.

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Oxc
• @vitejs/plugin-react-swc uses SWC

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])