A template for electron and build with webpack & react.

English | 简体中文

Getting started

At first, you can install the cli tools by following commands:

npm i -g @fujia/cli-core

# or using yarn
yarn global add @fujia/cli-core

then, to initial a project with the template via above cli tools:

# step1. create project folder
mkdir [project name]; cd $_;

# step2. initial project via the template
stage init

# step3. select "default" option.

# step4. select "app" option.

# step5. entering project name and version.

# step3. select "electron-react-webpack" option.

of course, if you don't want to install @fujia/cli-core in global scope, it can initial a project quickly by following commands:

# step1. create project folder
mkdir [project name]; cd $_;

# step2. initial project via the template
npm init stage@latest

# the other steps follow above.

That's all, the project will install the dependencies and devDependencies, then running automatically.

Starting Development

1. Start the app in the dev environment:

npm start

2. To package apps for the local platform by following command:

npm run release

however, please note that the project should have a git repository， otherwise， the above command will fail. By default, it's github, you can see the file scripts/release/index.js:

const release = {
  // ...
  buildInstaller() {
    // ...
    publish: {
      provider: 'github',
      repo: '',
      releaseType: 'release',
      // token: process.env.GH_TOKEN,
    },
    publish: 'always',
    // ...
  }
}

you can add remote github repository manually, or using the following command:

stage publish

tips：if you have installed cli tools of @fujia/cli-core, the stage command is available in the global scope.

3. Build unpacked dir which useful to test.

npm run pack

Notes

By default, we have disabled node integration, why? seeing here

if you want to enable the option or use native modules, please make the following changes:

webpack.config.renderer.base.js

- target: ['web', 'electron-renderer'],
+ target: 'electron-renderer',

- library: {
-  type: 'umd',
- },

webpack.config.main.prod.js

entry: {
   main: srcMainEntryPath,
-  preload: srcMainPreloadPath,
},

main.ts

webPreferences: {
+  nodeIntegration: true,
+  contextIsolation: false,
-  preload: app.isPackaged
-    ? path.join(__dirname, 'preload.js')
-    : path.join(__dirname, '../../release/bundled/preload.js'),
},

Maintainers

• fujia

License

MIT © electron-webpack-react-template

References

1. 《深入浅出 Electron：原理、工程与实践》

2. electron-react-boilerplate