electron-vue-vite-ts: A TypeScript repository from wijiler

A simple starter template for a Vue3 + Electron TypeScript based application, including ViteJS, Rust-Neon-Bindings and Electron Builder.

THE STACK

Tech	Purpose	Descrption
Electron-Builder	Bring web like developpement to chrome based application.	The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on Node.js and Chromium and is used by the Atom editor and many other apps.
VueJS/core	Vue is primarily used to build web interfaces and one-page applications. In saying that, it can also be applied to both desktop and mobile app development thanks to the HTML extensions and JS base working in tandem with an Electron framework – making it a heavily favoured frontend tool.	A type system like TypeScript can detect many common errors via static analysis at build time. This reduces the chance of runtime errors in production, and also allows us to more confidently refactor code in large-scale applications. TypeScript also improves developer ergonomics via type-based auto-completion in IDEs.
Neon-Bindings	Neon is a library and toolchain for embedding Rust in your Node.js apps and libraries.	With Neon, you can create native Node modules like you might in C or C++, but with none of the headaches and anxiety associated with unsafe systems programming. Embedding Rust in Node can be useful for many reasons: Raw performance Threads and parallel programming Access to Rust’s package ecosystem Access to native OS-specific libraries
ViteJs	Bundling: using tools that crawl, process and concatenate our source modules into files that can run in the browser. Vite improves the dev server start time by first dividing the modules in an application into two categories: dependencies and source code.	At the very basic level, developing using Vite is not that much different from using a static file server. However, Vite provides many enhancements over native ESM imports to support various features that are typically seen in bundler-based setups.

RELEASES

Os	Link
Linux
Windows	Not building Yet!
MacOs	Not building Yet!

About

This template utilizes ViteJS for building and serving your (Vue powered) front-end process, it provides Hot Reloads (HMR) to make development fast and easy ⚡

Building the Electron (main) process is done with Electron Builder, which makes your application easily distributable and supports cross-platform compilation 😎

Getting started

Click the green Use this template button on top of the repository, and clone your own newly created repository.

Or..

Clone this repository: git clone git@github.com:Deluze/electron-vue-template.git

Install dependencies ⏬

npm install

Start developing ⚒️

npm run dev

Additional Commands

npm run dev # starts application with hot reload
npm run build # builds application, distributable files can be found in "dist" folder

# OR

npm run build:win # uses windows as build target
npm run build:mac # uses mac as build target
npm run build:linux # uses linux as build target

Optional configuration options can be found in the Electron Builder CLI docs.

Project Structure

- scripts/ # all the scripts used to build or serve your application, change as you like.
- src/
  - main/ # Main thread (Electron application source)
  - renderer/ # Renderer thread (VueJS application source)

Using static files

If you have any files that you want to copy over to the app directory after installation, you will need to add those files in your src/main/static directory.

Referencing static files from your main process

/* Assumes src/main/static/myFile.txt exists */

import { app } from "electron";
import { join } from "path";
import { readFileSync } from "fs";

const path = join(app.getAppPath(), "static", "myFile.txt");
const buffer = readFileSync(path);

Releasing When you want to create a new release, follow these steps:

Update the version in your project's package.json file (e.g. 1.2.3) Commit that change (git commit -am v1.2.3) Tag your commit (git tag v1.2.3). Make sure your tag name's format is v*.*.*. Your workflow will use this tag to detect when to create a release Push your changes to GitHub (git push && git push --tags) After building successfully, the action will publish your release artifacts. By default, a new release draft will be created on GitHub with download links for your app. If you want to change this behavior, have a look at the electron-builder docs.

wijiler/electron-vue-vite-ts