Project Commands

Project Commands

Here are all commands listed that can be used in the default project with a short description about their behavior.

To call one of the following scripts, replace the first part namely npm: with npm run to execute a defined script.

npm:prestart

It calls npm:build:main and npm:build:preload concurrently to generate valid JavaScript code from the TypeScript sources. This is done via webpack.

npm:start

Before the app can be started in development mode, it first must compile the TypeScript sourcecode for the electron main process and the preload script into executable JavaScript code. This is done via the npm:prestart script in the package.json.

After the compilation in prestart is done, there are two npm scripts started concurrently, the npm:start:main and the npm:start:renderer. If one of the processes stops, the other process with be stopped, too.

This two processes start the webpack development server from react-scripts and the Electron application.

npm:start:main

Waits on the npm:start:renderer script to open a port on localhost:3000. After the port has opened, the script starts the main Electron process loading the main process script file electron.js from the build folder which loads the compiled content from the webpack development server on http://localhost:3000/ started via npm:start:renderer.

npm:start:renderer

Runs the app in the development mode. It compiles the React app in development mode and publishes the changes on http://localhost:3000/ with a webpack development server.

It calls the start part from react-scripts to build the React app.

npm:build

Calls the scripts npm:build:main, npm:build:preload and npm:build:renderer concurrently for better build performance.

npm:build:main

Compiles the Electron main process script from TypeScript sourcecode to valid JavaScript code using webpack.

Webpack is configured through the webpack.main.js. The entry file is electron/main/electron.ts and it uses the ts-loader to compile it. All code will be packaged to the build folder in the electron.js executable script which will be used from the npm:start:main script and the packaged application.

npm:build:preload

Compiles the Browser Window preload script from TypeScript sourcecode to JavaScript code using webpack.

Webpack is configured through the webpack.preload.js. The entry file is the electron/preload/preload.ts and it uses the ts-loader to compile it. All code will be packages to the build folder in the preload.js script which will be preloaded by any opened Electron browser window.

npm:build:renderer

Builds the React app in production mode to the build folder. It correctly bundles React and optimizes the build for the best performance.

It calls the build part from react-scripts to packages the React app.

npm:postinstall

Installs app dependencies from electron-builder.

npm:test

Launches the test runner in the interactive watch mode. It calls the test part from react-scripts to internally start jest in watch mode.

npm:style

Styles and formats all project files with the defined code style.

It uses Prettier, an opportunistic code formatter, configured via the .prettierrc.js file.

Please also take a look at the .editorconfig, which defines the default formatting in your editor.
For more information, take a look at their landing page.

npm:lint

Checks the syntax of the sourcecode with ESLint.

ESLint can be configured through the property eslintConfig in the package.json.

npm:package

Builds the app as described in npm:build and creates packages for different operating systems.

To package for only one operating system there are separate commands for each architecture:

command	operating system
npm:package:linux	Linux like OS
npm:package:win	Windows like OS
npm:package:mac	macOS like OS

npm:package:linux

Builds the app as described in npm:build and creates packages for Linux like operating systems.

npm:package:win

Builds the app as described in npm:build and creates packages for Windows like operating systems.

npm:package:mac

Builds the app as described in npm:build and creates packages for macOS like operating systems.