1
- # ** Electron-React-TypeScript-Webpack-Boilerplate**
2
-
1
+ # Electron-React-TypeScript-Webpack-Boilerplate
3
2
Pre-configured Electron.js + React.js + TypeScript boilerplate with
4
3
Webpack v4 & linters config predefined.
5
4
6
- This boilerplate works on Mac, Windows, and Linux.
7
- If something doesn't work, please [ file and issue] ( https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/issues/new ) .
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 ) .
8
7
9
- ## ** How Does It Work? **
10
- ```
8
+ ## Getting started
9
+ ``` bash
11
10
// execute
12
11
git clone https://github.com/iamWing/electron-react-typescript-base-proj.git
13
12
```
14
13
15
- ```
14
+ ``` json
16
15
// edit the following fields in package.json for your own project
17
16
{
18
17
"name" : {your-project-name },
@@ -22,19 +21,71 @@ git clone https://github.com/iamWing/electron-react-typescript-base-proj.git
22
21
"appId" : {your-app-id },
23
22
"productName" : {your-product-name },
24
23
"buildVersion" : {whatever-you-like }
25
- }
24
+ },
26
25
"author" : {who's-the-author? },
27
- "license": {if-you-don't-want-to-use-MIT}
26
+ "license" : {if-you-don't-want-to-use-MIT },
28
27
"repository" : {type-and-link-of-your-repo },
29
28
"keywords" : {keywords-of-your-project },
30
29
"bugs" : {issue-page-of-your-repo },
31
30
"homepage" : {homepage-of-your-repo }
32
31
}
33
32
```
34
33
35
- Then execute ` npm run dev ` to start develop your app.
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
+ },
36
75
37
- ## ** Folder structure**
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
38
89
```
39
90
electron-react-typescript-base-proj/
40
91
| - dist/ //- Generated by Webpack automatically
@@ -44,13 +95,14 @@ electron-react-typescript-base-proj/
44
95
| | - index.html
45
96
| | - style.css
46
97
| - src/
47
- | | - main/ //- Electron / backend modules
98
+ | | - main/ //- Backend modules for the Electron app
48
99
| | | - main.ts //- Entry point of 'electron-main'
49
100
| | - models/
50
- | | - renderer/ //- React / frontend components
101
+ | | - renderer/ //- Frontend React components for the Electron app
51
102
| | | - renderer.tsx //- Entry point of 'electron-renderer'
52
103
| | - utils/ //- Common utilities
53
104
| - test/ //- Unit tests
105
+ | - .eslintrc //- ESLint config
54
106
| - .gitignore
55
107
| - package-lock.json
56
108
| - package.json
@@ -59,7 +111,6 @@ electron-react-typescript-base-proj/
59
111
| - webpack.config.js //- Webpack config
60
112
```
61
113
62
- ## ** License**
63
-
114
+ ## License
64
115
Electron React TypeScript Webpack Boilerplate is open source software
65
116
[ licensed as MIT] ( LICENSE ) .
0 commit comments