Extracted project setup as boilerplate

Author: Spring3

.babelrc

@@ -0,0 +1,40 @@
+{
+  "presets": [
+    "react",
+    ["env", {
+      "targets": {
+        "node": "8.9.3",
+        "uglify": true
+      },
+      "debug": true,
+      "exclude": ["transform-regenerator", "transform-async-to-generator"],
+      "modules": false,
+      "loose": true
+    }]
+  ],
+  "plugins": [
+    "async-to-promises",
+    "transform-object-rest-spread"
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        "react",
+        ["env", {
+          "targets": {
+            "node": "8.9.3",
+            "uglify": true
+          },
+          "exclude": ["transform-regenerator", "transform-async-to-generator"],
+          "modules": false,
+          "loose": true,
+        }]
+      ],
+      "plugins": [
+        "async-to-promises",
+        "transform-es2015-modules-commonjs",
+        "transform-object-rest-spread"
+      ]
+    }
+  }
+}

.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1,47 @@
+## basic-react-redux-electron-tailwindcss 
+
+Based on [this basic-electron-react-boilerplate](https://github.com/pbarbiero/basic-electron-react-boilerplate)
+
+This boilerplate may be useful to those who wants a small basic setup to not waist time configuring most of the tools that they usually use in their electron and react-based projects.
+
+I extracted it from one of my private projects that I am working on and I hope that you will find it useful.
+
+The following list of tools was used and configured in this boilerplate:
+- React 16
+- Redux
+- React-Router 4
+- [React-Intl](https://github.com/yahoo/react-intl#react-intl)
+- Enzyme
+- Jest
+- [Tailwindcss](https://tailwindcss.com/)
+- Purgecss
+- Webpack 3
+- Electron-packager (basic configuration)
+
+## Build an application
+- Set the name of your application in the `package.json` as `productName`.
+- Run `npm run package`
+Feel free to edit the `postpackage` command to include more options or flags for `electron-packager` to match your needs
+
+## Dev hot-reload mode
+`npm run dev`
+
+You can also build and run your prod bundle with `npm run prod`
+
+## Add language
+- Create a json file in the `src/locale` directory
+- Import it in the `src/reducers/locales.reducer.js`
+For more information, please refer to the documentation of the [react-intl module](https://github.com/yahoo/react-intl#react-intl)
+
+## Remove Tailwind
+You might be looking for the same boilerplate without Tailwindcss.
+To remove it, follow the steps described:
+- `npm uninstall -D tailwindcss postcss postcss-loader purgecss-webpack-plugin`
+- Delete `tailwind.js`, `postcss.config.js` files from the root.
+- Remove the invokation of `postcss-loader` in both `webpack` configuration files
+```
+ // remove this line specifically
+ { loader: 'postcss-loader' }
+```
+as well as `PurgeCssPlugin` from the list of plugins in`webpack.build.config.js`
+- The last thing to do is to remove `@tailwind` directives from `src/App.css`

__mocks__/styleMock.js

@@ -0,0 +1 @@
+export default {};

intl-enzyme-test-helper.js

@@ -0,0 +1,38 @@
+/**
+ * Components using the react-intl module require access to the intl context.
+ * This is not available when mounting single components in Enzyme.
+ * These helper functions aim to address that and wrap a valid,
+ * English-locale intl context around them.
+ */
+
+import React from 'react';
+import { IntlProvider, intlShape } from 'react-intl';
+import { mount, shallow } from 'enzyme';
+
+// You can pass your messages to the IntlProvider. Optional: remove if unneeded.
+import en from './src/locale/en.json';
+
+// Create the IntlProvider to retrieve context for wrapping around.
+const intlProvider = new IntlProvider({ locale: 'en', messages: en }, {});
+const { intl } = intlProvider.getChildContext();
+
+/**
+ * When using React-Intl `injectIntl` on components, props.intl is required.
+ */
+function nodeWithIntlProp(node) {
+  return React.cloneElement(node, { intl });
+}
+
+/**
+ * Export these methods.
+ */
+export function shallowWithIntl(node) {
+  return shallow(nodeWithIntlProp(node), { context: { intl } });
+}
+
+export function mountWithIntl(node) {
+  return mount(nodeWithIntlProp(node), {
+    context: { intl },
+    childContextTypes: { intl: intlShape }
+  });
+}

main.js

@@ -0,0 +1,80 @@
+'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
+    });
+  }
+  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();
+  }
+});