ElectroVite, React apps with Electron & ViteJS

A prebuilt project for creating desktop apps using Electron, React, ViteJS with blazing fast hot-reload, easy to use custom import aliases & executable builds for distribution.

Features

• 🌟 Electron
• ⚛️ ReactJS
• ⚡ ViteJS
• 🌀 TypeScript or JavaScript
• 🎨 CSS / SASS / SCSS
• 📸 Images
• 🆎 Fonts
• 🧹 ESLint
• 📦 Electron Forge
• 🧩 Custom Aliases for imports
• 🔥 React Fast Refresh
• 🎁 Package Bundling (Distribution / Release)
• 🔦 Easy Directory Structure
• ⚡ Blazing Fast Hot Reload from ViteJS
• 🤖 Native Node Modules Support
• 👍🏼 Dedicated Vite Configurations

Installation

Clone the repository:

git clone https://github.com/guasam/electrovite-react

Install package dependencies using pnpm or yarn or npm :

# using yarn
yarn install

# or using pnpm
pnpm install

# or using npm
npm install

If you notice any errors when using pnpm package manager for this project, try to remove existing node_modules directory and install the pacakges using :

pnpm i --shamefully-hoist

Custom aliases to import Components, Styles & Assets.

Ready to use aliases for importing modules, assets, stylesheets etc.

Example:

// import App from './src/renderer/components/App'
import App from '$components/App';

// import './src/renderer/styles/app.scss'
import '$styles/app.scss';

Available Aliases:

Alias	Target Path
$src	./src
$assets	./assets
$main	./src/main
$renderer	./src/renderer
$components	./src/renderer/components
$styles	./src/renderer/styles

Start Development

To develop and run your application, you need to run following command.
Start electron application for development :

yarn start

Linting

To lint application source code using ESLint via this command :

yarn lint

Package : Production

Customize and package your Electron app with OS-specific bundles (.app, .exe etc)

yarn package

Make : Production

Making is a way of taking your packaged application and making platform specific distributables like DMG, EXE, or Flatpak files (amongst others).

yarn make

Publish : Production

Publishing is a way of taking the artifacts generated by the make command and sending them to a service somewhere for you to distribute or use as updates. (This could be your update server or an S3 bucket)

yarn publish

Packager & Makers Configuration

This provides an easy way of configuring your packaged application and making platform specific distributables like DMG, EXE, or Flatpak files.

This configurations file is available in :

tools/forge/forge.config.js

Vite Configurations

All vite configurations are available for main, preload & renderer at:

tools/vite/vite.main.config.ts
tools/vite/vite.preload.config.ts
tools/vite/vite.renderer.config.ts