Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jooy2/retron

📑 Vite + React + Electron + Material-UI Template. This is a skeleton template for easily creating React-based Electron projects.
https://github.com/jooy2/retron

builder cross-platform electron electron-template material material-ui material-ui-react mui react react-app react-electron-template redux skeleton template typescript vite vitejs

Last synced: 26 days ago
JSON representation

📑 Vite + React + Electron + Material-UI Template. This is a skeleton template for easily creating React-based Electron projects.

Host: GitHub
URL: https://github.com/jooy2/retron
Owner: jooy2
License: mit
Created: 2021-03-24T05:42:59.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2024-09-22T01:13:51.000Z (about 2 months ago)
Last Synced: 2024-09-28T23:21:14.877Z (about 1 month ago)
Topics: builder, cross-platform, electron, electron-template, material, material-ui, material-ui-react, mui, react, react-app, react-electron-template, redux, skeleton, template, typescript, vite, vitejs
Language: TypeScript
Homepage:
Size: 3.49 MB
Stars: 37
Watchers: 1
Forks: 4
Open Issues: 1
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

![Retron-logo](src/renderer/public/images/retron-logo.webp)

## Vite + Electron + React + Material-UI Template

> [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/retron/blob/master/LICENSE) ![Programming Language Usage](https://img.shields.io/github/languages/top/jooy2/retron) ![Languages](https://img.shields.io/github/languages/count/jooy2/retron) ![Commit Count](https://img.shields.io/github/commit-activity/y/jooy2/retron) ![github repo size](https://img.shields.io/github/repo-size/jooy2/retron) [![Followers](https://img.shields.io/github/followers/jooy2?style=social)](https://github.com/jooy2) ![Stars](https://img.shields.io/github/stars/jooy2/retron?style=social)

This is a skeleton template for easily creating React-based Electron projects.

It is configured to experience fast development and build speed using **[Vite](https://vitejs.dev)** 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` and `Electron`, 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)

```shell
$ npm init retron
```

OR, Click **[Use this template](https://github.com/jooy2/retron/generate)** to instantly create your own project.

OR, Clone this repo using below command.

```shell
$ git clone https://github.com/jooy2/retron
```

Then, install the dependency module.

```shell
# 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:

```shell
$ npm run dev
```

## Build

**Retron** can build targeting Windows 10 or later, macOS 14.x or later, and major Linux distributions.

```shell
# 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.

```json
{
"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.

```shell
$ 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](https://github.com/jooy2/retron/issues). You can also request a pull to fix bugs and add frequently used features.

## License