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