Skip to content

TrustworthyDev/RaceLab-ElectronJS

Repository files navigation

Race Lab Apps

First time setup

Install deps

Recommended node version: 18.16.1

yarn

Dev environment

Terminal commands

To install servicestack command line utilities (used for dto generation), install:

  npm install -g @servicestack/cli

Run in dev environment

yarn start

For webpack logs, visit: http://localhost:9000

To restart main process

while running, just type rs on the terminal

To refresh renderer code

just modify the code (JS/TS, HTML or SCSS/CSS)

Make distributable

yarn make

Package the app

yarn package

Project structure

Main process

Located in src/main/*

This code is for setting up the application, no more no less.

Cockpit window

Located in src/renderer/cockpit/*

The cockpit window, basically an electron window that loads React code.

Local server (hidden window)

Located in src/renderer/server/*

An express application that:

  • Works as backend, consume the game's data, convert it and serve it in the right format for front-end widgets.

  • Serves frontend files, to be consumed by the browser using the URL.

Ovelay host window (transparent window)

Located in src/renderer/overlayHost/*

A transparent always-on-top window, that loads React application and display widgets on the screen, also it consumes the information from the backend.

Notices

node-irsdk

To recompile the package for Electron, you need MSBuild tools, and it's a one-time compile task for each dev machine, all you need to do is run the command:

yarn start

and ElectronForge will take care of the compiling process.

You may need to run the following command to install native dependencies

npm install --global --production windows-build-tools
npm install --global node-gyp

Configure refresh on code change

Because ElectronForge does not use webpack-dev-server (which we can tweak its config), and used instead two lightweight packages: webpack-hot-middleware and webpack-dev-middleware, when the code changes, the page fails to reload.

Until they fix this issue, you have to stick with a workaround solution, which is very simple, you just need to modify the line 8 on this file:

./node_modules/webpack-hot-middleware/client.js

from:

  reload: false,

to:

  reload: true,

on every change made to node_modules folder, typically after running yarn add or yarn remove ...etc

Publishing

To publish a new version, simply update the package.json version, then run

yarn pub

NOTICE:

After you run yarn add/remove, you can't directly after it publish make or package, but instead you should run yarn start to rebuild the native modules against electron again, because they got reset when running the first command.