Add selfmade electron/react boilerplate

Dashboard-semi-new/.eslintignore

@@ -0,0 +1,56 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+.eslintcache
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# OSX
+.DS_Store
+
+# App packaged
+release
+src/*.main.prod.js
+src/main.prod.js
+src/main.prod.js.map
+src/renderer.prod.js
+src/renderer.prod.js.map
+src/style.css
+src/style.css.map
+dist
+dll
+main.js
+main.js.map
+
+.idea
+npm-debug.log.*
+__snapshots__
+
+# Package.json
+package.json
+.travis.yml
+*.css.d.ts
+*.sass.d.ts
+*.scss.d.ts

Dashboard-semi-new/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  extends: 'erb',
+  rules: {
+    // A temporary hack related to IDE not resolving correct package.json
+    'import/no-extraneous-dependencies': 'off',
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+    createDefaultProgram: true,
+  },
+  settings: {
+    'import/resolver': {
+      // See https://github.com/benmosher/eslint-plugin-import/issues/1396#issuecomment-575727774 for line below
+      node: {},
+      webpack: {
+        config: require.resolve('./.erb/configs/webpack.config.eslint.js'),
+      },
+    },
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+  },
+};

Dashboard-semi-new/.gitignore

@@ -0,0 +1,50 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+.eslintcache
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# OSX
+.DS_Store
+
+# App packaged
+release
+src/main.prod.js
+src/main.prod.js.map
+src/renderer.prod.js
+src/renderer.prod.js.map
+src/style.css
+src/style.css.map
+dist
+dll
+main.js
+main.js.map
+
+.idea
+npm-debug.log.*
+*.css.d.ts
+*.sass.d.ts
+*.scss.d.ts

Dashboard-semi-new/package.json

@@ -0,0 +1,299 @@
+{
+  "name": "electron-react-boilerplate",
+  "productName": "ElectronReact",
+  "description": "Electron application boilerplate based on React, React Router, Webpack, React Fast Refresh for rapid application development",
+  "scripts": {
+    "build": "concurrently \"yarn build:main\" \"yarn build:renderer\"",
+    "build:main": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.main.prod.babel.js",
+    "build:renderer": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.renderer.prod.babel.js",
+    "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir src",
+    "lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
+    "package": "yarn build && electron-builder build --publish never",
+    "postinstall": "node -r @babel/register .erb/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.babel.js && opencollective-postinstall && yarn-deduplicate yarn.lock",
+    "start": "node -r @babel/register ./.erb/scripts/CheckPortInUse.js && cross-env yarn start:renderer",
+    "start:main": "cross-env NODE_ENV=development electron -r ./.erb/scripts/BabelRegister ./src/main.dev.ts",
+    "start:renderer": "cross-env NODE_ENV=development webpack serve --config ./.erb/configs/webpack.config.renderer.dev.babel.js",
+    "test": "jest"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "cross-env NODE_ENV=development eslint --cache"
+    ],
+    "{*.json,.{babelrc,eslintrc,prettierrc}}": [
+      "prettier --ignore-path .eslintignore --parser json --write"
+    ],
+    "*.{css,scss}": [
+      "prettier --ignore-path .eslintignore --single-quote --write"
+    ],
+    "*.{html,md,yml}": [
+      "prettier --ignore-path .eslintignore --single-quote --write"
+    ]
+  },
+  "build": {
+    "productName": "ElectronReact",
+    "appId": "org.erb.ElectronReact",
+    "files": [
+      "assets/",
+      "dist/",
+      "node_modules/",
+      "index.html",
+      "main.prod.js",
+      "main.prod.js.map",
+      "package.json"
+    ],
+    "afterSign": ".erb/scripts/Notarize.js",
+    "mac": {
+      "target": [
+        "dmg"
+      ],
+      "type": "distribution",
+      "hardenedRuntime": true,
+      "entitlements": "assets/entitlements.mac.plist",
+      "entitlementsInherit": "assets/entitlements.mac.plist",
+      "gatekeeperAssess": false
+    },
+    "dmg": {
+      "contents": [
+        {
+          "x": 130,
+          "y": 220
+        },
+        {
+          "x": 410,
+          "y": 220,
+          "type": "link",
+          "path": "/Applications"
+        }
+      ]
+    },
+    "win": {
+      "target": [
+        "nsis"
+      ]
+    },
+    "linux": {
+      "target": [
+        "AppImage"
+      ],
+      "category": "Development"
+    },
+    "directories": {
+      "app": "src",
+      "buildResources": "assets",
+      "output": "release"
+    },
+    "extraResources": [
+      "./assets/**"
+    ],
+    "publish": {
+      "provider": "github",
+      "owner": "electron-react-boilerplate",
+      "repo": "electron-react-boilerplate"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/electron-react-boilerplate/electron-react-boilerplate.git"
+  },
+  "author": {
+    "name": "Electron React Boilerplate Maintainers",
+    "email": "electronreactboilerplate@gmail.com",
+    "url": "https://electron-react-boilerplate.js.org"
+  },
+  "contributors": [
+    {
+      "name": "Amila Welihinda",
+      "email": "amilajack@gmail.com",
+      "url": "https://github.com/amilajack"
+    },
+    {
+      "name": "John Tran",
+      "email": "jptran318@gmail.com",
+      "url": "https://github.com/jooohhn"
+    }
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
+  },
+  "keywords": [
+    "electron",
+    "boilerplate",
+    "react",
+    "typescript",
+    "ts",
+    "sass",
+    "webpack",
+    "hot",
+    "reload"
+  ],
+  "homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
+  "jest": {
+    "testURL": "http://localhost/",
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
+      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
+    },
+    "moduleFileExtensions": [
+      "js",
+      "jsx",
+      "ts",
+      "tsx",
+      "json"
+    ],
+    "moduleDirectories": [
+      "node_modules",
+      "src/node_modules"
+    ],
+    "setupFiles": [
+      "./.erb/scripts/CheckBuildsExist.js"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-decorators": "^7.12.1",
+    "@babel/plugin-proposal-do-expressions": "^7.12.1",
+    "@babel/plugin-proposal-export-default-from": "^7.12.1",
+    "@babel/plugin-proposal-export-namespace-from": "^7.12.1",
+    "@babel/plugin-proposal-function-bind": "^7.12.1",
+    "@babel/plugin-proposal-function-sent": "^7.12.1",
+    "@babel/plugin-proposal-json-strings": "^7.12.1",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
+    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
+    "@babel/plugin-proposal-pipeline-operator": "^7.12.1",
+    "@babel/plugin-proposal-throw-expressions": "^7.12.1",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-react-constant-elements": "^7.12.1",
+    "@babel/plugin-transform-react-inline-elements": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.12.7",
+    "@babel/preset-react": "^7.12.7",
+    "@babel/preset-typescript": "^7.12.7",
+    "@babel/register": "^7.12.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@teamsupercell/typings-for-css-modules-loader": "^2.4.0",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/history": "4.7.6",
+    "@types/jest": "^26.0.15",
+    "@types/node": "14.14.10",
+    "@types/react": "^16.9.44",
+    "@types/react-dom": "^16.9.9",
+    "@types/react-router-dom": "^5.1.6",
+    "@types/react-test-renderer": "^16.9.3",
+    "@types/webpack-env": "^1.15.2",
+    "@typescript-eslint/eslint-plugin": "^4.8.1",
+    "@typescript-eslint/parser": "^4.8.1",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.1.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-dev-expression": "^0.2.2",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "browserslist-config-erb": "^0.0.1",
+    "chalk": "^4.1.0",
+    "concurrently": "^5.3.0",
+    "core-js": "^3.6.5",
+    "cross-env": "^7.0.2",
+    "css-loader": "^5.0.1",
+    "detect-port": "^1.3.0",
+    "electron": "^11.0.1",
+    "electron-builder": "^22.3.6",
+    "electron-devtools-installer": "^3.1.1",
+    "electron-notarize": "^1.0.0",
+    "electron-rebuild": "^2.3.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.3",
+    "enzyme-to-json": "^3.5.0",
+    "eslint": "^7.5.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-airbnb-typescript": "^12.0.0",
+    "eslint-config-erb": "^2.0.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-webpack": "^0.13.0",
+    "eslint-plugin-compat": "^3.8.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.0.8",
+    "file-loader": "^6.0.0",
+    "husky": "^4.2.5",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.1.0",
+    "lint-staged": "^10.2.11",
+    "mini-css-extract-plugin": "^1.3.1",
+    "node-sass": "^5.0.0",
+    "opencollective-postinstall": "^2.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "prettier": "^2.0.5",
+    "react-refresh": "^0.9.0",
+    "react-test-renderer": "^17.0.1",
+    "rimraf": "^3.0.0",
+    "sass-loader": "^10.1.0",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.0.3",
+    "typescript": "^4.0.5",
+    "url-loader": "^4.1.0",
+    "webpack": "^5.5.1",
+    "webpack-bundle-analyzer": "^4.1.0",
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^5.4.0",
+    "yarn-deduplicate": "^3.1.0"
+  },
+  "dependencies": {
+    "electron-debug": "^3.1.0",
+    "electron-log": "^4.2.4",
+    "electron-updater": "^4.3.4",
+    "history": "^5.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
+    "regenerator-runtime": "^0.13.5",
+    "source-map-support": "^0.5.19"
+  },
+  "devEngines": {
+    "node": ">=10.x",
+    "npm": ">=6.x",
+    "yarn": ">=1.21.3"
+  },
+  "collective": {
+    "url": "https://opencollective.com/electron-react-boilerplate-594"
+  },
+  "browserslist": [],
+  "prettier": {
+    "overrides": [
+      {
+        "files": [
+          ".prettierrc",
+          ".babelrc",
+          ".eslintrc"
+        ],
+        "options": {
+          "parser": "json"
+        }
+      }
+    ],
+    "singleQuote": true
+  },
+  "renovate": {
+    "extends": [
+      "bliss"
+    ],
+    "baseBranches": [
+      "next"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }
+}

Dashboard-semi-new/src/App.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function App() {
+  return <div>test</div>;
+}

Dashboard-semi-new/src/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Hello Electron React!</title>
+    <script>
+      (() => {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = './dist/style.css';
+        // HACK: Writing the script path should be done with webpack
+        document.getElementsByTagName('head')[0].appendChild(link);
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      if (typeof process === 'object') {
+        const scripts = [];
+
+        if (process.env.NODE_ENV === 'development') {
+          // Dynamically insert the DLL script in development env in the
+          // renderer process
+          scripts.push('../.erb/dll/renderer.dev.dll.js');
+
+          // Dynamically insert the bundled app script in the renderer process
+          const port = process.env.PORT || 1212;
+          scripts.push(`http://localhost:${port}/dist/renderer.dev.js`);
+        } else {
+          scripts.push('./dist/renderer.prod.js');
+        }
+
+        if (scripts.length) {
+          document.write(
+            scripts
+              .map((script) => `<script defer src="${script}"><\/script>`)
+              .join('')
+          );
+        }
+      }
+    </script>
+  </body>
+</html>

Dashboard-semi-new/src/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { render } from 'react-dom';
+import App from './App';
+import './App.global.css';
+
+render(<App />, document.getElementById('root'));

Dashboard-semi-new/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "CommonJS",
+    "lib": ["dom", "esnext"],
+    "declaration": true,
+    "declarationMap": true,
+    "noEmit": true,
+    "jsx": "react",
+    "strict": true,
+    "pretty": true,
+    "sourceMap": true,
+    /* Additional Checks */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    /* Module Resolution Options */
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "allowJs": true
+  },
+  "exclude": [
+    "test",
+    "release",
+    "src/main.prod.js",
+    "src/renderer.prod.js",
+    "src/dist",
+    ".erb/dll"
+  ]
+}

Dashboard/.eslintignore

@@ -32,13 +32,7 @@ node_modules
 
 # App packaged
 release
-src/*.main.prod.js
+build
-src/main.prod.js
-src/main.prod.js.map
-src/renderer.prod.js
-src/renderer.prod.js.map
-src/style.css
-src/style.css.map
 dist
 dll
 main.js

Dashboard/.eslintrc.js

@@ -1,26 +1,24 @@
 module.exports = {
-  extends: 'erb',
+  env: {
-  rules: {
+    browser: true,
-    // A temporary hack related to IDE not resolving correct package.json
+    es2021: true,
-    'import/no-extraneous-dependencies': 'off',
+    node: true,
   },
+  extends: ["plugin:react/recommended", "airbnb"],
+  parser: "@typescript-eslint/parser",
   parserOptions: {
-    ecmaVersion: 2020,
+    ecmaFeatures: {
-    sourceType: 'module',
+      jsx: true,
-    project: './tsconfig.json',
-    tsconfigRootDir: __dirname,
-    createDefaultProgram: true,
     },
-  settings: {
+    ecmaVersion: 12,
-    'import/resolver': {
+    sourceType: "module",
-      // See https://github.com/benmosher/eslint-plugin-import/issues/1396#issuecomment-575727774 for line below
-      node: {},
-      webpack: {
-        config: require.resolve('./.erb/configs/webpack.config.eslint.js'),
-      },
-    },
-    'import/parsers': {
-      '@typescript-eslint/parser': ['.ts', '.tsx'],
   },
+  plugins: ["react", "@typescript-eslint"],
+  rules: {
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "react/jsx-filename-extension": [1, { extensions: [".tsx", ".ts"] }],
+    "consistent-return": ["error", { treatUndefinedAsUnspecified: false }],
+    quotes: ["error", "double"],
   },
 };

Dashboard/.gitignore

@@ -1,3 +1,17 @@
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log
+
 # Logs
 logs
 *.log
@@ -13,38 +27,14 @@ lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
 .eslintcache
 
-# Dependency directory
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
-node_modules
-
 # OSX
 .DS_Store
 
 # App packaged
 release
-src/main.prod.js
-src/main.prod.js.map
-src/renderer.prod.js
-src/renderer.prod.js.map
-src/style.css
-src/style.css.map
 dist
 dll
-main.js
-main.js.map
-
-.idea
-npm-debug.log.*
-*.css.d.ts
-*.sass.d.ts
-*.scss.d.ts

Dashboard/babel.config.json

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/env", "@babel/react", "@babel/preset-typescript"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

Dashboard/package.json

@@ -1,299 +1,95 @@
 {
-  "name": "electron-react-boilerplate",
+  "name": "dashboard",
-  "productName": "ElectronReact",
+  "author": {
-  "description": "Electron application boilerplate based on React, React Router, Webpack, React Fast Refresh for rapid application development",
+    "name": "GHOSCHT"
-  "scripts": {
-    "build": "concurrently \"yarn build:main\" \"yarn build:renderer\"",
-    "build:main": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.main.prod.babel.js",
-    "build:renderer": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.renderer.prod.babel.js",
-    "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir src",
-    "lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
-    "package": "yarn build && electron-builder build --publish never",
-    "postinstall": "node -r @babel/register .erb/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.babel.js && opencollective-postinstall && yarn-deduplicate yarn.lock",
-    "start": "node -r @babel/register ./.erb/scripts/CheckPortInUse.js && cross-env yarn start:renderer",
-    "start:main": "cross-env NODE_ENV=development electron -r ./.erb/scripts/BabelRegister ./src/main.dev.ts",
-    "start:renderer": "cross-env NODE_ENV=development webpack serve --config ./.erb/configs/webpack.config.renderer.dev.babel.js",
-    "test": "jest"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "cross-env NODE_ENV=development eslint --cache"
-    ],
-    "{*.json,.{babelrc,eslintrc,prettierrc}}": [
-      "prettier --ignore-path .eslintignore --parser json --write"
-    ],
-    "*.{css,scss}": [
-      "prettier --ignore-path .eslintignore --single-quote --write"
-    ],
-    "*.{html,md,yml}": [
-      "prettier --ignore-path .eslintignore --single-quote --write"
-    ]
   },
+  "description": "",
+  "version": "0.1.0",
+  "main": "src/electron.js",
+  "private": true,
   "build": {
-    "productName": "ElectronReact",
+    "productName": "LighControl",
-    "appId": "org.erb.ElectronReact",
+    "appId": "lightcontrol.dashboard",
-    "files": [
+    "buildDependenciesFromSource": true,
-      "assets/",
+    "npmRebuild": false,
-      "dist/",
-      "node_modules/",
-      "index.html",
-      "main.prod.js",
-      "main.prod.js.map",
-      "package.json"
-    ],
-    "afterSign": ".erb/scripts/Notarize.js",
-    "mac": {
-      "target": [
-        "dmg"
-      ],
-      "type": "distribution",
-      "hardenedRuntime": true,
-      "entitlements": "assets/entitlements.mac.plist",
-      "entitlementsInherit": "assets/entitlements.mac.plist",
-      "gatekeeperAssess": false
-    },
-    "dmg": {
-      "contents": [
-        {
-          "x": 130,
-          "y": 220
-        },
-        {
-          "x": 410,
-          "y": 220,
-          "type": "link",
-          "path": "/Applications"
-        }
-      ]
-    },
     "win": {
       "target": [
         "nsis"
-      ]
-    },
-    "linux": {
-      "target": [
-        "AppImage"
       ],
-      "category": "Development"
+      "icon": "./assets/icons/win/icon.ico"
     },
     "directories": {
-      "app": "src",
       "buildResources": "assets",
       "output": "release"
     },
+    "files": [
+      "node_modules/**/*",
+      "src/*",
+      "package.json",
+      "build/**"
+    ],
     "extraResources": [
       "./assets/**"
-    ],
-    "publish": {
-      "provider": "github",
-      "owner": "electron-react-boilerplate",
-      "repo": "electron-react-boilerplate"
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/electron-react-boilerplate/electron-react-boilerplate.git"
-  },
-  "author": {
-    "name": "Electron React Boilerplate Maintainers",
-    "email": "electronreactboilerplate@gmail.com",
-    "url": "https://electron-react-boilerplate.js.org"
-  },
-  "contributors": [
-    {
-      "name": "Amila Welihinda",
-      "email": "amilajack@gmail.com",
-      "url": "https://github.com/amilajack"
-    },
-    {
-      "name": "John Tran",
-      "email": "jptran318@gmail.com",
-      "url": "https://github.com/jooohhn"
-    }
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
-  },
-  "keywords": [
-    "electron",
-    "boilerplate",
-    "react",
-    "typescript",
-    "ts",
-    "sass",
-    "webpack",
-    "hot",
-    "reload"
-  ],
-  "homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
-  "jest": {
-    "testURL": "http://localhost/",
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
-      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
-    },
-    "moduleFileExtensions": [
-      "js",
-      "jsx",
-      "ts",
-      "tsx",
-      "json"
-    ],
-    "moduleDirectories": [
-      "node_modules",
-      "src/node_modules"
-    ],
-    "setupFiles": [
-      "./.erb/scripts/CheckBuildsExist.js"
     ]
   },
+  "homepage": "./src",
+  "scripts": {
+    "web": "webpack-dev-server --mode=development --hot",
+    "build": "webpack --mode=production",
+    "start": "concurrently -k \"yarn web\" \"npm:electron\"",
+    "electron": "wait-on tcp:8080 && electron .",
+    "package": "yarn build && electron-builder --publish never",
+    "postinstall": "electron-builder install-app-deps",
+    "lint": "cross-env NODE_ENV=development eslint . --cache --fix --ext .js,.jsx,.ts,.tsx"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "@types/jest": "^26.0.23",
+    "@types/node": "^15.12.5",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.8",
+    "electron-squirrel-startup": "^1.0.0",
+    "fs-extra": "^9.0.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "serialport": "^9.2.0",
+    "typescript": "^4.3.4",
+    "electron": "^13.1.4",
+    "electron-builder": "^22.11.7",
+    "electron-devtools-installer": "^3.2.0",
+    "electron-is-dev": "^2.0.0"
+  },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.11.0",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/preset-env": "^7.11.0",
-    "@babel/plugin-proposal-decorators": "^7.12.1",
+    "@babel/preset-react": "^7.10.4",
-    "@babel/plugin-proposal-do-expressions": "^7.12.1",
+    "@types/serialport": "^8.0.1",
-    "@babel/plugin-proposal-export-default-from": "^7.12.1",
+    "@typescript-eslint/eslint-plugin": "^4.28.1",
-    "@babel/plugin-proposal-export-namespace-from": "^7.12.1",
+    "@typescript-eslint/parser": "^4.28.1",
-    "@babel/plugin-proposal-function-bind": "^7.12.1",
+    "babel-loader": "^8.1.0",
-    "@babel/plugin-proposal-function-sent": "^7.12.1",
+    "concurrently": "^6.2.0",
-    "@babel/plugin-proposal-json-strings": "^7.12.1",
+    "cross-env": "^7.0.3",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
+    "css-loader": "^4.2.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
+    "eslint": "^7.29.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
+    "eslint-config-airbnb": "^18.2.1",
-    "@babel/plugin-proposal-pipeline-operator": "^7.12.1",
+    "eslint-plugin-import": "^2.23.4",
-    "@babel/plugin-proposal-throw-expressions": "^7.12.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "eslint-plugin-react": "^7.24.0",
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "eslint-plugin-react-hooks": "^4.2.0",
-    "@babel/plugin-transform-react-constant-elements": "^7.12.1",
+    "fork-ts-checker-webpack-plugin": "^6.2.12",
-    "@babel/plugin-transform-react-inline-elements": "^7.12.1",
+    "html-webpack-plugin": "^4.3.0",
-    "@babel/plugin-transform-runtime": "^7.12.1",
+    "style-loader": "^1.2.1",
-    "@babel/preset-env": "^7.12.7",
+    "ts-loader": "^9.2.3",
-    "@babel/preset-react": "^7.12.7",
+    "wait-on": "^6.0.0",
-    "@babel/preset-typescript": "^7.12.7",
+    "webpack": "^5.41.1",
-    "@babel/register": "^7.12.1",
+    "webpack-cli": "^3.3.12",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "webpack-dev-server": "^3.11.0"
-    "@teamsupercell/typings-for-css-modules-loader": "^2.4.0",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/history": "4.7.6",
-    "@types/jest": "^26.0.15",
-    "@types/node": "14.14.10",
-    "@types/react": "^16.9.44",
-    "@types/react-dom": "^16.9.9",
-    "@types/react-router-dom": "^5.1.6",
-    "@types/react-test-renderer": "^16.9.3",
-    "@types/webpack-env": "^1.15.2",
-    "@typescript-eslint/eslint-plugin": "^4.8.1",
-    "@typescript-eslint/parser": "^4.8.1",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.1.0",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-dev-expression": "^0.2.2",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "browserslist-config-erb": "^0.0.1",
-    "chalk": "^4.1.0",
-    "concurrently": "^5.3.0",
-    "core-js": "^3.6.5",
-    "cross-env": "^7.0.2",
-    "css-loader": "^5.0.1",
-    "detect-port": "^1.3.0",
-    "electron": "^11.0.1",
-    "electron-builder": "^22.3.6",
-    "electron-devtools-installer": "^3.1.1",
-    "electron-notarize": "^1.0.0",
-    "electron-rebuild": "^2.3.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.3",
-    "enzyme-to-json": "^3.5.0",
-    "eslint": "^7.5.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-airbnb-typescript": "^12.0.0",
-    "eslint-config-erb": "^2.0.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-import-resolver-webpack": "^0.13.0",
-    "eslint-plugin-compat": "^3.8.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.0.8",
-    "file-loader": "^6.0.0",
-    "husky": "^4.2.5",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.1.0",
-    "lint-staged": "^10.2.11",
-    "mini-css-extract-plugin": "^1.3.1",
-    "node-sass": "^5.0.0",
-    "opencollective-postinstall": "^2.0.3",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "prettier": "^2.0.5",
-    "react-refresh": "^0.9.0",
-    "react-test-renderer": "^17.0.1",
-    "rimraf": "^3.0.0",
-    "sass-loader": "^10.1.0",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.0.3",
-    "typescript": "^4.0.5",
-    "url-loader": "^4.1.0",
-    "webpack": "^5.5.1",
-    "webpack-bundle-analyzer": "^4.1.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^5.4.0",
-    "yarn-deduplicate": "^3.1.0"
   },
-  "dependencies": {
+  "presets": [
-    "electron-debug": "^3.1.0",
+    "@babel/preset-env",
-    "electron-log": "^4.2.4",
+    "@babel/preset-react"
-    "electron-updater": "^4.3.4",
-    "history": "^5.0.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
-    "regenerator-runtime": "^0.13.5",
-    "source-map-support": "^0.5.19"
-  },
-  "devEngines": {
-    "node": ">=10.x",
-    "npm": ">=6.x",
-    "yarn": ">=1.21.3"
-  },
-  "collective": {
-    "url": "https://opencollective.com/electron-react-boilerplate-594"
-  },
-  "browserslist": [],
-  "prettier": {
-    "overrides": [
-      {
-        "files": [
-          ".prettierrc",
-          ".babelrc",
-          ".eslintrc"
   ],
-        "options": {
+  "bin": {
-          "parser": "json"
+    "dashboard": "./bin/start.js"
-        }
-      }
-    ],
-    "singleQuote": true
-  },
-  "renovate": {
-    "extends": [
-      "bliss"
-    ],
-    "baseBranches": [
-      "next"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
   }
 }

Dashboard/src/App.tsx

@@ -1,5 +1,43 @@
-import React from 'react';
+import React from "react";
+import SerialPort from "serialport";
 
-export default function App() {
+const App = () => {
-  return <div>test</div>;
+  const port = new SerialPort("COM5", {
+    baudRate: 9600,
+    autoOpen: false,
+  });
+  const handler = () => {
+    // eslint-disable-next-line
+    port.write('off', (err) => {
+      if (err) {
+        return console.log("Error on write: ", err.message);
       }
+      console.log("message written");
+    });
+  };
+
+  return (
+    <div>
+      <h3>Hello World</h3>
+      <button
+        type="button"
+        onClick={() => {
+          port.open();
+        }}
+      >
+        open
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          port.close();
+        }}
+      >
+        close
+      </button>
+      <button type="button" onClick={handler}>send</button>
+    </div>
+  );
+};
+
+export default App;

Dashboard/src/electron.js

@@ -0,0 +1,90 @@
+/* eslint global-require: off, no-console: off */
+const path = require("path");
+
+const { app, BrowserWindow, Tray } = require("electron");
+const isDev = require("electron-is-dev");
+
+let tray = null;
+
+// Conditionally include the dev tools installer to load React Dev Tools
+let installExtension;
+let REACT_DEVELOPER_TOOLS;
+
+if (isDev) {
+  const devTools = require("electron-devtools-installer");
+  installExtension = devTools.default;
+  REACT_DEVELOPER_TOOLS = devTools.REACT_DEVELOPER_TOOLS;
+}
+
+// Handle creating/removing shortcuts on Windows when installing/uninstalling
+if (require("electron-squirrel-startup")) {
+  app.quit();
+}
+
+const RESOURCES_PATH = app.isPackaged
+  ? path.join(process.resourcesPath, "assets")
+  : path.join(__dirname, "../assets");
+
+const getAssetPath = (...paths) => path.join(RESOURCES_PATH, ...paths);
+
+function createWindow() {
+  // Create the browser window.
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true,
+      enableRemoteModule: true,
+      contextIsolation: false,
+    },
+  });
+
+  tray = new Tray(getAssetPath("tray.png"));
+  tray.setTitle("hello world");
+
+  // and load the index.html of the app.
+  win.loadURL(
+    isDev
+      ? "http://localhost:8080"
+      : `file://${path.join(__dirname, "../build/index.html")}`,
+  );
+
+  // Open the DevTools.
+  if (isDev) {
+    win.webContents.openDevTools({ mode: "detach" });
+  }
+}
+
+// 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.whenReady().then(() => {
+  app.allowRendererProcessReuse = false;
+  createWindow();
+
+  if (isDev) {
+    installExtension(REACT_DEVELOPER_TOOLS)
+      .then((name) => console.log(`Added Extension:  ${name}`))
+      .catch((error) => console.log(`An error occurred: , ${error}`));
+  }
+});
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on("window-all-closed", () => {
+  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 (BrowserWindow.getAllWindows().length === 0) {
+    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.

Dashboard/src/index.html

@@ -1,44 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="UTF-8" />
-    <title>Hello Electron React!</title>
+    <title>Light Control</title>
-    <script>
-      (() => {
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = './dist/style.css';
-        // HACK: Writing the script path should be done with webpack
-        document.getElementsByTagName('head')[0].appendChild(link);
-      })();
-    </script>
   </head>
   <body>
     <div id="root"></div>
-    <script>
-      if (typeof process === 'object') {
-        const scripts = [];
-
-        if (process.env.NODE_ENV === 'development') {
-          // Dynamically insert the DLL script in development env in the
-          // renderer process
-          scripts.push('../.erb/dll/renderer.dev.dll.js');
-
-          // Dynamically insert the bundled app script in the renderer process
-          const port = process.env.PORT || 1212;
-          scripts.push(`http://localhost:${port}/dist/renderer.dev.js`);
-        } else {
-          scripts.push('./dist/renderer.prod.js');
-        }
-
-        if (scripts.length) {
-          document.write(
-            scripts
-              .map((script) => `<script defer src="${script}"><\/script>`)
-              .join('')
-          );
-        }
-      }
-    </script>
   </body>
 </html>

Dashboard/src/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import { render } from 'react-dom';
+import { render } from "react-dom";
-import App from './App';
-import './App.global.css';
 
-render(<App />, document.getElementById('root'));
+import App from "./App";
+
+render(<App />, document.getElementById("root"));

Dashboard/tsconfig.json

@@ -5,7 +5,7 @@
     "lib": ["dom", "esnext"],
     "declaration": true,
     "declarationMap": true,
-    "noEmit": true,
+    "noEmit": false,
     "jsx": "react",
     "strict": true,
     "pretty": true,
@@ -22,12 +22,5 @@
     "resolveJsonModule": true,
     "allowJs": true
   },
-  "exclude": [
+  "include": ["src"]
-    "test",
-    "release",
-    "src/main.prod.js",
-    "src/renderer.prod.js",
-    "src/dist",
-    ".erb/dll"
-  ]
 }

Dashboard/webpack.config.js

@@ -0,0 +1,74 @@
+const path = require("path");
+const fs = require("fs");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+
+module.exports = (env, argv) => {
+  const nodeModules = {};
+  fs.readdirSync("node_modules")
+    .filter((x) => [".bin"].indexOf(x) === -1)
+    .forEach((mod) => {
+      nodeModules[mod] = `commonjs ${mod}`;
+    });
+
+  return {
+    entry: "./src/index.tsx",
+    output: {
+      path: path.join(__dirname, "build"),
+      filename: "index.bundle.js",
+    },
+    mode: process.env.NODE_ENV || "development",
+    resolve: {
+      extensions: [".tsx", ".ts", ".js"],
+    },
+    devServer: { contentBase: path.join(__dirname, "src") },
+    devtool: "source-map",
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: ["babel-loader"],
+        },
+        {
+          test: /\.(ts|tsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true,
+            },
+          },
+        },
+        {
+          test: /\.(css|scss)$/,
+          use: ["style-loader", "css-loader"],
+        },
+        {
+          test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
+          use: ["file-loader"],
+        },
+      ],
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.join(__dirname, "src", "index.html"),
+      }),
+      new ForkTsCheckerWebpackPlugin(),
+      {
+        apply: (compiler) => {
+          compiler.hooks.done.tap("DonePlugin", () => {
+            if (argv.mode === "production") {
+              setTimeout(() => {
+                process.exit(0);
+              });
+            }
+          });
+        },
+      },
+    ],
+    watch: true,
+    target: "electron-renderer",
+    externals: nodeModules,
+  };
+};