-
Notifications
You must be signed in to change notification settings - Fork 0
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.
It calls npm:build:main
and npm:build:preload
concurrently to generate valid JavaScript code from the TypeScript sources.
This is done via webpack.
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.
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
.
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.
Calls the scripts npm:build:main
, npm:build:preload
and npm:build:renderer
concurrently for better build performance.
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.
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.
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.
Installs app dependencies from electron-builder.
Launches the test runner in the interactive watch mode.
It calls the test part from react-scripts
to internally start jest in watch mode.
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.
Checks the syntax of the sourcecode with ESLint.
ESLint can be configured through the property eslintConfig
in the package.json
.
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 |
Builds the app as described in npm:build
and creates packages for Linux like operating systems.
Builds the app as described in npm:build
and creates packages for Windows like operating systems.
Builds the app as described in npm:build
and creates packages for macOS like operating systems.
Generate a repository based on electron-react-boilerplate
Developed and maintained by fliegwerk: https://www.fliegwerk.com
If you use this boilerplate, please consider using its badge in your README.md
:
Using
[![Built using electron react boilerplate](https://img.shields.io/static/v1?label=Built%20using&message=electron-react-boilerplate&labelColor=2B2E3A&color=61DAFB)](https://github.com/fliegwerk/electron-react-boilerplate)
in your README.md
file.