first commit

.gitignore

@@ -0,0 +1,3 @@
+build
+node_modules
+package-lock.json

backend/server.js

@@ -0,0 +1,11 @@
+const express = require('express')
+const app = express()
+
+// Example route
+app.get('/', function (req, res) {
+  res.send('Hello World!')
+})
+
+app.listen(3000, function () {
+  console.log('Backend server for Electron App running on port 3000!')
+})

main.js

@@ -0,0 +1,64 @@
+const electron = require('electron')
+// Module to control application life.
+const app = electron.app
+// Module to create native browser window.
+const BrowserWindow = electron.BrowserWindow
+
+const path = require('path')
+const url = require('url')
+
+const DEV_MODE = process.argv.includes('--dev');
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({width: 800, height: 600})
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(url.format({
+    pathname: path.join(__dirname, 'build', DEV_MODE ? 'index.dev.html' : 'index.html'),
+    protocol: 'file:',
+    slashes: true
+  }))
+
+  // Open the DevTools.
+  if (DEV_MODE) {
+      mainWindow.webContents.openDevTools()
+  }
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow)
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // 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('activate', function () {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "electron-react-quick-start",
+  "version": "1.0.0",
+  "description": "A minimal Electron application with React and Express",
+  "main": "main.js",
+  "scripts": {
+    "dev": "concurrently -k \"npm run devWebpack\" \"npm run devApp\" \"npm run devServer\"",
+    "devWebpack": "webpack-dev-server --content-base build/",
+    "devApp": "electron main.js --dev",
+    "devServer": "nodemon --watch backend backend/server.js",
+    "webpack": "webpack",
+    "prodWebpack": "webpack -p",
+    "start": "electron main.js",
+    "server": "node backend/server.js"
+  },
+  "repository": "",
+  "keywords": [],
+  "author": "",
+  "license": "",
+  "devDependencies": {
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.1.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "concurrently": "^3.5.0",
+    "electron": "~1.6.2",
+    "loglevel": "^1.4.1",
+    "nodemon": "^1.11.0",
+    "webpack": "^2.7.0",
+    "webpack-dev-server": "^2.6.0",
+    "babel-eslint": "^6.1.0",
+    "eslint": "^3.0.1",
+    "eslint-plugin-react": "^5.2.2"
+  },
+  "dependencies": {
+    "bulma": "^0.5.0",
+    "draft-js": "^0.10.1",
+    "express": "^4.15.3",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
+  }
+}

reactApp/app.js

@@ -0,0 +1,21 @@
+var React = require('react');
+import ReactDOM from 'react-dom';
+import {Editor, EditorState, RichUtils} from 'draft-js';
+
+class MyEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {editorState: EditorState.createEmpty()};
+    this.onChange = (editorState) => this.setState({editorState});
+  }
+  render() {
+    return (
+        <Editor editorState={this.state.editorState} onChange={this.onChange} />
+    );
+  }
+}
+
+ReactDOM.render(
+  <MyEditor />,
+  document.getElementById('root')
+);

webpack.config.js

@@ -0,0 +1,27 @@
+const webpack = require('webpack');
+
+module.exports = {
+  entry: './reactApp/app.js',
+  output: {
+    path: __dirname + '/build',
+    filename: 'app.bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['react', 'es2015']
+          }
+        }
+      }
+    ]
+  },
+  stats: {
+    colors: true
+  },
+  devtool: 'source-map'
+};