Skip to content

Latest commit

 

History

History
166 lines (111 loc) · 3.35 KB

README.md

File metadata and controls

166 lines (111 loc) · 3.35 KB
Raw

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