/create-react-app-electron-typescript-boilerplate

Minimum Electron boilerplate for TypeScript based on create-react-app

Primary LanguageTypeScriptMIT LicenseMIT

Minimum Electron boilerplate for TypeScript, based on create-react-app

See also: create-react-app-electron-boilerplate

Directory structure

  • electron: Directory for Electron (Node.js) source code
  • src: Directory for React source code
  • build: Directory for building the source code above
  • dist: Directory for building production app
  • tsconfig.json: TypeScript build config for React
  • tsconfig.electron.json: TypeScript build config for Electron
  • rollup.config.js: For bundling files in electron directory to one file [build/electron.js]

Run the app in dev mode

npm start

Build the app

Build the React app to build directory:

npm run react-build

Bundle files in electron directory to one file build/electron.js (preload.js will also be copied to build directory):

npm run electron-bundle

Package the Electron app:

npm run electron-pack

The packaged application will be in the dist directory.

See the documentation of electron-builder and the build part of package.json.

Include files in the production app

Put them in the extraResources directory.

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/`