Electron Bones 🔥

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

1. Clone this repository

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

2. Go into the repository

   cd electron-hotplate
   

3. Install dependencies

   npm install
   

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

• Electron
• React
• React Router
• Tailwind CSS
• Shadcn
• TypeScript

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

• Electron
• React
• React Router
• Tailwind CSS
• Shadcn
• TypeScript

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.