Git Product home page Git Product logo

retronbp's Introduction

Retron-logo

Vite + Electron + React + Material-UI Template

license Programming Language Usage Languages Commit Count github repo size Followers Stars

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 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)

$ 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-2024 Jooy2 <[email protected]> Released under the MIT license.

retronbp's People

Contributors

vent3st avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.