Spooky12 / basic-electron-react-boilerplate

A basic boilerplate for cross-platform desktop apps

basic-electron-react-boilerplate

A basic boilerplate for cross-platform desktop apps greatly inspired by this article. This boilerplate uses npm unlike the article that uses yarn.

Installation

• Clone the repo via git:

git clone --depth=1 https://github.com/Spooky12/basic-electron-react-boilerplate.git your-project-name

• Install the dependencies:

cd your-project-name
npm install

Running the App

• To start the app in a dev environment:

npm run electron-dev

Packaging the App

• To build the React app:

npm run preelectron-pack

• To package the React app:

npm run electron-pack

The packaged application will be in the dist directory.

Note: I only tested on Windows, so you might need to check the documentation of electron-builder and edit the build part of package.json is you want to build for other platforms.

• To only get the unpacked version of the App, you can run:

npm run electron-dist

Including files in the packaged app

If you want to include files in the packaged application, you have to put them in the extraResources directory. Once packaged, the files can be found in the resources/extraResources directory of the packaged application (Contents/Resources/extraResources for MacOS).

To access this folder in your app you can do:

const isDev = window.require('electron-is-dev')
const pathAppResources = `${isDev ? '.' : window.process.resourcesPath}/extraResources/`