Quiqr Desktop - Electron 29 edition

Finally we kicked off the porting of Quiqr to a recent Electron version. Because of old architecture we were kind of locked in version 9. This project will propably takes some time as we are implementing some other long lastig wishes as well. Here's a short change list:

• Port to update to Electron. At of writing v29
• Port to TypeScript (lift and shift)
• Multi Window Gui

All issues which will be fixed during this port are listed at https://github.com/quiqr/quiqr-desktop/labels/electron29

We used https://github.com/codesbiome/electron-react-webpack-typescript-2024 as a starter. Special thanks to https://github.com/codesbiome getting us started.

---

Electron React Webpack Typescript

A prebuilt project for creating desktop apps using Electron, React, Webpack & Typescript with hot-reload, easy to use custom import aliases & executable builds for distribution.

Special thanks to @guasam for development of Custom Window, Titlebar, UI/UX etc.

Core Features

• 🌟 Electron
• 🌀 TypeScript
• ⚛️ React
• 🥗 SASS/SCSS Loader
• 🎨 CSS Loader
• 📸 Image Loader
• 🆎 Font Loader
• 🧹 ESLint
• 📦 Electron Forge
• 📐 -Custom Window Frame-
• 📐 -Custom Window Titlebar-
• 📐 -Custom Window Menubar-
• 🔱 Webpack & Configuration
• 🧩 Aliases for Project Paths
• 🗡️ Native (node) Modules Support
• 🔥 React Fast Refresh + Webpack HMR
• 🌞 Dark Mode + Light Mode (Theme)
• 🎁 Package Bundling (Distribution / Release)

Custom Aliases for Paths

We can use predefined aliases for import paths already used in this project. Following are the details:

Alias	Target Path
@assets	/assets
@main	/src/main
@renderer	/src/renderer
@common	/src/common
@src	/src
@styles	/src/renderer/styles
@components	/src/renderer/components

Want to use Vite instead of Webpack bundler?

Introducing the ElectroVite project with a brief description below.

Installation

Main version of this project contains files structure in separate context for main and renderer, with custom electron window, titlebar etc.

git clone https://github.com/codesbiome/electron-react-webpack-typescript-2024

OR

Minimal version of ERWT contains very simple project files structure, no custom window, no custom titlebar & menus.

git clone -b minimal https://github.com/codesbiome/electron-react-webpack-typescript-2024

Install dependencies using pnpm or yarn or npm :

# using pnpm
pnpm install

# or using yarn
yarn install

# or using npm
npm install

Start : Development

To develop and run your application, you need to run following command.
Start electron application for development :

yarn start

Lint : Development

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

For further information, you can visit Electron Forge Configuration