Initial Release

oleszczyk · Feb 22, 2017 · 861403a · 861403a
1 parent 808aa36
commit 861403a
Show file tree

Hide file tree

Showing 11 changed files with 288 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["react"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+*npm-debug.log
+*.DS_Store
+dist/bundle.js
+dist/bundle.css
diff --git a/README.md b/README.md
@@ -0,0 +1,29 @@
+# Modern and Minimal Electron + React Starter Kit
+_Electron, React, Webpack -- Modern and up-to-date, with a handful of quality of life features included_
+
+I made this starter kit as most boilerplates were either out-of-date, heavy handed, or enforced a structure on me that I just didnt like.
+With a very select assortment of modules, this starter kit is designed to get you up and running very quickly, and to let you easily drop in your own structure and tools on top of it.
+The basic structure of `src/` is intentionally minimal to make it easier to allow you to put your own twist on how you like things laid out.
+
+Production builds do NOT use UglifyJS, instead Babili is used and NO ES2015/ES6 transpilation is provided -- As modern node and chromium versions support 99%+ of the ES6 feature set, I feel those steps are unnecessary.
+
+If you like this project, check out _enhanced-electron-react-boilerplate_ which is this project with my take on additional modules (photon, redux, less, css modules etc) and my personal project structure (based on the redux ducks proposal) I suggest you give it a look if you want less of a minimalistic take on my starter kit.
+
+### To get started:
+* Run `npm install`
+
+**To Develop**
+* Run `npm run dev` to start webpack dev server
+* In another terminal window run `npm run testDev` to start electron
+
+**FOR PRODUCTION**
+You have two options, an automatic build or two manual steps
+
+*One Shot*
+* Run `npm run package` to have webpack compile your application into `dist/bundle.js` and `dist/index.html`, and then an electron-packager run will be triggered for the current platform/arch using asar archives
+
+*Manual*
+* Run `npm run build` to have webpack compile and output your bundle to `dist/bundle.js`
+* Then you can call electron-packager directly with any commands you choose
+
+If you want to test the production build (In case you think Babili might be breaking something) after running `npm run build` you can then call `npm run testProd`
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <link href="./bundle.css" rel="stylesheet">
+  </head>
+  <body>
+    <script type="text/javascript" src="./bundle.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,81 @@
+'use strict';
+
+// Import parts of electron to use
+const {app, BrowserWindow} = require('electron');
+const path = require('path')
+const url = require('url')
+
+// 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;
+
+// Keep a reference for dev mode
+let dev = false;
+if ( process.defaultApp || /[\\/]electron-prebuilt[\\/]/.test(process.execPath) || /[\\/]electron[\\/]/.test(process.execPath) ) {
+  dev = true;
+}
+
+function createWindow() {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 1024, height: 768, show: false
+  });
+
+  // and load the index.html of the app.
+  let indexPath;
+  if ( dev && process.argv.indexOf('--noDevServer') === -1 ) {
+    indexPath = url.format({
+      protocol: 'http:',
+      host: 'localhost:8080',
+      pathname: 'index.html',
+      slashes: true
+    });
+  } else {
+    indexPath = url.format({
+      protocol: 'file:',
+      pathname: path.join(__dirname, 'dist', 'index.html'),
+      slashes: true
+    });
+  }
+  console.log('path', indexPath);
+  mainWindow.loadURL( indexPath );
+
+  // Don't show until we are ready and loaded
+  mainWindow.once('ready-to-show', () => {
+    mainWindow.show();
+    // Open the DevTools automatically if developing
+    if ( dev ) {
+      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', () => {
+  // On macOS 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', () => {
+  // On macOS 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();
+  }
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "basic-electron-react-boilerplate",
+  "version": "0.1.0",
+  "description": "Minimal and modern react+electron+webpack boilerplate",
+  "author": "Phillip Barbiero",
+  "homepage": "https://github.com/PhillMcKraken/basic-electron-react-boilerplate",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/PhillMcKraken/basic-electron-react-boilerplate.git"
+  },
+  "license": "MIT",
+  "main": "main.js",
+  "scripts": {
+    "testDev": "electron main.js",
+    "testProd": "electron main.js --noDevServer",
+    "dev": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
+    "build": "webpack --config webpack.build.config.js",
+    "package": "webpack --config webpack.build.config.js"
+  },
+  "devDependencies": {
+    "babel-core": "^6.23.1",
+    "babel-loader": "^6.3.2",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.23.0",
+    "babili-webpack-plugin": "0.0.10",
+    "css-loader": "^0.26.1",
+    "electron": "^1.4.15",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "html-webpack-plugin": "^2.28.0",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "style-loader": "^0.13.1",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.1"
+  }
+}
diff --git a/src/assets/css/App.css b/src/assets/css/App.css
@@ -0,0 +1,4 @@
+h1 {
+  font-family: helvetica;
+  font-weight: 200;
+}
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,15 @@
+import '../assets/css/App.css';
+import React, { Component } from 'react';
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Hello, Electron!</h1>
+        <p>I hope you enjoy using basic-electron-react-boilerplate to start your dev off right!</p>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from 'react-dom';
+import App from './components/App';
+
+// Since we are using HtmlWebpackPlugin WITHOUT a template, we should create our own root node in the body element before rendering into it
+let root = document.createElement('div');
+root.id = "root";
+document.body.appendChild( root );
+
+// Now we can render our application into it
+render( <App />, document.getElementById('root') );
diff --git a/webpack.build.config.js b/webpack.build.config.js
@@ -0,0 +1,44 @@
+const webpack = require('webpack');
+const path = require('path');
+const BabiliPlugin = require('babili-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+// Config directories
+const SRC_DIR = path.resolve(__dirname, 'src');
+const OUTPUT_DIR = path.resolve(__dirname, 'dist');
+
+// Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up
+const defaultInclude = [ SRC_DIR ];
+
+module.exports = {
+  entry: SRC_DIR + '/index.js',
+  output: {
+    path: OUTPUT_DIR,
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
+  module: {
+    rules: [
+      { test: /\.css$/, use: ExtractTextPlugin.extract({
+        fallback: "style-loader",
+        use: "css-loader"
+      }), include: defaultInclude },
+      { test: /\.js?$/, use: [
+        { loader: 'babel-loader' }
+      ], include: defaultInclude }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin("bundle.css"),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': '"production"',
+    })/*,
+    new BabiliPlugin()*/
+  ],
+  stats: {
+    colors: true,
+    children: false,
+    chunks: false,
+    modules: false
+  }
+};
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -0,0 +1,50 @@
+const webpack = require('webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+// Config directories
+const SRC_DIR = path.resolve(__dirname, 'src');
+const OUTPUT_DIR = path.resolve(__dirname, 'dist');
+
+// Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up
+const defaultInclude = [ SRC_DIR ];
+
+module.exports = {
+  entry: SRC_DIR + '/index.js',
+  output: {
+    path: OUTPUT_DIR,
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
+  module: {
+    rules: [
+      { test: /\.css$/, use: [
+        { loader: 'style-loader' },
+        { loader: 'css-loader' }
+      ], include: defaultInclude },
+      /*{ test: /\.less$/, use: [
+        { loader: 'style-loader' },
+        { loader: 'css-loader' },
+        { loader: 'less-loader' }
+      ], include: defaultInclude },*/
+      { test: /\.js?$/, use: [
+        { loader: 'babel-loader' }
+      ], include: defaultInclude }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': '"dev"',
+    }),
+  ],
+  devtool: "cheap-source-map",
+  devServer: {
+    contentBase: OUTPUT_DIR,
+    stats: {
+      colors: true,
+      chunks: false,
+      children: false
+    }
+  }
+};