The Complete Electron, React Template for Robust Multi-Platform Apps in Production

Overview

Welcome to React Electron Template ๐Ÿ‘‹

Documentation Version License: MIT

React Electron Template is help you to build multi-platform desktop apps easier. Don't worry about the configuration ๐Ÿ”จ this template will take care of that, focus on your codes โŒจ๏ธ and project ideas ๐Ÿ’ก . The idea is to solve the common issues with connecting those frameworks, build a robust Template to support daily development needs, and help developers use better practices while working with popular JavaScript components.

๐Ÿ“š Before You Begin

Before you begin we recommend you read about the basic building blocks that assemble a React Electron Template:

๐Ÿ–ฅ๏ธ Prerequisites

Make sure you have installed all of the following prerequisites on your development machine:

NOTE: This project requires NodeJS (version 14 or later) and NPM. Node and NPM are really easy to install.

โฉ Table of contents

๐Ÿ” Features

  • ๐Ÿž Vscode debugging
  • ๐Ÿ”ฅ Hot Reload
  • ๐Ÿ“ฆ Packaging for Production
  • ๐ŸŽฏ Make Development simple
  • ๐Ÿ’ช Eslint, Prettier and Airbnb make your code stronger
  • ๐Ÿ’ฝ local Storage using Electron-Store and Auto updater using Electron-Updater
  • ๐Ÿ–ฅ Build your application for multi-platform

๐Ÿƒโ€โ™‚๏ธ Getting Started

These instructions will get you a copy of the project and running on your local machine for development and testing purposes. See Distribution for notes on how to Package the Application for Desktop.

๐Ÿ“‚ Directory Structure

React Electron Template files and folder structure.

+โ”œโ”€โ”€ .husky                       Automate your git commits
+โ”œโ”€โ”€ .vscode                      vscode debug folder and extension support
+โ”œโ”€โ”€ app                          Your application Build folder
 โ”‚   โ”œโ”€โ”€ dist                     Your generated source code folder
+โ”‚   โ””โ”€โ”€ package.json             Your runnable application package.json (If you want native node module you need to add here)
 โ”‚
+โ”œโ”€โ”€ assets                       Project assets folder
 โ”‚   โ”œโ”€โ”€ icons                    Icon sets folder
 โ”‚   โ”‚  โ””โ”€โ”€ NxN.png               Different pixel png's
 โ”‚   โ”œโ”€โ”€ icon.icns                Icon for the application on macOS and Linux
 โ”‚   โ””โ”€โ”€ icon.ico                 Icon for the application
 โ”‚
+โ”œโ”€โ”€ configs                      configuration folder
 โ”‚
+โ”œโ”€โ”€ release                      your application release folder
+โ”‚   โ””โ”€โ”€ build                    Generated after production build, contains executables
 โ”‚       โ”œโ”€โ”€ {os}-unpacked        Contains unpacked application executable
 โ”‚       โ””โ”€โ”€ Setup.{ext}          Installer for the application
 โ”‚
+โ”œโ”€โ”€ src                          Source code folder
+โ”‚   โ”œโ”€โ”€ main                     Electron related code
 โ”‚   โ”‚   โ”œโ”€โ”€ main.ts              Main process source code
 โ”‚   โ”‚   โ””โ”€โ”€ preload.ts           Preload scripts source code
 โ”‚   โ”‚
+โ”‚   โ””โ”€โ”€ renderer                 Renderer source code, your React application
 โ”‚        โ”œโ”€โ”€ App.tsx             React router source code
 โ”‚        โ””โ”€โ”€ index.tsx           React index source code
 โ”‚
 โ”œโ”€โ”€ .eslintrc.json               Eslint configuration
 โ”œโ”€โ”€ .prettierrc                  prettier code formatter
+โ”œโ”€โ”€ DevConfig.json               React development port
+โ”œโ”€โ”€ electron-builder.yml         Electron builder configuration
+โ”œโ”€โ”€ package.json                 Package.json for development
 โ”œโ”€โ”€ tsconfig.json                TypeScript Configuration
+โ””โ”€โ”€ tsconfig.node.json           TypeScript paths

๐Ÿ›ซ Quick Start

There are several ways you can get the React Electron Template:

๐ŸŒ€ Cloning The GitHub Repository

The recommended way to get React Electron Template is to use git to directly clone the repository:

# Clone the project
git clone https://github.com/AjayKanniyappan/react-electron-template.git <your-project-name>

# Enter the project directory
cd <your-project-name>

This will clone the latest version of the React Electron Template repository to a react-electron-template folder.

๐Ÿ—ƒ๏ธ Downloading The Repository Zip File

Another way to use the React Electron Template is to download a zip copy from the main branch on GitHub. You can also do this using the wget command:

wget https://github.com/AjayKanniyappan/react-electron-template/archive/refs/heads/main.zip -O react-electron-template-main.zip; unzip react-electron-template-main.zip; rm react-electron-template-main.zip

Don't forget to rename react-electron-template-main after your project name.

๐Ÿงฐ Quick Install

Once you've downloaded the Template and installed all the prerequisites, you're just a few steps away from starting to develop your Electron, React application.

The Template comes pre-bundled with a package.json file that contain the list of modules you need to start your application.

To install the dependencies, run this in the application folder from the command-line:

# Install dependency
npm install

Or if you prefer using Yarn:

# Install dependency
yarn add

This command does a few things:

  • First it will install the dependencies needed for the application to run.
  • If you're running in a development environment, it will then also install development dependencies needed for testing and running your application.

๐Ÿ‘จโ€๐Ÿ’ป Starting Development

Use your favorite JavaScript Package Managers npm or yarn or pnpm

๐Ÿƒ Running Your Application

Run your application using npm:

npm start

Or if you prefer using Yarn:

yarn start

image

Your React application should run on port http://localhost:5050 on top of Electron with the development environment configuration.

Explore configs/webpack.renderer.dev.ts for development environment configuration options.

๐Ÿ›ฌ Change Port Number

If the localhost 5050 port number already in use! or if you like to change your React application number.

Go to ๐Ÿ‘‰ DevConfig.json and change the port number 5050 to your-port-number

Untitled-3

๐Ÿ†š Vscode Debugging

This guide goes over how to start VSCode debugging your React, Electron Project.

you can easily debug this react-electron-template.

To bring up the Run and Debug view, select the Run and Debug icon in the Activity Bar on the side of VS Code. You can also use the keyboard shortcut Ctrl+Shift+D.

Untitled-3

Click the button or press F5 to start debugging

Electron main process Debugging

If you want to debug your ElectronJS code in Vscode, Go to Run and debug section or use the keyboard shortcut Ctrl+Shift+D.

  • Add break ๐Ÿšง points ๐Ÿ›‘ in your code or files.
  • Click green button to run debug or press F5 to start debugging.

Untitled-2

Electron renderer process Debugging

If you want to debug your ReactJS also called renderer code in Vscode, Go to Run and debug section or use the keyboard shortcut Ctrl+Shift+D.

  • Add break ๐Ÿšง points ๐Ÿ›‘ in your code or files.
  • Change the Electron:main to Electron:renderer to debug the renderer process.
  • Click green button to run debug or press F5 to start debugging.

Untitled-4

NOTE: First run Electron:main then only you can debug the Electron:renderer process.

๐Ÿงน Clean Cache

If you want clean the cache files and node_modules cache run this below command ๐Ÿ‘‡ :

npm run clean

NOTE: It will remove your node_module folder, build files and package-lock.json files.

Or if you prefer to clean only build files and folder run this below command ๐Ÿ‘‡ :

npm run clean:build

Or if you prefer to clean only dist files and folder run this below command ๐Ÿ‘‡ :

npm run clean:dist

๐Ÿ’ˆ Style your Code

The React Electron Template has Eslint, Prettier and Airbnb Configurations, this will help you to Style your code and syntax check and more.

Eslint will check syntax, find problems, and enforce code style of your code.

Prettier will format your code style.

All you have to do is run this below command ๐Ÿ‘‡ :

npm run lint

NOTE: This command show you the warnings and errors in your code.

๐Ÿ›ฐ๏ธ Git Commits

Automate your Git commits using Husky, and don't commit or push the bad code in git.

Husky improves your commits and more, You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks.

Run below command ๐Ÿ‘‡ to prepare Husky:

npm run prepare

See docs and more about Husky.

That's it! Your application should be running. To proceed with your development, check the other sections in this documentation. If you encounter any problems, Feel free to check issues page.

โšก Packaging for Production

This documentation will teach you how to move your Code on Production.

๐Ÿƒโ€โ™‚๏ธ Running in Production mode

To run your code on production mode run this command ๐Ÿ‘‡ :

npm run prod

NOTE: It will run both Electron, React code in production mode.

๐Ÿž Debugging in Production mode

If you need to debug your application on production mode run this ๐Ÿ‘‡ command and it will show you the Electron DevTools for debugging.

npm run prod:debug

NOTE: Its only for testing purpose.

๐Ÿž Debugging in Release Build

If you want to test your executable or installer application, just run this ๐Ÿ‘‡ command and it will show you the Electron DevTools for debugging.

npm run build:debug

NOTE: This is testing build only, don't move it for Distribution.

๐Ÿ“ฆ Release a Distribution Version

This guide will teach you how to build and distribute your application for multi-platform, It time to release your million dollar projects.

NOTE: To avoid Unknown publisher error's you need to Code Signing on your project for more read this Documentation .

๐Ÿ–ฅ๏ธ Build for Windows

Once your app is ready for production or you completed a development process, To package and distribute your application for Windows Platform, you need to re-brand it. To do this below ๐Ÿ‘‡ :

  • Go to electron-builder.yml change the name, appID, icon and what are the configuration you want.

  • Also change the package.json name, version and your what needs.

  • All you finish the process, you need to run this command ๐Ÿ‘‡ it will make you the build for distribution file for Windows:

npm run make:win

NOTE: If you want to publish your application in Windows Store kindly read this ๐Ÿ™ Documentation .

๐ŸŽ Build for macOS

Once your app is ready for production or you completed a development process, To package and distribute your application for macOS Platform, you need to re-brand it. To do this below ๐Ÿ‘‡ :

  • Go to electron-builder.yml change the name, appID, icon and what are the configuration you want.

  • Also change the package.json name, version and your what needs.

  • All you finish the process, you need to run this command ๐Ÿ‘‡ it will make you the build for distribution file for macOS:

npm run make:mac

NOTE: If you want to publish your application in Mac App Store kindly read this ๐Ÿ™ Documentation .

๐Ÿง Build for Linux

Once your app is ready for production or you completed a development process, To package and distribute your application for Linux Platform, you need to re-brand it. To do this below ๐Ÿ‘‡ :

  • Go to electron-builder.yml change the name, appID, icon and what are the configuration you want.

  • Also change the package.json name, version and your what needs.

  • All you finish the process, you need to run this command ๐Ÿ‘‡ it will make you the build for distribution file for Linux:

npm run make:linux

NOTE: If you want to publish your application in Snapcraft kindly read this ๐Ÿ™ Documentation .

๐Ÿ—๏ธ Built With

React Electron Template Uses













๐Ÿค Contributing

Contributions, issues and feature requests are welcome! Just be sure to read the contributing document to get started. Feel free to check issues page.

๐Ÿ’– Show your support

I hope ๐Ÿ™ it will helped you! Give a โญ๏ธ to support this project!

If you like ๐Ÿ’— the project, there is other way to support us

  • Tweet about it
  • Refer this project in your project's readme
  • Mention the project at local meetups and tell your friends/colleagues

โ˜• Donate

Donations will help us to ensure the following:

  • โšก Quick responses to issues, bug reports and help requests
  • โž• Adding new features
  • โš’๏ธ Long term maintenance of the project

๐Ÿ› ๏ธ Author

๐Ÿ‘จโ€๐Ÿ’ป Ajay Kanniyappan

ยฉ๏ธ License

MIT License ยฉ Ajay Kanniyappan

You might also like...
โšก๏ธ Super-fast electron + vite boilerplate. Support React/Vue template.
โšก๏ธ Super-fast electron + vite boilerplate. Support React/Vue template.

electron-vite-template Run Setup # clone the project git clone [email protected]:caoxiemeihao/electron-vite-template.git # enter the project directory c

This project is the base template for developing Electron applications using React.

Electron React Template This project is the base template for developing Electron applications using React. React Scripts react-start react-build reac

Template for: Create React App with Typescript & Electron Forge

Electron Forge & Create React App Typescript Template Template for creating Electron apps using two popular frameworks with no extra dependencies: Cre

Boilerplate to build Cross-Platform Apps with Expo and React Native

Boilerplate to build Cross-Platform Apps with Expo and React Native

A Foundation for Scalable Cross-Platform Apps
A Foundation for Scalable Cross-Platform Apps

Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh. Install If you have installation or compilation issues

๐Ÿ›ก๏ธ โš›๏ธ A simple, scalable, and powerful architecture for building production ready React applications.

๐Ÿ›ก๏ธ โš›๏ธ A simple, scalable, and powerful architecture for building production ready React applications.

A well-structured production-ready frontend boilerplate for React and Next.js

superplate-core-plugins This is the source repository for superplate's core plugins. Plugins UI Frameworks Tailwind CSS React Bootstrap Chakra UI Ant

dApp Starter Kit is flexible production grade Web3 boilerplate with Next.js, React, Material Design and Typescript

dApp Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3-react (beta).

Web3 Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3modal
Web3 Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3modal

Web3 Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3modal

Owner
Ajay
JavaScript enthusiast๐Ÿ‘จโ€๐Ÿ’ป, Full Stack Developer๐Ÿ’ผ, Creator of โค๏ธ@stackoutput-com.
Ajay
Electron-react-template - Electron React Template uses React Router and Styled Components

Electron React Template This template uses Create React App, Electron and Electr

Pedro Bzz 7 May 17, 2022
Vite-solid-electron - A simple Vite, SolidJS, Electron integration template

vite-solid-electron Overview Very simple Vite, SolidJS, Electron integration tem

Christian Hansen 25 Dec 18, 2022
Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh.

Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh.

Heikki Lotvonen 2 Oct 6, 2021
React-electron - dagimsolomon: minimalstic setup of Reactjs with electron

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 2 Jan 23, 2022
:electron: Electron + Vite + React + Sass boilerplate.

electron-vite-react English | ็ฎ€ไฝ“ไธญๆ–‡ ?? Overview ?? Ready out of the box ?? Based on the official template-react-ts, project structure will be familiar

Electron โšก๏ธ Vite 652 Jan 3, 2023
Build-electron - Use ES modules in Electron

build-electron Use ES modules in Electron now! build-electron is a simple build

Mikael Finstad 19 Dec 21, 2022
Electron-app - A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript

Electron App ?? โ€A ready-to-go with a well-thought-out structure Electron app bo

Dalton Menezes 155 Dec 29, 2022
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

Mihail Diordiev 487 Jan 6, 2023
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

Mihail Diordiev 488 Sep 8, 2022
Www-react-postgres - A complete template for 2022 focused on around React, Postgres and various web3 integrations

WWW-REACT-POSTGRES What is this for? This template is for making a good website

jim 45 Dec 22, 2022