Welcome to Vite Electron React Boilerplate 👋

Develop your Desktop Apps Blazingly Fast🔥 with Vite, Electron + Vitejs + React + Typescript = Awesome❤️

Vite Electron React Boilerplate 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⌨️ million dollar projects 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 Vite Electron React Boilerplate:

• Node.js - Start by going through Node.js Official Website and this StackOverflow Thread, which should get you going with the Node.js platform in no time.

• Electron.js - The best way to understand Electron is through its Official Website, which has a Getting Started guide, You can also go through this TutorialsPoint Guide for more resources.

• React.js - React's Official Website is a great starting point. You can also use W3Schools Popular Guide, and Egghead Videos.

• Vite.js - Vite's Official Website is a great starting point. If your facing bugs and issues checkout the Issue page.

• TypeScript - Go through TypeScript Official Website and proceed to their Official Manual, which should help you understand TypeScript better.

🖥️ Prerequisites

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

• Git - Download & Install Git. OSX and Linux machines typically have this already installed.
• Node.js - Download & Install Node.js and the npm package manager. If you encounter any problems, you can also use this GitHub Gist to install Node.js.

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

⏩ Table of contents

• Before You Begin
• Prerequisites
• Table of contents
• Features
• Getting Started
• Directory Structure
• Quick Start
  • Cloning The GitHub Repository
  • Downloading The Repository Zip File
  • Quick Install
• Starting Development
  • Running Your Application
  • Change Port Number
  • Vscode Debugging
  • Clean Cache
  • Style your Code
  • Git Commits
• Packaging for Production
  • Running in Production mode
  • Debugging in Production mode
  • Debugging in Release Build
• Release a Distribution Version
  • Build for Windows
  • Build for macOS
  • Build for Linux
• Tech Used
• Contributing
• Credits
• Show your support
• Donate
• Authors
• License

🔍 Features

• 🐞 Vscode debugging
• ✨ HMR Using Vite
• 🔥 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

Vite Electron React Boilerplate 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
+│   └── vite.config.ts           Vite Configurations
 │
+├── 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
 │       ├── Components           Your Components here
 │       │   └── Home.tsx         Edit and Save to test HMR
 │       ├── App.tsx              React router source code
 │       └── index.tsx            React index source code
 │
 ├── .editorconfig                Editor configuration
 ├── .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 Vite Electron React Boilerplate:

🌀 Cloning The GitHub Repository

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

# Clone the project
git clone https://github.com/stackoutput-com/vite-electron-react-boilerplate.git <your-project-name>

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

This will clone the latest version of the Vite Electron React Boilerplate repository to a your-project-name folder.

🗃️ Downloading The Repository Zip File

Another way to use the Vite Electron React Boilerplate 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/stackoutput-com/vite-electron-react-boilerplate/archive/refs/heads/main.zip -O vite-electron-react-boilerplate-main.zip; unzip vite-electron-react-boilerplate-main.zip; rm vite-electron-react-boilerplate-main.zip

Don't forget to rename vite-electron-react-boilerplate-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 Vite, 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 install

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

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

Explore configs/vite.config.ts for development environment configuration options.

🛬 Change Port Number

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

Go to 👉 DevConfig.json and change the port number 7070 to your-port-number

🆚 Vscode Debugging

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

you can easily debug this Vite Electron React Boilerplate.

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.

Click the button or press F5 to start debugging

Electron main process Debugging

NOTE: Currently Electron main process (VScode) debugging feature is not available, It will be added soon.

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.

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 Vite Electron React Boilerplate 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 .

🏗️ Tech Used

Vite Electron React Boilerplate Built With

• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 

🤝 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.

💳 Credits

This project is Inspired by the great work of Ajay Kanniyappan.

💖 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

• Website: https://ajaykanniyappan.com
• Twitter: @AjayKanniyappan
• Github: AjayKanniyappan
• LinkedIn: AjayKanniyappan

©️ License

MIT License © Ajay Kanniyappan