Template-electron-react-sequelize

Este template provee lo mínimo necesario para el correcto funcionamiento de un proyecto de electron que usa sequelize como orm, react, tailwind y typescript para funcionar. Está construido sobre vite y también incluye un slint config.

Instalación y configuración inicial

Para instalar la plantilla podemos descargar el archivo zip y descomprimirlo o simplemente ejecutar el comando de git en la carpeta donde queremos crear el proyecto:

git clone https://github.com/sergioCaceresMC/Template-electron-react-sequelize.git

Luego entramos a la carpeta

cd Template-electron-react-sequelize

Una vez dentro, lo primero que debemos hacer para que funcione es instalar las dependencias de node. para ello usamos el comando

npm install

Cuando las dependencias terminen de instalarse podemos ejecutar el programa en modo desarrollo con:

npm run dev

En ocaciones es necesario ejecutar este último comando dos veces para que la seed de los usuarios se cargue correctamente al sistema.

Información extra de vite

Actualmente, hay 2 plugins oficiales para vite:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expandir configuración de ESlint

Si tu estás desarrollando una aplicación de producción, se recomienda actualizar la configuración a las reglas habilitadas de type-aware lint:

export default tseslint.config([
  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...
    },
  },
]);

También puedes instalar eslint-plugin-react-x y eslint-plugin-react-dom para reglas especificas para React:

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

export default tseslint.config([
  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...
    },
  },
]);

Configuración de proyecto de electron

En la carpeta de package.json puedes encontrar la configuración referente de la aplicación de electron y los script para la producción en diferentes dispositivos:

{
  "name": "electron-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "dist-electron/main.js",
  "scripts": {
    "dev": "npm-run-all --parallel dev:react dev:electron",
    "dev:react": "vite",
    "dev:electron": "npm run transpile:electron && cross-env NODE_ENV=development electron .",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "transpile:electron": "tsc --project src/electron/tsconfig.json",
    "dist:mac": "npm run transpile:electron && npm run build && electron-builder --mac --arm64",
    "dist:win": "npm run transpile:electron && npm run build && electron-builder --win --x64",
    "dist:linux": "npm run transpile:electron && npm run build && electron-builder --linux --x64"
  },
  "dependencies": {
    //...
  },
  "devDependencies": {
    //...
  }
  //...
}

También se incluyen electron-builder.json en donde está la configuración del ejecutable con la versíon y otras características:

{
  "appId": "com.mitha.template",
  "files": ["dist-react", "dist-electron"],
  "extraResources": ["dist-electron/preload.cjs"],
  "icon": "./template.png",
  "mac": {
    "target": "dmg"
  },
  "linux": {
    "target": "AppImage",
    "category": "Utility"
  },
  "win": {
    "target": ["portable", "msi"]
  }
}

Entorno de desarrollo y producción

Para iniciar la aplicación en modo de desarrollo necesitas ejecutar el comando

npm run dev

Para crear el ejecutable de la aplicación en un dispositivo específico necesitas ejecutar para windows:

npm run dist:win

para linux:

npm run dist:linux

para mac:

npm run dist:mac