Skip to content

README.md

Latest commit

 

History

History
228 lines (153 loc) · 7.23 KB

README.md

File metadata and controls

228 lines (153 loc) · 7.23 KB

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.

Build Status Github Tag

✨ 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

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.


Build Status Github Tag

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

📄 License

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