react-redux-elctron-boilerplate

Author: Abhishek-kumar09

Diff for: .editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,json,css,html}]
+indent_style = space
+indent_size = 2

Diff for: .eslintignore

@@ -0,0 +1,9 @@
+node_modules
+build
+cache
+lib
+dist
+webpack.*.js
+server.js
+build.js
+init.js

Diff for: .eslintrc

@@ -0,0 +1,37 @@
+{
+  "root": true,
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+    }
+  },
+  "plugins": [ "react" ],
+  "rules": {
+    "prefer-const": "warn",
+    "no-console": "off",
+    "no-loop-func": "warn",
+    "new-cap": "off",
+    "no-param-reassign": "warn",
+    "func-names": "off",
+    "no-unused-expressions" : "error",
+    "block-scoped-var": "error",
+    "react/prop-types": "off"
+  },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "16.2"
+    }
+  },
+  "env": {
+    "es6": true,
+    "node": true
+  }
+}

Diff for: .gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+build
+.DS_Store
+*.log

Diff for: .prettierrc.yml

@@ -0,0 +1,10 @@
+# .prettierrc.yml
+# see: https://prettier.io/docs/en/options.html
+printWidth: 100
+semi: true
+singleQuote: true
+trailingComma: all
+bracketSpacing: true
+jsxBracketSameLine: true
+arrowParens: always
+proseWrap: always

Diff for: .travis.yml

@@ -0,0 +1,17 @@
+sudo: false
+
+language: node_js
+
+node_js:
+  - '10'
+cache: npm
+services:
+  - xvfb
+
+install:
+  - npm install
+
+script:
+  - npm run check-format
+  - npm run lint
+  - npm test

Diff for: .vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "search.exclude": {
+    "build/": true,
+    "dist/": true
+  }
+}

Diff for: README.md

@@ -0,0 +1,74 @@
+# electron-react-redux-boilerplate
+[![Build Status](https://api.travis-ci.org/jschr/electron-react-redux-boilerplate.svg)](https://travis-ci.org/jschr/electron-react-redux-boilerplate)
+[![dependencies Status](https://david-dm.org/jschr/electron-react-redux-boilerplate/status.svg)](https://david-dm.org/jschr/electron-react-redux-boilerplate)
+[![devDependencies Status](https://david-dm.org/jschr/electron-react-redux-boilerplate/dev-status.svg)](https://david-dm.org/jschr/electron-react-redux-boilerplate?type=dev)
+
+A minimal boilerplate to get started with [Electron](http://electron.atom.io/), [React](https://facebook.github.io/react/) and [Redux](http://redux.js.org/).
+
+Including:
+
+* [React Router](https://reacttraining.com/react-router/)
+* [Redux Thunk](https://github.com/gaearon/redux-thunk/)
+* [Redux Actions](https://github.com/acdlite/redux-actions/)
+* [Redux Local Storage](https://github.com/elgerlambert/redux-localstorage/)
+* [Electron Packager](https://github.com/electron-userland/electron-packager)
+* [Electron DevTools Installer](https://github.com/MarshallOfSound/electron-devtools-installer)
+* [Electron Mocha](https://github.com/jprichardson/electron-mocha)
+* [Browsersync](https://browsersync.io/)
+
+## Quick start
+
+Clone the repository
+```bash
+git clone --depth=1 https://github.com/jschr/electron-react-redux-boilerplate
+```
+
+Install dependencies
+```bash
+cd electron-react-redux-boilerplate
+npm install
+```
+
+Development
+```bash
+npm run develop
+```
+
+## DevTools
+
+Toggle DevTools:
+
+* macOS: <kbd>Cmd</kbd> <kbd>Alt</kbd> <kbd>I</kbd> or <kbd>F12</kbd>
+* Linux: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>I</kbd> or <kbd>F12</kbd>
+* Windows: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>I</kbd> or <kbd>F12</kbd>
+
+## Packaging
+
+Modify [electron-builder.yml](./electron-builder.yml) to edit package info.
+
+For a full list of options see: https://www.electron.build/configuration/configuration
+
+Create a package for macOS, Windows or Linux using one of the following commands:
+
+```
+npm run pack:mac
+npm run pack:win
+npm run pack:linux
+```
+
+## Tests
+
+```
+npm run test
+```
+
+## Maintainers
+
+- [@jschr](https://github.com/jschr)
+- [@pronebird](https://github.com/pronebird)
+
+## Apps using this boilerplate
+
+- [Mullvad VPN app](https://github.com/mullvad/mullvadvpn-app)
+- [YouTube Downloader Electron](https://github.com/vanzylv/youtube-downloader-electron)
+- [Martian: A Websocket test tool](https://github.com/drex44/martian)

Diff for: app/main/index.js

@@ -0,0 +1,103 @@
+import path from 'path';
+import { app, crashReporter, BrowserWindow, Menu } from 'electron';
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+let mainWindow = null;
+let forceQuit = false;
+
+const installExtensions = async () => {
+  const installer = require('electron-devtools-installer');
+  const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];
+  const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
+  for (const name of extensions) {
+    try {
+      await installer.default(installer[name], forceDownload);
+    } catch (e) {
+      console.log(`Error installing ${name} extension: ${e.message}`);
+    }
+  }
+};
+
+crashReporter.start({
+  productName: 'YourName',
+  companyName: 'YourCompany',
+  submitURL: 'https://your-domain.com/url-to-submit',
+  uploadToServer: false,
+});
+
+app.on('window-all-closed', () => {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('ready', async () => {
+  if (isDevelopment) {
+    await installExtensions();
+  }
+
+  mainWindow = new BrowserWindow({
+    width: 1000,
+    height: 800,
+    minWidth: 640,
+    minHeight: 480,
+    show: false,
+    webPreferences: {
+      nodeIntegration: true,
+    },
+  });
+
+  mainWindow.loadFile(path.resolve(path.join(__dirname, '../renderer/index.html')));
+
+  // show window once on first load
+  mainWindow.webContents.once('did-finish-load', () => {
+    mainWindow.show();
+  });
+
+  mainWindow.webContents.on('did-finish-load', () => {
+    // Handle window logic properly on macOS:
+    // 1. App should not terminate if window has been closed
+    // 2. Click on icon in dock should re-open the window
+    // 3. ⌘+Q should close the window and quit the app
+    if (process.platform === 'darwin') {
+      mainWindow.on('close', function (e) {
+        if (!forceQuit) {
+          e.preventDefault();
+          mainWindow.hide();
+        }
+      });
+
+      app.on('activate', () => {
+        mainWindow.show();
+      });
+
+      app.on('before-quit', () => {
+        forceQuit = true;
+      });
+    } else {
+      mainWindow.on('closed', () => {
+        mainWindow = null;
+      });
+    }
+  });
+
+  if (isDevelopment) {
+    // auto-open dev tools
+    mainWindow.webContents.openDevTools();
+
+    // add inspect element on right click menu
+    mainWindow.webContents.on('context-menu', (e, props) => {
+      Menu.buildFromTemplate([
+        {
+          label: 'Inspect element',
+          click() {
+            mainWindow.inspectElement(props.x, props.y);
+          },
+        },
+      ]).popup(mainWindow);
+    });
+  }
+});

Diff for: app/renderer/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "browser": true
+  }
+}

Diff for: app/renderer/actions/user.js

@@ -0,0 +1,6 @@
+import { createAction } from 'redux-actions';
+
+export default {
+  login: createAction('USER_LOGIN'),
+  logout: createAction('USER_LOGOUT'),
+};

Diff for: app/renderer/app.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'connected-react-router';
+import { createMemoryHistory } from 'history';
+import routes from './routes';
+import configureStore from './store';
+
+const syncHistoryWithStore = (store, history) => {
+  const { router } = store.getState();
+  if (router && router.location) {
+    history.replace(router.location);
+  }
+};
+
+const initialState = {};
+const routerHistory = createMemoryHistory();
+const store = configureStore(initialState, routerHistory);
+syncHistoryWithStore(store, routerHistory);
+
+const rootElement = document.querySelector(document.currentScript.getAttribute('data-container'));
+
+ReactDOM.render(
+  <Provider store={store}>
+    <ConnectedRouter history={routerHistory}>{routes}</ConnectedRouter>
+  </Provider>,
+  rootElement,
+);

Diff for: app/renderer/components/LoggedIn.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class LoggedIn extends Component {
+  static propTypes = {
+    onLogout: PropTypes.func.isRequired,
+  };
+
+  handleLogout = () => {
+    this.props.onLogout({
+      username: '',
+      loggedIn: false,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <h2>Logged in as {this.props.user.username}</h2>
+        <button onClick={this.handleLogout}>Logout</button>
+      </div>
+    );
+  }
+}

Diff for: app/renderer/components/Login.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class Login extends Component {
+  static propTypes = {
+    onLogin: PropTypes.func.isRequired,
+  };
+
+  state = {
+    username: '',
+  };
+
+  handleLogin = () => {
+    this.props.onLogin({
+      username: this.state.username,
+      loggedIn: true,
+    });
+  };
+
+  handleChange = (e) => {
+    this.setState({
+      username: e.target.value,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <h2>Login</h2>
+        <input onChange={this.handleChange} type="text" value={this.state.username} />
+        <button onClick={this.handleLogin}>Log In</button>
+      </div>
+    );
+  }
+}