Electron App

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

Features

Stands out
- 🔥 Fast and Ready-to-go with a well-thought-out structure
- 🚀 Auto reload for main and Fast Refresh for renderer process
- 🎉 Window and Screen routing included
- 😎 Preload (context bridge) already configured
- 🙀 IPC communication example included
- 🔮 GitHub Action releases with Windows, Mac and Linux binaries
- 🔒 Source Code Protection support
- 🍪 Absolute paths support
Technologies:
- 🔋 Electron
- 🔥 ReactJS
- 🌎 React Router DOM and Electron Router DOM
- 🧐 React Developer Tools
- 💙 TypeScript
- 📦 Electron Vite
- ✨ 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 package.json file in the root directory, you should update some of that settings with your project branding.

Distribution

For all platforms

Note: Check Electron Builder docs for more knowledge

yarn build

For a specific one

yarn build --mac
# OR
yarn build --win
# OR
yarn build --linux

The builded 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

Source Code Protection

This process is done via v8 bytecode compilation, to get more knowledge about it, please, check the Electron Vite docs.

Use the bytecodePlugin from electron-vite to enable it in the electron.vite.config.ts:

import { defineConfig, bytecodePlugin } from 'electron-vite'

export default defineConfig({
  main: {
    plugins: [tsconfigPaths, bytecodePlugin()]
  },

  preload: {
    // Note: you will get the following warning using bytecodePlugin in the preload script in production build: "The vm module of Node.js is deprecated in the renderer process and will be removed", is up to you to keep bytecodePlugin here. Also, keep following the Electron Vite docs for more updates about this plugin!
    plugins: [tsconfigPaths, bytecodePlugin()]
  },

  renderer: {
    // ...
  }
})

Also, sandbox should be false in webPreferences for the windows you are using a preload script like:

const window = createWindow({
  id: 'main',

  webPreferences: {
    preload: join(__dirname, '../preload/index.js'),
    sandbox: false,
  },
})

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 GitHub Sponsors or Patreon
🌟 Giving a star on this repository

7eith/ElectronMusicPlayer