Vitron 🖥️

A library to build and develop desktop apps with vite and electron 🔥.

Features

• Hot Module Replacement

Table of Contents

• Installation
• Setup
  • Frameworks
• Usage
• Utilities
• License

Installation

npm install --save vitron

Setup

To init a project folder with the necessary files, run the command:

npx vitron@latest init

This will create the following files/directories, if they do not already exist:

• src
  • main
    • index.ts
  • preload
    • index.ts
  • renderer
    • main.ts
    • index.html
• .electron-builder.yml

After the directory structure has been created, the dependencies must be installed using a package manager like npm, pnpm, .... In the following example, npm is used:

npm install

The default location of the main, preload and renderer directory can be changed with a configuration file in the root directory of the project.

Therefore, create a vitron.config.js file in the root folder with the following content:

module.exports = {
    mainDirectory: 'src/main',
    preloadDirectory: 'src/preload',
    rendererDirectory: 'src/renderer',
}

Frameworks

Various frontend frameworks, such as Nuxt.js and Next.js, can be used out of the box and do not require any special configuration 🎉. The framework files only need to be placed in the rendererDirectory.

Usage

In a project where Vitron is installed, the vitron binary can be used as npm script. Alternatively run it directly with npx vitron. Here are the default npm scripts in a scaffolded Vitron project:

The best way to use the following commands, is by creating shortcuts in the package.json file.

{
    "scripts": {
        "dev": "vitron dev",
        "build": "vitron build"
    }
}

Utilities

Vitron provides different utilities for the main, preload and renderer code.

Main

For the main code, the import path vitron/main is provided.

serve

Serve the renderer app (ink. static assets) for production and development.

import { serve } from 'vitron/main';
import { BrowserWindow } from 'electron';

const mainWindow = new BrowserWindow({
    /* ... */
});

await serve(mainWindow, {
    directory: path.join(`${__dirname}/../renderer/`),
    port: process.env.PORT,
});

To see an exemplary use, the following example can be used as a basis examples/vanilla/src/main/index.ts.

Preload

For the preload code, the import path vitron/preload is provided.

provide

Simple abstraction to expose an API to the renderer process.

import { provide } from 'vitron/preload';

provide('foo', 'bar');

To see an exemplary use, the following example can be used as a basis examples/vanilla/src/preload/index.ts.

Renderer

For the preload code, the import path vitron/renderer is provided.

inject

Simple abstraction to inject an API from the preload script.

import { inject } from 'vitron/renderer';

const foo = inject<string>('foo');
console.log(foo);
// bar

To see an exemplary use, the following example can be used as a basis examples/vanilla/src/renderer/index.ts.

License

Made with 💚

Published under MIT License.