Template Electron

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

🚀 Features

• ⚡ 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

📋 Prerequisites

• Node.js 18+ and npm

🛠️ Installation

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

# Navigate to the project directory
cd template-electron

# Install dependencies
npm install

💻 Development

# Start the development server
npm run dev

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

🏗️ Building

# 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.

📁 Project Structure

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

🔧 Configuration

Vite

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

Electron

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

Tailwind CSS

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

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

🔒 Security

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

🔄 CI/CD

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

Workflows

• 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)
  • 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

Creating a Release

To create a new release:

# 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.

Dependencies

Dependabot is configured to automatically check for:

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

🤝 Contributing

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

📄 License

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

🙏 Acknowledgments

Built with:

• Electron
• React
• Vite
• Tailwind CSS
• TypeScript