Electron Template with Official Website

Overview

A template to streamline Electron application development. It features unified auto-update functionality and settings screens, bundled with an official website created with Next.js (SSG).

Problems Solved

• Complexity of initial setup for Electron app development
• Complexity of implementing auto-update functionality
• Lack of UI/UX consistency in settings screens
• Inconsistent branding between app and website
• Additional effort required to develop promotional websites for apps

Key Features

Electron App Template

• Auto-update functionality: Automatic update system using electron-updater
• Unified settings screen: Reusable settings screen components
• Dark mode support: Theme switching linked to system settings
• Local storage management: Persistent storage of settings
• Error handling: Unified error handling and reporting
• Build configuration: Pre-configured builds for macOS, Windows, and Linux

Next.js (SSG) Official Website

• Landing page: App introduction and download links
• Features page: Screenshots and detailed descriptions
• Download page: OS-specific download links
• Changelog page: Version history and release notes
• SEO optimization: Automatic generation of meta tags and OG images

Technology Stack

Electron App

• Electron
• React
• TypeScript
• Vite
• electron-builder
• electron-updater

Official Website

• Next.js (SSG)
• TypeScript
• Tailwind CSS

Project Structure

electron-template/
├── app/                    # Electron application
│   ├── src/
│   │   ├── main/          # Main process
│   │   ├── renderer/      # Renderer process
│   │   └── preload/       # Preload scripts
│   └── package.json
├── site/                   # Next.js official website
│   ├── pages/
│   ├── components/
│   └── package.json
└── package.json           # Root package

Target Users

• Individual developers who want to create Electron apps
• Startups looking to quickly build prototypes
• Companies wanting desktop apps with unified UI/UX
• Teams wanting to develop apps and websites simultaneously

Development Roadmap

1. Phase 1: Create basic Electron template
2. Phase 2: Implement auto-update functionality
3. Phase 3: Unify settings screens and theme features
4. Phase 4: Develop Next.js official website
5. Phase 5: Create documentation and sample apps

References

• Electron Official Documentation
• electron-builder
• Next.js Static Site Generation