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.
- 🌟 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
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
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 |
To develop and run your application, you need to run following command.
Start electron application for development :
yarn start
To lint application source code using ESLint via this command :
yarn lint
Customize and package your Electron app with OS-specific bundles (.app, .exe etc)
yarn package
Making is a way of taking your packaged application and making platform specific distributables like DMG, EXE, or Flatpak files (amongst others).
yarn make
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
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
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