From 48b5f076bf5962b589e665fbe265dffa3d40d415 Mon Sep 17 00:00:00 2001 From: Xhonia Robinson Date: Mon, 7 Aug 2017 13:42:27 -0700 Subject: [PATCH] first commit --- .gitignore | 3 +++ backend/server.js | 11 ++++++++ main.js | 64 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 42 +++++++++++++++++++++++++++++++ reactApp/app.js | 21 ++++++++++++++++ webpack.config.js | 27 ++++++++++++++++++++ 6 files changed, 168 insertions(+) create mode 100644 .gitignore create mode 100644 backend/server.js create mode 100644 main.js create mode 100644 package.json create mode 100644 reactApp/app.js create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2109e19 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +build +node_modules +package-lock.json diff --git a/backend/server.js b/backend/server.js new file mode 100644 index 0000000..9d815dc --- /dev/null +++ b/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!') +}) diff --git a/main.js b/main.js new file mode 100644 index 0000000..ad34da2 --- /dev/null +++ b/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. diff --git a/package.json b/package.json new file mode 100644 index 0000000..4e16d4a --- /dev/null +++ b/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" + } +} diff --git a/reactApp/app.js b/reactApp/app.js new file mode 100644 index 0000000..eab6747 --- /dev/null +++ b/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 ( + + ); + } +} + +ReactDOM.render( + , + document.getElementById('root') +); diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..6da65c1 --- /dev/null +++ b/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' +};