Skip to content

README.md

Latest commit

 

History

History
181 lines (135 loc) · 5.41 KB

README.md

File metadata and controls

181 lines (135 loc) · 5.41 KB

Template Electron

CI Release Code Quality License: MIT

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

Creating a Release

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.

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: