Skip to content

Commit 485b7fe

Browse files
iamWingiamWing
committed
Merge branch 'release/2.0.0'
2 parents 8b974d4 + 5c50876 commit 485b7fe

17 files changed

+2788
-1004
lines changed

‎.eslintrc

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"node": true
5+
},
6+
"extends": "airbnb",
7+
"rules": {
8+
"no-unused-vars": "warn",
9+
"max-len": [
10+
"error",
11+
{
12+
"ignoreUrls": true
13+
}
14+
],
15+
"import/no-extraneous-dependencies": [
16+
"error",
17+
{
18+
"devDependencies": [
19+
"webpack.*.js",
20+
"test/**/*.js"
21+
]
22+
}
23+
],
24+
"sort-imports": 2,
25+
"import/prefer-default-export": 0,
26+
"import/no-default-export": 2,
27+
"import/no-named-default": 0,
28+
"react/jsx-no-bind": false
29+
},
30+
"plugins": [
31+
"import"
32+
],
33+
"settings": {
34+
"import/resolver": "webpack"
35+
}
36+
}

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.vscode/
22
dist/
33
node_modules/
4+
out/
45

56
# Logs
67
logs

‎CHANGELOG.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# Changelog
2+
All notable changes to this project will be documented in this file.
3+
4+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
5+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6+
7+
## [Unreleased]
8+
9+
## 2.0.0 - 2018-02-04
10+
v2.0.0 is a major release that most part of the boilerplate has been rewritten.
11+
12+
### Added
13+
- ESLint for code checking on Javascript files.
14+
- Airbnb's extensible `.eslintrc` package & its' peer dependencies.
15+
- `.eslintrc` that extends Airbnb's config and has customised rules configured.
16+
- _Rule `no-default-export` is set for JavaScript files to align with
17+
TypeScript._
18+
- ESLint plugin `eslint-import-resolver-webpack` for ESLint to resolve path
19+
aliases set in Webpack config.
20+
- Webpack plugin `copy-pkg-json-webpack-plugin` to generate a `package.json`
21+
file and pack into Webpack's bundled package for production.
22+
- Build commands `build:mac` & `build:win` to package & build the installer of
23+
your Electron app for macOS & Windows using `electron-builder`.
24+
- README section "Building the installer for your Electron app" & sub-section
25+
"Extra options".
26+
27+
### Changed
28+
- Refactored Webpack config file to have `mainConfig` & `rendererConfig`
29+
cleaned up, and set mode by environment variable.
30+
- `.gitignore` to ignore folder `out/` which will be auto-generated during the
31+
build process.
32+
- README section "How does it work?" is now renamed to "Getting started" &
33+
completed the documentation of this section.
34+
- README section "Folder structure" to reflect the changes in `v2.0.0`.
35+
36+
### Fixed
37+
- CSS files fail to inject into views issue by setting Webpack to use
38+
`style-loader` alongside with `css-loader` to bundle the files in Webpack
39+
config file.
40+
- `baseUrl` in `tsconfig.json` points to root directory incorrectly issue.
41+
Corrected to current directory so VSCode can resolves the path aliases
42+
correctly.
43+
44+
### Removed
45+
- Redux & React-Redux related settings, including packages listed on
46+
`devDependencies`, path aliases & folders listed in folder structure.
47+
- Since Electron's built-in IPC & basic React states should be enough to get
48+
the works done, and most Electron apps which have their application logic
49+
runs on Electron's `main` process rather then `renderer` process actually
50+
don't need React-Redux, `redux` & `react-redux` are no longer included in
51+
this boilerplate.
52+
- Redux & React-Redux can still be used on this boilerplate by installing the
53+
package yourself. For details, please refer to the corresponding library's
54+
documents, there's no different than working on any other project which
55+
isn't based on this boilerplate.
56+
- Separated Webpack config files for `development` & `production` mode.
57+
58+
[Unreleased]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare/v2.0.0...HEAD

‎README.md

Lines changed: 87 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,116 @@
1-
# **Electron-React-TypeScript-Base**
1+
# Electron-React-TypeScript-Webpack-Boilerplate
2+
Pre-configured Electron.js + React.js + TypeScript boilerplate with
3+
Webpack v4 & linters config predefined.
24

3-
This is a pre-configured Electron.js + React.js + TypeScript project with
4-
webpack v4 & TSLint config provided. `react-router` & `react-redux` is listed
5-
in dependencies section of `package.json`, and the folder structure is redux
6-
ready.
5+
This boilerplate currently works on macOS and Windows. If something doesn't
6+
work, please [file and issue](https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/issues/new).
77

8-
## **How Does It Work?**
9-
```
8+
## Getting started
9+
```bash
1010
// execute
1111
git clone https://github.com/iamWing/electron-react-typescript-base-proj.git
12+
```
1213

14+
```json
1315
// edit the following fields in package.json for your own project
1416
{
15-
"name": {your-project-name},
16-
"version": {what-ever-you-like},
17-
"description": {your-own-description},
18-
"author": {who's-the-author?},
19-
"license": {if-you-don't-want-to-use-MIT}
20-
"repository": {type-and-link-of-your-repo},
21-
"keywords": {keywords-of-your-project},
22-
"bugs": {issue-page-of-your-repo},
23-
"homepage": {homepage-of-your-repo}
17+
"name": {your-project-name},
18+
"version": {whatever-you-like},
19+
"description": {your-own-description},
20+
"build": {
21+
"appId": {your-app-id},
22+
"productName": {your-product-name},
23+
"buildVersion": {whatever-you-like}
24+
},
25+
"author": {who's-the-author?},
26+
"license": {if-you-don't-want-to-use-MIT},
27+
"repository": {type-and-link-of-your-repo},
28+
"keywords": {keywords-of-your-project},
29+
"bugs": {issue-page-of-your-repo},
30+
"homepage": {homepage-of-your-repo}
2431
}
2532
```
2633

27-
## **Folder structure:**
34+
Then install all the `node_modules` needed by executing the following command:
35+
```bash
36+
cd {folder-containing-the-cloned-boilerplate}
37+
npm run install
38+
```
39+
40+
Finally execute the following command to start Webpack in development mode and
41+
watch the changes on source files.
42+
```bash
43+
npm run dev
44+
```
45+
46+
## Building the installer for your Electron app
47+
The boilerplate is currently configured to package & build the installer of
48+
your app for macOS & Windows using `electron-builder`.
49+
50+
For macOS, execute:
51+
```bash
52+
npm run build:mac
53+
```
54+
55+
For Windows, execute:
56+
```bash
57+
npm run build:win
58+
```
59+
_** `asar` archiving is disabled by default in Windows build as it can cause
60+
errors while running the installed Electron app based on pervious experiences,
61+
whereas the macOS build with `asar` enabled works just fine. You can turn it
62+
back on by removing line 23 (`"asar": false`) in `package.json`. **_
63+
64+
### Extra options
65+
The build scripts are pre-configured to build 64 bit installers since 64 bit
66+
should be the standard for a modern applications. 32 bit builds are still
67+
possible by changing the build scripts in `package.json` as below:
68+
```json
69+
// from
70+
"scripts": {
71+
...
72+
"build:win": "electron-builder build --win --x64",
73+
"build:mac": "electron-builder build --mac --x64"
74+
},
75+
76+
// to
77+
"scripts": {
78+
...
79+
"build:win": "electron-builder build --win --ia32",
80+
"build:mac": "electron-builder build --mac --ia32"
81+
},
82+
```
83+
84+
Builds for Linux, armv71, and arm64 can also be configured by modifying the
85+
build scripts in `package.json`, but those aren't tested yet. For details,
86+
please refer to [documents of `electron-builder`](https://www.electron.build/cli).
87+
88+
## Folder structure
2889
```
2990
electron-react-typescript-base-proj/
30-
| - dist/ //- Generated by webpack automatically
31-
| | - index.html
32-
| | - main.bundle.js
33-
| | - renderer.bundle.js
91+
| - dist/ //- Generated by Webpack automatically
3492
| - node_modules/
93+
| - out/ //- Generated by build script automatically
3594
| - public/ //- Global static assets
3695
| | - index.html
3796
| | - style.css
3897
| - src/
39-
| | - actions/ //- Redux actions
40-
| | - main/ //- Electron / backend modules
98+
| | - main/ //- Backend modules for the Electron app
4199
| | | - main.ts //- Entry point of 'electron-main'
42100
| | - models/
43-
| | - reducers/ //- Redux reducers
44-
| | - renderer/ //- React / frontend components
45-
| | | - components/
46-
| | | - containers/
101+
| | - renderer/ //- Frontend React components for the Electron app
47102
| | | - renderer.tsx //- Entry point of 'electron-renderer'
48103
| | - utils/ //- Common utilities
49-
| | - declarations.d.ts
50104
| - test/ //- Unit tests
105+
| - .eslintrc //- ESLint config
51106
| - .gitignore
52107
| - package-lock.json
53108
| - package.json
54109
| - tsconfig.json //- TypeScript config
55110
| - tslint.json //- TSLint config
56-
| - webpack.common.js //- webpack base config
57-
| - webpack.dev.js //- webpack development config
58-
| - webpack.prod.js //- webpack production config
111+
| - webpack.config.js //- Webpack config
59112
```
60113

61-
## **License**
62-
63-
MIT
114+
## License
115+
Electron React TypeScript Webpack Boilerplate is open source software
116+
[licensed as MIT](LICENSE).

0 commit comments

Comments
 (0)