search

guasam / electrovite-react

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.
MIT License
73 stars 6 forks source link
electron-app-starter electron-fast-hmr electron-hmr electron-main-hmr electron-vite electron-vite-react electron-vitejs electronjs reactjs starterkit-electron-react vitejs

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


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