1 Star 1 Fork 0

nur/electron-react-typescript-webpack-boilerplate

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

Electron-React-TypeScript-Webpack-Boilerplate

Pre-configured Electron.js + React.js + TypeScript boilerplate with Webpack v4 & linters config predefined.

This boilerplate currently works on macOS and Windows. If something doesn't work, please file and issue.

Getting started

// execute
git clone https://github.com/iamWing/electron-react-typescript-base-proj.git
// edit the following fields in package.json for your own project
{
  "name": your-project-name,
  "version": whatever-you-like,
  "description": your-own-description,
  "build": {
    "appId": your-app-id,
    "productName": your-product-name,
    "buildVersion": whatever-you-like
  },
  "author": who's-the-author?,
  "license": if-you-don't-want-to-use-MIT,
  "repository": type-and-link-of-your-repo,
  "keywords": keywords-of-your-project,
  "bugs": issue-page-of-your-repo,
  "homepage": homepage-of-your-repo
}

Then install all the node_modules needed by executing the following command:

cd folder-containing-the-cloned-boilerplate
npm install

Finally execute the following command to start Webpack in development mode and watch the changes on source files for live rebuild on code changes.

npm run dev

The npm run dev command won't start your app and get your app shows on the screen. To start your app, execute the following command:

npm start

Building the installer for your Electron app

The boilerplate is currently configured to package & build the installer of your app for macOS & Windows using electron-builder.

For macOS, execute:

npm run build:mac

For Windows, execute:

npm run build:win

** asar archiving is disabled by default in Windows build as it can cause errors while running the installed Electron app based on pervious experiences, whereas the macOS build with asar enabled works just fine. You can turn it back on by removing line 23 ("asar": false) in package.json. **

Extra options

The build scripts are pre-configured to build 64 bit installers since 64 bit should be the standard for a modern applications. 32 bit builds are still possible by changing the build scripts in package.json as below:

// from
"scripts": {
    ...
    "build:win": "electron-builder build --win --x64",
    "build:mac": "electron-builder build --mac --x64"
},

// to
"scripts": {
    ...
    "build:win": "electron-builder build --win --ia32",
    // Works only on macOS version < 10.15
    "build:mac": "electron-builder build --mac --ia32"
},

Builds for Linux, armv71, and arm64 can also be configured by modifying the build scripts in package.json, but those aren't tested yet. For details, please refer to documents of electron-builder.

Known issues

  • dmg build action on macOS Catalina (10.15) fails due to Apple ditches support for 32-bit apps from 10.15 onwards (Don't worry, you are still building 64-bit apps, just some dependencies of the builder are still 32-bit). Further details retailed to this issue can be found here.
    Application installer built on macOS is now set to build pkg file instead of dmg as a workaround in the current version. The issue can be fixed by applying a major version upgrade of electron-builder to 21.2.0+ but it hasn't been tested on this boilerplate yet. This issue is planned to be addressed alongside with major version upgrades on other dependencies.

Folder structure

electron-react-typescript-base-proj/
| - dist/               //- Generated by Webpack automatically
| - node_modules/
| - out/                //- Generated by build script automatically
| - public/             //- Global static assets
| | - index.html
| | - style.css
| - src/
| | - main/             //- Backend modules for the Electron app
| | | - main.ts         //- Entry point of 'electron-main'
| | - models/
| | - renderer/         //- Frontend React components for the Electron app
| | | - renderer.tsx    //- Entry point of 'electron-renderer'
| | - utils/            //- Common utilities
| - test/               //- Unit tests
| - .eslintrc           //- ESLint config
| - .gitignore
| - package-lock.json
| - package.json
| - tsconfig.json       //- TypeScript config
| - tslint.json         //- TSLint config
| - webpack.config.js   //- Webpack config

Author

Wing Chau @Devtography

License

Electron React TypeScript Webpack Boilerplate is open source software licensed as MIT.

MIT License Copyright (c) 2018 Devtography Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

暂无描述 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/nur/electron-react-typescript-webpack-boilerplate.git
git@gitee.com:nur/electron-react-typescript-webpack-boilerplate.git
nur
electron-react-typescript-webpack-boilerplate
electron-react-typescript-webpack-boilerplate
master

搜索帮助