Electron App

💅 A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, Prettier, GitHub Action releases and more.

Features

• Stands out
  • 🔥 Ready-to-go with a well-thought-out structure
  • 🚀 Auto reload for main and Fast Refresh for renderer process
  • 🎉 Window and Screen routing included
  • 😎 Bridge already configured
  • 🙀 IPC communication included
  • 🔮 GitHub Action releases with Windows, Mac and Linux binaries
  • 🍪 Absolute paths supported
• Technologies:
  • 🔋 Electron
  • 🔥 ReactJS
  • 🌎 React Router DOM
  • 🧐 React Developer Tools
  • 💙 TypeScript
  • 📦 Webpack
  • ⚡️ SWC as compiler
  • ✨ CSS / SASS modules
  • 💫 Eslint / Prettier / EditorConfig / Husky / lint-staged / Commitlint
  • 📦 Electron Builder
  • 🔮 action-electron-builder

Usage

First, install the dependencies by running on the terminal:

yarn

That done, just run the project with the following command:

yarn dev

Now, look at the app.config.js file in the root directory, you should update some of that settings with your project branding, also you may notice some of that settings comes from the package.json, update it too as you need.

Distribution

For all platforms

Check Electron Builder docs

yarn dist

For a specific one

yarn dist --mac
# OR
yarn dist --win
# OR
yarn dist --linux

The compiled apps will be available on the dist folder.

Releasing

🔥 Note: To be able to perform auto-updates you will need a code signed app, for this purpose you will need to configure it by yourself, so check the electron-builder and action-electron-builder docs please to get know how to do this.

To release your app on a GitHub release with Windows, Mac and Linux binaries, you can perform the following commands:

git pull
yarn make:release

Then, enter the new version of your app, so it will produce the following binaries in a draft release from the action:

• Windows → zip (portable), .exe
• Mac → .zip (app), .dmg
• Linux → AppImage, freebsd, pacman, rpm, deb

In this process, the action will be triggered and the previous command will open the releases and actions page in your browser. When the action is finished, you can click in the releases page and refresh it to see the draft release with the binaries, so you can edit it and release it for your users.

demo.mp4

Documents

Creating Windows

Routing

Structure Overview

FAQ - Frequently Asked Questions

Contributing

Note Contributions are always welcome, but always ask first, — please — before work on a PR.

That said, there's a bunch of ways you can contribute to this project, like by:

• 🪲 Reporting a bug
• 📄 Improving this documentation
• 🚨 Sharing this project and recommending it to your friends
• 💵 Supporting this project on Patreon
• 🌟 Giving a star on this repository

License

MIT © Dalton Menezes