Vite + Electron + React + Material-UI Template
This is a skeleton template for easily creating React-based Electron projects.
It is configured to experience fast development and build speed using Vite bundler. As a bonus, it includes several React utilities and layout configurations.
Advantages of use
- ✅ You can build immediately without any presets, so you can develop quickly.
- ✅ It is being maintained quickly to be compatible with the latest
React
andElectron
, as well as many modules. - ✅ There is no need to worry about layout and data management by using various additional templates.
Features
- ⚡️ Rapid development through hot-reload
- ⚡️ Cross-platform development and build support
- ⚡️ Support for automated application testing
- ⚡️ TypeScript support
- ⚡️ Multilingual support
- ⚡️ Support for themes (dark & light)
- ⚡️ Basic layout manager
- ⚡️ Global state management through the Redux store
- ⚡️ Quick support through the GitHub community
Components
-
For compile & build
vite
electron
-
electron-builder
(Package builder)
-
For web development framework
react
react-dom
react-router-dom
-
@redux/toolkit
&react-redux
(Global state management) typescript
-
For CSS Design
-
@mui/material
(Material Design CSS Framework) @emotion/react
-
-
For Multilingual language support
-
i18next
(Multilingual translation)
-
-
For development utils
-
eslint
(Code syntax checking) eslint-plugin-react-hooks
prettier
-
-
For testing
playwright
Installation
You can easily clone a repository with just the npm command. (Recommend)
$ npm init retron
OR, Click Use this template to instantly create your own project.
OR, Clone this repo using below command.
$ git clone https://github.com/jooy2/retron <PROJECT_NAME>
Then, install the dependency module.
# via npm
$ npm i
# via yarn (https://yarnpkg.com)
$ yarn install
# via pnpm (https://pnpm.io)
$ pnpm i
You can test your project in the development environment using the following command:
$ npm run dev
Build
Retron can build targeting Windows 10 or later, macOS 14.x or later, and major Linux distributions.
# For Windows (.exe, .appx)
$ npm run build:win
# For macOS (.dmg)
$ npm run build:mac
# For Linux (.rpm, .deb, .snap)
$ npm run build:linux
The built packages can be found in release/{version}
location.
Build settings for projects that use Native Node modules
For projects that use the Native Node Module, add the following script to your package.json
: When installing dependencies, electron-builder
will take care of any modules that require rebuilding.
{
"scripts": {
"postinstall": "electron-builder install-app-deps"
}
}
What do I need to do for a multi-platform build?
macOS is recommended if you want to build multiple platforms simultaneously on one platform. Because it can be configured with just a few very simple settings.
You can perform multi-platform builds at once with the following command. Alternatively, you can just do it for the OS you want via the individual build commands above.
$ npm run build
Looking for Electron templates made with Vue?
Also check out the Vutron
project, which consists of Vite + Vue 3 + Vuetify + Electron.
https://github.com/jooy2/vutron
Contribute
You can report issues on GitHub Issue. You can also request a pull to fix bugs and add frequently used features.
License
Copyright © 2021-2023 Jooy2 <jooy2.contact@gmail.com> Released under the MIT license.