Electron Hotplate 🔥

A batteries-included Electron boilerplate with React, TypeScript, and more. Based on the Electron React Boilerplate, this project includes a demo app showcasing basic functionality and inter-process communication between the main and renderer processes.

✨ Features

🚀 React for the UI
🖥️ Electron for cross-platform desktop app development
📘 TypeScript for type-safe code
🎨 TailwindCSS for styling
🔌 Inter-process communication (IPC) between main and renderer processes
🌍 Global context for state management
🖼️ Multi-window support (main window and child window)
🔔 App and System-wide Notifications
🔄 Auto Updater
💾 Built-in Store with electron-store
🖱️ Context Menu
🌙 Dark Mode
❌ Error Handler
⌨️ Keyboard Shortcut Manager
📝 Logging
🀱 Menu Bar for macOS, Windows, and Linux
📂 Multi-Window
🖥️ System Tray
🎨 UI components from Shadcn

🚀 Getting Started

Clone this repository

git clone https://github.com/lacymorrow/electron-hotplate.git

Go into the repository
```
cd electron-hotplate
```
Install dependencies
```
npm install
```
Start the development server
```
npm run start
```

📁 Project Structure

src/main: Contains the main process code
src/renderer: Contains the renderer process code (React components)
src/config: Contains configuration files
src/utils: Contains utility functions

📜 Available Scripts

npm run start: Start the app in development mode
npm run package: Build the app for production
npm run lint: Run the linter
npm run test: Run tests

Production

Auto Update

After publishing your first version, you can enable auto-update by uncommenting the update function contents in src/main/auto-update.ts.

Built With

Development

Tailwind CSS

We use Tailwind CSS for styling. See the Tailwind CSS docs for more information.

Some Tailwind plugins have been added for convenience:

Tailwind Animate - tailwindcss-animate
Tailwind Container Queries - @tailwindcss/container-queries
Child selectors to target immediate children like child:w-xl
Don't forget group selectors too: group (Parent) group-hover:bg-gray-100 (Child)

Shadcn

Shadcn is a UI component library for React. See the Shadcn docs for more information. Use npx shadcn@latest add button ... to add a component to your project.

Current installation command (to update all ui components):

npx shadcn@latest add button checkbox dropdown-menu form input menubar radio-group scroll-area select separator sonner switch textarea

To list components with updates: npx shadcn@latest diff

Based on the Electron React Boilerplate, this boilerplate adds UI components from Shadcn, styling with Tailwind CSS, persistance with electron-store, and a structured React context that promotes a data flow from the top down: Main process -> Renderer process.

Features

💬 App and System-wide Notifications
🏃‍♂️ Auto Updater
📦 Built-in Store
🖱️ Context Menu
🌙 Dark Mode
❌ Error Handler
⌨️ Keyboard Shortcut Manager
📝 Logging
🀱 Menu Bar for macOS, Windows, and Linux
📂 Multi-Window
🖥️ System Tray

Getting Started


# Clone this repository
git clone https://github.com/lacymorrow/electron-hotplate.git

# Go into the repository
cd electron-hotplate

# Install dependencies
yarn

# Run the app
yarn start

Production

Auto Update

After publishing your first version, you can enable auto-update by uncommenting the update function contents in src/main/auto-update.ts.

BuiltWith

Development

Tailwind CSS

We use Tailwind CSS for styling. See the Tailwind CSS docs for more information.

Some Tailwind plugins have been added for convenience:

Tailwind Animate - tailwindcss-animate
Tailwind Container Queries - @tailwindcss/container-queries
Child selectors to target immediate children like child:w-xl
Don't forget group selectors too: group (Parent) group-hover:bg-gray-100 (Child)

Shadcn

Shadcn is a UI component library for React. See the Shadcn docs for more information. Use npx shadcn-ui@latest add accordion ... to add a component to your project.

Current installation command (to update all ui components):

npx shadcn-ui@latest add button checkbox dropdown-menu form input menubar radio-group scroll-area select separator sonner switch textarea

To list components with updates: npx shadcn-ui@latest diff

Build for production

npm run package

Important Notes

The src/main/auto-update.ts file is where the auto-updater is configured. Uncomment the update function to enable auto-update after publishing your first version.
The app icon will ALWAYS be the default Electron icon in development. You will need to build the app with npm run package to get a new icon.

🤝 Contributing

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

Electron-React-Boilerplate

See the Electron React Boilerplate docs and guides here

Tutorials

Creating multiple windows: https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/623#issuecomment-1382717291

📄 License

This project is licensed under the CC-BY-NC-SA-4.0 License.

Badges

Extracted from project README