A modern, production-ready Electron application template built with TypeScript, React, and TailwindCSS.

• ⚡ Vite - Lightning fast HMR and build tool
• ⚛️ React 19 - Latest React with hooks
• 🔷 TypeScript - Type safety and better DX
• 🎨 Tailwind CSS - Utility-first CSS framework
• 📦 Electron Builder - Package and distribute your app
• 🔒 Secure - Context isolation and secure IPC

• Node.js 18+ and npm

# Clone the repository
git clone https://github.com/pnstack/template-electron.git

# Navigate to the project directory
cd template-electron

# Install dependencies
npm install

# Start the development server
npm run dev

This will start the Vite dev server and launch the Electron application with hot-reload enabled.

# Build for production
npm run build

# Build and package for your current platform
npm run electron:build

# Build for specific platforms
npm run electron:build:win    # Windows
npm run electron:build:mac    # macOS
npm run electron:build:linux  # Linux

The packaged application will be in the release directory.

template-electron/
├── src/
│   ├── main/           # Electron main process
│   │   └── main.ts     # Main process entry
│   ├── preload/        # Preload scripts
│   │   └── preload.ts  # Secure IPC bridge
│   └── renderer/       # React application
│       ├── App.tsx     # Main React component
│       ├── main.tsx    # React entry point
│       ├── index.css   # Tailwind directives
│       └── electron.d.ts # TypeScript definitions
├── index.html          # HTML template
├── vite.config.ts      # Vite configuration
├── tailwind.config.js  # Tailwind configuration
├── tsconfig.json       # TypeScript config (renderer)
├── tsconfig.node.json  # TypeScript config (main/preload)
└── package.json        # Project dependencies

The Vite configuration (vite.config.ts) includes:

• React plugin for JSX/TSX support
• Electron plugin for main and preload scripts
• Path aliases for cleaner imports

The main process (src/main/main.ts) creates the browser window and handles:

• Window creation and management
• Loading the renderer in dev/prod mode
• IPC communication with renderer

Configure Tailwind by editing tailwind.config.js. The template includes:

• Configured content paths for tree-shaking
• Ready for custom themes and plugins

This template follows Electron security best practices:

• Context isolation enabled
• Node integration disabled
• Secure IPC via preload script
• No direct Node.js access in renderer

This project includes comprehensive CI/CD workflows using GitHub Actions:

• CI (ci.yml) - Runs on every push and PR

  • Tests across multiple OS (Ubuntu, Windows, macOS)
  • Tests across multiple Node.js versions (18.x, 20.x)
  • Type checking with TypeScript
  • Build verification
  • Automatic artifact uploads

• Release (release.yml) - Automated releases

  • Triggers on version tags (e.g., v1.0.0)
  • Triggers on pushes to main branch (auto-creates release with package.json version)
  • Builds for all platforms (Windows, macOS, Linux)
  • Creates GitHub releases with binaries
  • Manual trigger option available

• PR Check (pr-check.yml) - Pull request validation

  • Type checking
  • Build verification
  • PR size warnings

• Code Quality (quality.yml) - Code quality checks

  • TypeScript validation
  • Security audits
  • Bundle size analysis
  • Weekly scheduled runs

Releases are automatically created in two ways:

1. Automatic release on main branch

• Every push to the main branch automatically creates a release
• Uses the version from package.json (e.g., if package.json has "version": "1.0.0", it creates release v1.0.0)
• Builds and publishes binaries for all platforms

2. Manual release with version tag

# Create and push a version tag
git tag v1.0.0
git push origin v1.0.0

The release workflow will automatically build and publish binaries for all platforms.

Dependabot is configured to automatically check for:

• npm package updates (weekly)
• GitHub Actions updates (weekly)

Contributions are welcome! Please feel free to submit a Pull Request.

MIT License - feel free to use this template for any project!

Built with:

• Electron
• React
• Vite
• Tailwind CSS
• TypeScript