https://github.com/fujia-cli/electron-webpack-react-template
A template for electron and build with webpack & react.
https://github.com/fujia-cli/electron-webpack-react-template
Last synced: 10 months ago
JSON representation
A template for electron and build with webpack & react.
- Host: GitHub
- URL: https://github.com/fujia-cli/electron-webpack-react-template
- Owner: fujia-cli
- License: mit
- Created: 2022-01-20T03:09:04.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-18T09:25:02.000Z (about 4 years ago)
- Last Synced: 2025-02-26T01:48:15.049Z (over 1 year ago)
- Language: TypeScript
- Size: 736 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@fujia/electron-webpack-react-template
A template for electron and build with webpack & react.
English | [简体中文](./README.zh-CN.md)
## Getting started
At first, you can install the cli tools by following commands:
```sh
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:
```sh
# 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:
```sh
# 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:
```sh
npm start
```
2. To package apps for the local platform by following command:
```sh
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`:
```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:
```sh
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.
```sh
npm run pack
```
## Notes
By default, we have disabled node integration, why? [seeing here](https://www.electronjs.org/docs/latest/tutorial/security#2-do-not-enable-nodejs-integration-for-remote-content)
if you want to enable the option or use native modules, please make the following changes:
webpack.config.renderer.base.js
```js
- target: ['web', 'electron-renderer'],
+ target: 'electron-renderer',
- library: {
- type: 'umd',
- },
```
webpack.config.main.prod.js
```js
entry: {
main: srcMainEntryPath,
- preload: srcMainPreloadPath,
},
```
main.ts
```ts
webPreferences: {
+ nodeIntegration: true,
+ contextIsolation: false,
- preload: app.isPackaged
- ? path.join(__dirname, 'preload.js')
- : path.join(__dirname, '../../release/bundled/preload.js'),
},
```
## Maintainers
- [fujia](https://github.com/fushenguang)
## License
MIT © [electron-webpack-react-template](https://github.com/fujia-cli/electron-webpack-react-template)
## References
1. 《深入浅出 Electron：原理、工程与实践》
2. [electron-react-boilerplate](https://electron-react-boilerplate.js.org/docs/installation/)