|
1 | | -# electron-react-typescript-boilerplate |
| 1 | +# electron-type-book |
2 | 2 |
|
3 | | -[![Build Status][travis-image]][travis-url] |
4 | | -[](https://greenkeeper.io/) |
5 | | - |
6 | | -This is a slight modificiation of the great [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate) by chentsulin. |
7 | | -Instead of [Babel](https://babeljs.io) and [flow](https://flowtype.org) this version uses [TypeScript](https://www.typescriptlang.org). Support for [Sass](http://sass-lang.com) has also been added. |
8 | | - |
9 | | -# electron-react-boilerplate |
10 | | - |
11 | | - |
12 | | - |
13 | | -> Live editing development on desktop app |
14 | | -
|
15 | | -[Electron](http://electron.atom.io/) application boilerplate based on [React](https://facebook.github.io/react/), [Redux](https://github.com/reactjs/redux), [React Router](https://github.com/reactjs/react-router), [Webpack](http://webpack.github.io/docs/), [React Transform HMR](https://github.com/gaearon/react-transform-hmr) for rapid application development |
16 | | - |
17 | | -## Screenshot |
18 | | - |
19 | | - |
20 | | - |
21 | | -## Install |
22 | | - |
23 | | -* **Note: requires a node version >= 6 and an npm version >= 3.** |
24 | | -* **If you have installation or compilation issues with this project, please see [our debugging guide](https://github.com/chentsulin/electron-react-boilerplate/issues/400)** |
25 | | - |
26 | | -First, clone the repo via git: |
27 | | - |
28 | | -```bash |
29 | | -git clone https://github.com/iRath96/electron-react-typescript-boilerplate.git your-project-name |
30 | | -``` |
31 | | - |
32 | | -And then install dependencies. |
33 | | -**ProTip**: Install with [yarn](https://github.com/yarnpkg/yarn) for faster and safer installation |
34 | | - |
35 | | -```bash |
36 | | -$ cd your-project-name && npm install |
37 | | -``` |
38 | | - |
39 | | -:bulb: *In order to remove boilerplate sample code, simply run `npm run cleanup`. After this is run, the initial sample boilerplate code will be removed in order for a clean project for starting custom dev* |
40 | | - |
41 | | -## Run |
42 | | - |
43 | | -Run these two commands __simultaneously__ in different console tabs. |
44 | | - |
45 | | -```bash |
46 | | -$ npm run hot-server |
47 | | -$ npm run start-hot |
48 | | -``` |
49 | | - |
50 | | -or run two servers with one command |
51 | | - |
52 | | -```bash |
53 | | -$ npm run dev |
54 | | -``` |
55 | | - |
56 | | -## Editor Configuration |
57 | | -**Atom** |
58 | | -```bash |
59 | | -apm install editorconfig es6-javascript atom-ternjs javascript-snippets linter linter-eslint language-babel autocomplete-modules |
60 | | -``` |
61 | | - |
62 | | -**Sublime** |
63 | | -* https://github.com/sindresorhus/editorconfig-sublime#readme |
64 | | -* https://github.com/SublimeLinter/SublimeLinter3 |
65 | | -* https://github.com/roadhump/SublimeLinter-eslint |
66 | | -* https://github.com/babel/babel-sublime |
67 | | - |
68 | | -**Others** |
69 | | -* [Editorconfig](http://editorconfig.org/#download) |
70 | | -* [ESLint](http://eslint.org/docs/user-guide/integrations#editors) |
71 | | -* Babel Syntax Plugin |
72 | | - |
73 | | -## DevTools |
74 | | - |
75 | | -#### Toggle Chrome DevTools |
76 | | - |
77 | | -- OS X: <kbd>Cmd</kbd> <kbd>Alt</kbd> <kbd>I</kbd> or <kbd>F12</kbd> |
78 | | -- Linux: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>I</kbd> or <kbd>F12</kbd> |
79 | | -- Windows: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>I</kbd> or <kbd>F12</kbd> |
80 | | - |
81 | | -*See [electron-debug](https://github.com/sindresorhus/electron-debug) for more information.* |
82 | | - |
83 | | -#### DevTools extension |
84 | | - |
85 | | -This boilerplate is included following DevTools extensions: |
86 | | - |
87 | | -* [Devtron](https://github.com/electron/devtron) - Install via [electron-debug](https://github.com/sindresorhus/electron-debug). |
88 | | -* [React Developer Tools](https://github.com/facebook/react-devtools) - Install via [electron-devtools-installer](https://github.com/GPMDP/electron-devtools-installer). |
89 | | -* [Redux DevTools](https://github.com/zalmoxisus/redux-devtools-extension) - Install via [electron-devtools-installer](https://github.com/GPMDP/electron-devtools-installer). |
90 | | - |
91 | | -You can find the tabs on Chrome DevTools. |
92 | | - |
93 | | -If you want to update extensions version, please set `UPGRADE_EXTENSIONS` env, just run: |
94 | | - |
95 | | -```bash |
96 | | -$ UPGRADE_EXTENSIONS=1 npm run dev |
97 | | - |
98 | | -# For Windows |
99 | | -$ set UPGRADE_EXTENSIONS=1 && npm run dev |
100 | | -``` |
101 | | - |
102 | | - |
103 | | - |
104 | | -## CSS Modules |
105 | | - |
106 | | -This boilerplate out of the box is configured to use [css-modules](https://github.com/css-modules/css-modules). |
107 | | - |
108 | | -All `.css` file extensions will use css-modules unless it has `.global.css`. |
109 | | - |
110 | | -If you need global styles, stylesheets with `.global.css` will not go through the |
111 | | -css-modules loader. e.g. `app.global.css` |
112 | | - |
113 | | -If you want to import global css libraries (like `bootstrap`), you can just write the following code in `.global.css`: |
114 | | - |
115 | | -```css |
116 | | -@import "~bootstrap/dist/css/bootstrap.css"; |
117 | | -``` |
118 | | - |
119 | | - |
120 | | -## Packaging |
121 | | - |
122 | | -To package apps for the local platform: |
123 | | - |
124 | | -```bash |
125 | | -$ npm run package |
126 | | -``` |
127 | | - |
128 | | -To package apps for all platforms: |
129 | | - |
130 | | -First, refer to [Multi Platform Build](https://github.com/electron-userland/electron-builder/wiki/Multi-Platform-Build) for dependencies. |
131 | | - |
132 | | -Then, |
133 | | -```bash |
134 | | -$ npm run package-all |
135 | | -``` |
136 | | - |
137 | | -To package apps with options: |
138 | | - |
139 | | -```bash |
140 | | -$ npm run package -- --[option] |
141 | | -``` |
142 | | - |
143 | | -## Further commands |
144 | | - |
145 | | -To run the application without packaging run |
146 | | - |
147 | | -```bash |
148 | | -$ npm run build |
149 | | -$ npm start |
150 | | -``` |
151 | | - |
152 | | -To run End-to-End Test |
153 | | - |
154 | | -```bash |
155 | | -$ npm run build |
156 | | -$ npm run test-e2e |
157 | | -``` |
158 | | - |
159 | | -#### Options |
160 | | - |
161 | | -See [electron-builder CLI Usage](https://github.com/electron-userland/electron-builder#cli-usage) |
162 | | - |
163 | | -#### Module Structure |
164 | | - |
165 | | -This boilerplate uses a [two package.json structure](https://github.com/electron-userland/electron-builder#two-packagejson-structure). |
166 | | - |
167 | | -1. If the module is native to a platform or otherwise should be included with the published package (i.e. bcrypt, openbci), it should be listed under `dependencies` in `./app/package.json`. |
168 | | -2. If a module is `import`ed by another module, include it in `dependencies` in `./package.json`. See [this ESLint rule](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md). |
169 | | -3. Otherwise, modules used for building, testing and debugging should be included in `devDependencies` in `./package.json`. |
170 | | - |
171 | | -## Static Type Checking |
172 | | -This project comes with Flow support out of the box! You can annotate your code with types, [get Flow errors as ESLint errors](https://github.com/amilajack/eslint-plugin-flowtype-errors), and get [type errors during runtime](https://github.com/gcanti/babel-plugin-tcomb-boilerplate) during development. Types are completely optional. |
173 | | - |
174 | | -## Native-like UI |
175 | | - |
176 | | -If you want to have native-like User Interface (OS X El Capitan and Windows 10), [react-desktop](https://github.com/gabrielbull/react-desktop) may perfect suit for you. |
177 | | - |
178 | | -## Dispatching redux actions from main process |
179 | | - |
180 | | -see discusses in [#118](https://github.com/chentsulin/electron-react-boilerplate/issues/118) and [#108](https://github.com/chentsulin/electron-react-boilerplate/issues/108) |
181 | | - |
182 | | -## How to keep the boilerplate updated |
183 | | - |
184 | | -If your application is a fork from this repo, you can add this repo to another git remote: |
185 | | - |
186 | | -```sh |
187 | | -git remote add upstream https://github.com/chentsulin/electron-react-boilerplate.git |
188 | | -``` |
189 | | - |
190 | | -Then, use git to merge some latest commits: |
191 | | - |
192 | | -```sh |
193 | | -git pull upstream master |
194 | | -``` |
195 | | - |
196 | | -## Maintainers |
197 | | - |
198 | | -- [C. T. Lin](https://github.com/chentsulin) |
199 | | -- [Jhen-Jie Hong](https://github.com/jhen0409) |
200 | | -- [Amila Welihinda](https://github.com/amilajack) |
201 | | - |
202 | | - |
203 | | -## License |
204 | | -MIT © [C. T. Lin](https://github.com/chentsulin) |
205 | | - |
206 | | -[npm-image]: https://img.shields.io/npm/v/electron-react-boilerplate.svg?style=flat-square |
207 | | -[npm-url]: https://npmjs.org/package/electron-react-boilerplate |
208 | | -[travis-image]: https://travis-ci.org/iRath96/electron-react-typescript-boilerplate.svg?branch=master |
209 | | -[travis-url]: https://travis-ci.org/iRath96/electron-react-typescript-boilerplate |
210 | | -[appveyor-image]: https://ci.appveyor.com/api/projects/status/github/chentsulin/electron-react-boilerplate?svg=true |
211 | | -[appveyor-url]: https://ci.appveyor.com/project/chentsulin/electron-react-boilerplate/branch/master |
212 | | -[david_img]: https://img.shields.io/david/chentsulin/electron-react-boilerplate.svg |
213 | | -[david_site]: https://david-dm.org/chentsulin/electron-react-boilerplate |
| 3 | +A small project for eBooks using the electron-react-typescript-boilerplate |
| 4 | +https://github.com/iRath96/electron-react-typescript-boilerplate |
0 commit comments