https://github.com/guasam/electrovite-react
Boilerplate project for making desktop Electron apps with ReactJS, Vite bundler for blazing fast hot-reload and easy to implement IPCs
https://github.com/guasam/electrovite-react
electron-app-starter electron-fast-hmr electron-hmr electron-main-hmr electron-vite electron-vite-react electron-vitejs electronjs reactjs starterkit-electron-react vitejs
Last synced: 11 months ago
JSON representation
Boilerplate project for making desktop Electron apps with ReactJS, Vite bundler for blazing fast hot-reload and easy to implement IPCs
- Host: GitHub
- URL: https://github.com/guasam/electrovite-react
- Owner: guasam
- License: mit
- Created: 2023-04-26T11:58:03.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-06T13:41:24.000Z (almost 3 years ago)
- Last Synced: 2025-04-08T18:54:25.900Z (about 1 year ago)
- Topics: electron-app-starter, electron-fast-hmr, electron-hmr, electron-main-hmr, electron-vite, electron-vite-react, electron-vitejs, electronjs, reactjs, starterkit-electron-react, vitejs
- Language: TypeScript
- Homepage:
- Size: 340 KB
- Stars: 72
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/guasam/electrovite-react
```
Install package dependencies using [pnpm](https://pnpm.io/) or [yarn](https://www.npmjs.com/package/yarn) or [npm](https://www.npmjs.com/) :
```bash
# 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 :
```bash
pnpm i --shamefully-hoist
```
## Custom aliases to import Components, Styles & Assets.
Ready to use aliases for importing modules, assets, stylesheets etc.
Example:
```ts
// 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 :
```bash
yarn start
```
## Linting
To lint application source code using ESLint via this command :
```bash
yarn lint
```
## Package : Production
Customize and package your Electron app with OS-specific bundles (.app, .exe etc)
```bash
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).
```bash
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)
```bash
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 :
```bash
tools/forge/forge.config.js
```
## Vite Configurations
All vite configurations are available for main, preload & renderer at:
```bash
tools/vite/vite.main.config.ts
tools/vite/vite.preload.config.ts
tools/vite/vite.renderer.config.ts
```