https://github.com/liftitapp/electron-react-sagas-starter
https://github.com/liftitapp/electron-react-sagas-starter
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/liftitapp/electron-react-sagas-starter
- Owner: Liftitapp
- License: other
- Created: 2017-05-31T16:08:41.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-27T13:10:11.000Z (almost 9 years ago)
- Last Synced: 2025-03-30T23:11:08.348Z (about 1 year ago)
- Language: JavaScript
- Size: 1.29 MB
- Stars: 7
- Watchers: 14
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# electron-react-sagas-starter
### An actual work from [chentsulin/electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate) + sagas, immutable and stateless components
###
###
[](https://codeclimate.com/github/Liftitapp/electron-react-sagas-starter) [](https://semaphoreci.com/liftit/electron-react-sagas-starter) [](https://gitter.im/electron-react-boilerplate/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
Application boilerplate based on
* [Electron](http://electron.atom.io/)
* [React](https://facebook.github.io/react/)
* [Webpack 2](https://webpack.github.io/)
* [Redux](http://redux.js.org/)
* [React Router](https://github.com/ReactTraining/react-router)
* [Flow](https://flowtype.org/)
* [ESLint](http://eslint.org/)
* [Jest](https://facebook.github.io/jest/)
* [Yarn](https://yarnpkg.com/)
* [React Transform HMR](https://github.com/gaearon/react-transform-hmr)
* [Apisauce](https://github.com/skellock/apisauce)
* [Redux Saga](https://github.com/redux-saga/redux-saga)
* [Immutable](https://github.com/facebook/immutable-js)
* [css-modules](https://github.com/css-modules/css-modules)
## Install
* **Note: requires a node version >= 6 and an npm version >= 3.**
First, clone the repo via git:
```bash
git clone --depth=1 https://github.com/Liftitapp/electron-react-sagas-starter.git your-project-name
```
And then install dependencies.
**ProTip**: Install with [yarn](https://github.com/yarnpkg/yarn) for faster and safer installation:
```bash
$ cd your-project-name && npm install
```
## Run
Start the app in the `dev` environment. This starts the renderer process in [**hot-module-replacement**](https://webpack.js.org/guides/hmr-react/) mode and starts a server sends hot updates to the renderer process:
```bash
$ npm run dev
```
You Run these two commands __simultaneously__ in different console tabs:
```bash
$ npm run hot-updates-server
$ npm run start-hot-renderer
```
## Editor Configuration
**Atom**
```bash
apm install editorconfig es6-javascript atom-ternjs javascript-snippets linter linter-eslint language-babel autocomplete-modules file-icons
```
**VSCode**
* [Editorconfig](https://github.com/editorconfig/editorconfig-vscode)
* [ESLint](https://github.com/Microsoft/vscode-eslint)
* [Flow](https://github.com/flowtype/flow-for-vscode)
* [Babel](https://github.com/dzannotti/vscode-babel)
* [Jest](https://github.com/orta/vscode-jest)
* [ES6 Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
* [React Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets)
:bulb: *If you are using the `flow-for-vscode` plugin, make sure to disable the `flowtype-errors/show-errors` eslint rule in the `.eslintrc` by setting it to `0`*
**Sublime**
* [Editorconfig Integration](https://github.com/sindresorhus/editorconfig-sublime#readme)
* [Linting](https://github.com/SublimeLinter/SublimeLinter3)
* [ESLint Integration](https://github.com/roadhump/SublimeLinter-eslint)
* [Syntax Highlighting](https://github.com/babel/babel-sublime)
* [Autocompletion](https://github.com/ternjs/tern_for_sublime)
* [Node Snippets](https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets)
* [ES6 Snippets](https://packagecontrol.io/packages/ES6-Toolkit)
**Others**
* [Editorconfig](http://editorconfig.org/#download)
* [ESLint](http://eslint.org/docs/user-guide/integrations#editors)
* Babel Syntax Plugin
## DevTools
#### Toggle Chrome DevTools
- OS X: Cmd Alt I or F12
- Linux: Ctrl Shift I or F12
- Windows: Ctrl Shift I or F12
*See [electron-debug](https://github.com/sindresorhus/electron-debug) for more information.*
#### DevTools extension
This boilerplate is included following DevTools extensions:
* [Devtron](https://github.com/electron/devtron) - Install via [electron-debug](https://github.com/sindresorhus/electron-debug).
* [React Developer Tools](https://github.com/facebook/react-devtools) - Install via [electron-devtools-installer](https://github.com/GPMDP/electron-devtools-installer).
* [Redux DevTools](https://github.com/zalmoxisus/redux-devtools-extension) - Install via [electron-devtools-installer](https://github.com/GPMDP/electron-devtools-installer).
You can find the tabs on Chrome DevTools.
If you want to update extensions version, please set `UPGRADE_EXTENSIONS` env, just run:
```bash
$ UPGRADE_EXTENSIONS=1 npm run dev
# For Windows
$ set UPGRADE_EXTENSIONS=1 && npm run dev
```
:bulb: You can debug your production build with devtools by simply setting the `DEBUG_PROD` env variable:
```
DEBUG_PROD=true npm run package
```
## Sass support
If you want to use Sass in your app, you only need to import `.sass` files instead of `.css` once:
```js
import './app.global.scss';
```
## Packaging
To package apps for the local platform:
```bash
$ npm run package
```
To package apps for all platforms:
First, refer to [Multi Platform Build](https://github.com/electron-userland/electron-builder/wiki/Multi-Platform-Build) for dependencies.
Then,
```bash
$ npm run package-all
```
To package apps with options:
```bash
$ npm run package -- --[option]
```
## Further commands
To run the application without packaging run
```bash
$ npm run build
$ npm start
```
To run End-to-End Test
```bash
$ npm run build
$ npm run test-e2e
```
### Missing work...
1. Clean up lint
2. Improve eslint config
3. Saga testing missing
## License
MIT ©