More Premium Hugo Themes Premium React Themes

Electron React Typescript

Electron boilerplate with React, Redux, and TypeScript

Electron React Typescript

Electron boilerplate with React, Redux, and TypeScript

Author Avatar Theme by robinfr
Github Stars Github Stars: 429
Last Commit Last Commit: Feb 6, 2020 -
First Commit Created: Jun 19, 2023 -
Electron React Typescript screenshot

Overview

electron-react-typescript is a boilerplate that provides an easy start with TypeScript, React, and Electron. It is an Electron application boilerplate based on React, Redux, and Webpack, created for rapid application development using TypeScript.

Features

  • TypeScript: Allows for type-checking and provides better code readability and maintainability.
  • React: A popular JavaScript library for building user interfaces.
  • Electron: A framework for building cross-platform desktop applications.
  • Redux: A predictable state container for JavaScript applications.
  • Webpack: A module bundler that helps package applications.
  • Jest: A JavaScript testing framework for React applications.

Installation

To install electron-react-typescript, follow these steps:

  1. Clone the repository with Git:
git clone <repository-url>
  1. Install the dependencies by running the following command:
npm install

Usage

To use electron-react-typescript, follow these steps:

  1. Start both processes simultaneously in different console tabs:
npm run start
  1. This will start the application with hot-reload, allowing you to instantly start developing your application.

Alternatively, you can start both processes in a single process by running the following command:

npm run start-singe-process

Packaging

electron-react-typescript uses Electron Builder to build and package the application. By default, you can run the following command to package for your current platform:

npm run package

This will create an installer for your platform in the “releases” folder.

You can also make builds for specific platforms or multiple platforms by using the options found in the project’s documentation. For example, to build for all platforms (Windows, Mac, Linux), you can use the following command:

npm run package-all

Husky and Prettier

This project comes with both Husky and Prettier set up to ensure a consistent code style. To change the code style, you can modify the configuration in the .prettierrc file.

If you want to remove Husky and Prettier from the project, you can follow these steps:

  • Remove the “precommit” command from the scripts section in package.json.
  • Remove the “lint-staged” section from package.json.
  • Remove “lint-staged”, “prettier”, “eslint-config-prettier”, and “husky” from the devDependencies section in package.json.
  • Remove all mentions of Prettier from the “extends” section in .eslintrc.json.

Summary

electron-react-typescript is a boilerplate that provides an easy start for developing desktop applications using TypeScript, React, and Electron. It offers features such as hot-reloading, packaging for different platforms, and consistent code style enforcement. It is based on the Electron React Boilerplate project and React Redux TypeScript guide and is available under the MIT license.