Initial commit
12
.editorconfig
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
33
.eslintignore
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
.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
|
||||||
|
|
||||||
|
release/app/dist
|
||||||
|
release/build
|
||||||
|
.erb/dll
|
||||||
|
|
||||||
|
.idea
|
||||||
|
npm-debug.log.*
|
||||||
|
*.css.d.ts
|
||||||
|
*.sass.d.ts
|
||||||
|
*.scss.d.ts
|
||||||
|
|
||||||
|
# eslint ignores hidden directories by default:
|
||||||
|
# https://github.com/eslint/eslint/issues/8429
|
||||||
|
!.erb
|
||||||
30
.eslintrc.js
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
module.exports = {
|
||||||
|
extends: 'erb',
|
||||||
|
rules: {
|
||||||
|
// A temporary hack related to IDE not resolving correct package.json
|
||||||
|
'import/no-extraneous-dependencies': 'off',
|
||||||
|
'import/no-unresolved': 'error',
|
||||||
|
// Since React 17 and typescript 4.1 you can safely disable the rule
|
||||||
|
'react/react-in-jsx-scope': '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.ts'),
|
||||||
|
},
|
||||||
|
typescript: {},
|
||||||
|
},
|
||||||
|
'import/parsers': {
|
||||||
|
'@typescript-eslint/parser': ['.ts', '.tsx'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
12
.gitattributes
vendored
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
* text eol=lf
|
||||||
|
*.exe binary
|
||||||
|
*.png binary
|
||||||
|
*.jpg binary
|
||||||
|
*.jpeg binary
|
||||||
|
*.ico binary
|
||||||
|
*.icns binary
|
||||||
|
*.eot binary
|
||||||
|
*.otf binary
|
||||||
|
*.ttf binary
|
||||||
|
*.woff binary
|
||||||
|
*.woff2 binary
|
||||||
29
.gitignore
vendored
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
.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
|
||||||
|
|
||||||
|
release/app/dist
|
||||||
|
release/build
|
||||||
|
.erb/dll
|
||||||
|
|
||||||
|
.idea
|
||||||
|
npm-debug.log.*
|
||||||
|
*.css.d.ts
|
||||||
|
*.sass.d.ts
|
||||||
|
*.scss.d.ts
|
||||||
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["dbaeumer.vscode-eslint", "EditorConfig.EditorConfig"]
|
||||||
|
}
|
||||||
30
.vscode/launch.json
vendored
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"name": "Electron: Main",
|
||||||
|
"type": "node",
|
||||||
|
"request": "launch",
|
||||||
|
"protocol": "inspector",
|
||||||
|
"runtimeExecutable": "npm",
|
||||||
|
"runtimeArgs": ["run", "start"],
|
||||||
|
"env": {
|
||||||
|
"MAIN_ARGS": "--inspect=5858 --remote-debugging-port=9223"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Electron: Renderer",
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "attach",
|
||||||
|
"port": 9223,
|
||||||
|
"webRoot": "${workspaceFolder}",
|
||||||
|
"timeout": 15000
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"compounds": [
|
||||||
|
{
|
||||||
|
"name": "Electron: All",
|
||||||
|
"configurations": ["Electron: Main", "Electron: Renderer"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
30
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"files.associations": {
|
||||||
|
".eslintrc": "jsonc",
|
||||||
|
".prettierrc": "jsonc",
|
||||||
|
".eslintignore": "ignore"
|
||||||
|
},
|
||||||
|
|
||||||
|
"eslint.validate": [
|
||||||
|
"javascript",
|
||||||
|
"javascriptreact",
|
||||||
|
"html",
|
||||||
|
"typescriptreact"
|
||||||
|
],
|
||||||
|
|
||||||
|
"javascript.validate.enable": false,
|
||||||
|
"javascript.format.enable": false,
|
||||||
|
"typescript.format.enable": false,
|
||||||
|
|
||||||
|
"search.exclude": {
|
||||||
|
".git": true,
|
||||||
|
".eslintcache": true,
|
||||||
|
".erb/dll": true,
|
||||||
|
"release/{build,app/dist}": true,
|
||||||
|
"node_modules": true,
|
||||||
|
"npm-debug.log.*": true,
|
||||||
|
"test/**/__snapshots__": true,
|
||||||
|
"package-lock.json": true,
|
||||||
|
"*.{css,sass,scss}.d.ts": true
|
||||||
|
}
|
||||||
|
}
|
||||||
21
LICENSE
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2022 Luke Hagar
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
31
assets/assets.d.ts
vendored
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
type Styles = Record<string, string>;
|
||||||
|
|
||||||
|
declare module '*.svg' {
|
||||||
|
const content: string;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.png' {
|
||||||
|
const content: string;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.jpg' {
|
||||||
|
const content: string;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.scss' {
|
||||||
|
const content: Styles;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.sass' {
|
||||||
|
const content: Styles;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.css' {
|
||||||
|
const content: Styles;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
10
assets/entitlements.mac.plist
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||||
|
<plist version="1.0">
|
||||||
|
<dict>
|
||||||
|
<key>com.apple.security.cs.allow-unsigned-executable-memory</key>
|
||||||
|
<true/>
|
||||||
|
<key>com.apple.security.cs.allow-jit</key>
|
||||||
|
<true/>
|
||||||
|
</dict>
|
||||||
|
</plist>
|
||||||
BIN
assets/icon.icns
Normal file
BIN
assets/icon.ico
Normal file
|
After Width: | Height: | Size: 361 KiB |
BIN
assets/icon.png
Executable file
|
After Width: | Height: | Size: 32 KiB |
23
assets/icon.svg
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<svg width="232" height="232" viewBox="0 0 232 232" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g filter="url(#filter0_b)">
|
||||||
|
<path d="M231.5 1V0.5H231H1H0.5V1V231V231.5H1H231H231.5V231V1ZM40.5 25C40.5 33.0082 34.0082 39.5 26 39.5C17.9918 39.5 11.5 33.0082 11.5 25C11.5 16.9918 17.9918 10.5 26 10.5C34.0082 10.5 40.5 16.9918 40.5 25ZM220.5 25C220.5 33.0082 214.008 39.5 206 39.5C197.992 39.5 191.5 33.0082 191.5 25C191.5 16.9918 197.992 10.5 206 10.5C214.008 10.5 220.5 16.9918 220.5 25ZM40.5 205C40.5 213.008 34.0082 219.5 26 219.5C17.9918 219.5 11.5 213.008 11.5 205C11.5 196.992 17.9918 190.5 26 190.5C34.0082 190.5 40.5 196.992 40.5 205ZM220.5 205C220.5 213.008 214.008 219.5 206 219.5C197.992 219.5 191.5 213.008 191.5 205C191.5 196.992 197.992 190.5 206 190.5C214.008 190.5 220.5 196.992 220.5 205ZM209.5 111C209.5 162.639 167.639 204.5 116 204.5C64.3613 204.5 22.5 162.639 22.5 111C22.5 59.3613 64.3613 17.5 116 17.5C167.639 17.5 209.5 59.3613 209.5 111Z" fill="white" stroke="white"/>
|
||||||
|
<path d="M63.5 146.5C63.5 149.959 60.8969 152.5 58 152.5C55.1031 152.5 52.5 149.959 52.5 146.5C52.5 143.041 55.1031 140.5 58 140.5C60.8969 140.5 63.5 143.041 63.5 146.5Z" stroke="white" stroke-width="5"/>
|
||||||
|
<path d="M54.9856 139.466C54.9856 139.466 51.1973 116.315 83.1874 93.1647C115.178 70.014 133.698 69.5931 133.698 69.5931" stroke="white" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
<path d="M178.902 142.686C177.27 139.853 173.652 138.88 170.819 140.512C167.987 142.144 167.014 145.762 168.646 148.595C170.277 151.427 173.896 152.4 176.728 150.768C179.561 149.137 180.534 145.518 178.902 142.686Z" stroke="white" stroke-width="5"/>
|
||||||
|
<path d="M169.409 151.555C169.409 151.555 151.24 166.394 115.211 150.232C79.182 134.07 69.5718 118.232 69.5718 118.232" stroke="white" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
<path d="M109.577 41.9707C107.966 44.8143 108.964 48.4262 111.808 50.038C114.651 51.6498 118.263 50.6512 119.875 47.8075C121.487 44.9639 120.488 41.3521 117.645 39.7403C114.801 38.1285 111.189 39.1271 109.577 41.9707Z" stroke="white" stroke-width="5"/>
|
||||||
|
<path d="M122.038 45.6467C122.038 45.6467 144.047 53.7668 148.412 93.0129C152.778 132.259 144.012 148.579 144.012 148.579" stroke="white" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
<path d="M59.6334 105C59.6334 105 50.4373 82.1038 61.3054 73.3616C72.1736 64.6194 96 69.1987 96 69.1987" stroke="white" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
<path d="M149.532 66.9784C149.532 66.9784 174.391 68.9134 177.477 82.6384C180.564 96.3634 165.799 115.833 165.799 115.833" stroke="white" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
<path d="M138.248 163.363C138.248 163.363 124.023 183.841 110.618 179.573C97.2129 175.305 87.8662 152.728 87.8662 152.728" stroke="white" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
<path d="M116 119C120.418 119 124 115.642 124 111.5C124 107.358 120.418 104 116 104C111.582 104 108 107.358 108 111.5C108 115.642 111.582 119 116 119Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_b" x="-4" y="-4" width="240" height="240" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feGaussianBlur in="BackgroundImage" stdDeviation="2"/>
|
||||||
|
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
BIN
assets/icons/1024x1024.png
Executable file
|
After Width: | Height: | Size: 156 KiB |
BIN
assets/icons/128x128.png
Executable file
|
After Width: | Height: | Size: 17 KiB |
BIN
assets/icons/16x16.png
Executable file
|
After Width: | Height: | Size: 954 B |
BIN
assets/icons/24x24.png
Executable file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
assets/icons/256x256.png
Executable file
|
After Width: | Height: | Size: 32 KiB |
BIN
assets/icons/32x32.png
Executable file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
assets/icons/48x48.png
Executable file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
assets/icons/512x512.png
Executable file
|
After Width: | Height: | Size: 77 KiB |
BIN
assets/icons/64x64.png
Executable file
|
After Width: | Height: | Size: 7.3 KiB |
BIN
assets/icons/96x96.png
Executable file
|
After Width: | Height: | Size: 12 KiB |
31770
package-lock.json
generated
Normal file
269
package.json
Normal file
@@ -0,0 +1,269 @@
|
|||||||
|
{
|
||||||
|
"description": "A foundation for scalable desktop apps",
|
||||||
|
"keywords": [
|
||||||
|
"electron",
|
||||||
|
"boilerplate",
|
||||||
|
"react",
|
||||||
|
"typescript",
|
||||||
|
"ts",
|
||||||
|
"sass",
|
||||||
|
"webpack",
|
||||||
|
"hot",
|
||||||
|
"reload"
|
||||||
|
],
|
||||||
|
"homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/electron-react-boilerplate/electron-react-boilerplate.git"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"main": "./src/main/main.ts",
|
||||||
|
"scripts": {
|
||||||
|
"build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
|
||||||
|
"build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
|
||||||
|
"build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
|
||||||
|
"postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
|
||||||
|
"lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
|
||||||
|
"package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
|
||||||
|
"prepare": "husky install",
|
||||||
|
"rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
|
||||||
|
"start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
|
||||||
|
"start:main": "cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only .",
|
||||||
|
"start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
|
||||||
|
"start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
|
||||||
|
"test": "jest"
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.{js,jsx,ts,tsx}": [
|
||||||
|
"cross-env NODE_ENV=development eslint --cache"
|
||||||
|
],
|
||||||
|
"*.json,.{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"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": [],
|
||||||
|
"prettier": {
|
||||||
|
"singleQuote": true,
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": [
|
||||||
|
".prettierrc",
|
||||||
|
".eslintrc"
|
||||||
|
],
|
||||||
|
"options": {
|
||||||
|
"parser": "json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"jest": {
|
||||||
|
"moduleDirectories": [
|
||||||
|
"node_modules",
|
||||||
|
"release/app/node_modules"
|
||||||
|
],
|
||||||
|
"moduleFileExtensions": [
|
||||||
|
"js",
|
||||||
|
"jsx",
|
||||||
|
"ts",
|
||||||
|
"tsx",
|
||||||
|
"json"
|
||||||
|
],
|
||||||
|
"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"
|
||||||
|
},
|
||||||
|
"setupFiles": [
|
||||||
|
"./.erb/scripts/check-build-exists.ts"
|
||||||
|
],
|
||||||
|
"testEnvironment": "jsdom",
|
||||||
|
"testEnvironmentOptions": {
|
||||||
|
"url": "http://localhost/"
|
||||||
|
},
|
||||||
|
"testPathIgnorePatterns": [
|
||||||
|
"release/app/dist"
|
||||||
|
],
|
||||||
|
"transform": {
|
||||||
|
"\\.(ts|tsx|js|jsx)$": "ts-jest"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@emotion/react": "^11.9.3",
|
||||||
|
"@emotion/styled": "^11.9.3",
|
||||||
|
"@mui/icons-material": "^5.8.4",
|
||||||
|
"@mui/material": "^5.9.0",
|
||||||
|
"antd": "^4.21.7",
|
||||||
|
"antd-mobile": "^5.18.0",
|
||||||
|
"electron-debug": "^3.2.0",
|
||||||
|
"electron-log": "^4.4.7",
|
||||||
|
"electron-updater": "^5.0.3",
|
||||||
|
"react": "^18.1.0",
|
||||||
|
"react-dom": "^18.1.0",
|
||||||
|
"react-router-dom": "^6.3.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.6",
|
||||||
|
"@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
|
||||||
|
"@testing-library/jest-dom": "^5.16.4",
|
||||||
|
"@testing-library/react": "^13.2.0",
|
||||||
|
"@types/jest": "^27.5.1",
|
||||||
|
"@types/node": "17.0.33",
|
||||||
|
"@types/react": "^18.0.9",
|
||||||
|
"@types/react-dom": "^18.0.4",
|
||||||
|
"@types/react-test-renderer": "^18.0.0",
|
||||||
|
"@types/terser-webpack-plugin": "^5.0.4",
|
||||||
|
"@types/webpack-bundle-analyzer": "^4.4.1",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.23.0",
|
||||||
|
"@typescript-eslint/parser": "^5.23.0",
|
||||||
|
"browserslist-config-erb": "^0.0.3",
|
||||||
|
"chalk": "^4.1.2",
|
||||||
|
"concurrently": "^7.1.0",
|
||||||
|
"core-js": "^3.22.5",
|
||||||
|
"cross-env": "^7.0.3",
|
||||||
|
"css-loader": "^6.7.1",
|
||||||
|
"css-minimizer-webpack-plugin": "^3.4.1",
|
||||||
|
"detect-port": "^1.3.0",
|
||||||
|
"electron": "^18.2.3",
|
||||||
|
"electron-builder": "^23.0.3",
|
||||||
|
"electron-devtools-installer": "^3.2.0",
|
||||||
|
"electron-notarize": "^1.2.1",
|
||||||
|
"electron-rebuild": "^3.2.7",
|
||||||
|
"electronmon": "^2.0.2",
|
||||||
|
"eslint": "^8.15.0",
|
||||||
|
"eslint-config-airbnb-base": "^15.0.0",
|
||||||
|
"eslint-config-erb": "^4.0.3",
|
||||||
|
"eslint-import-resolver-typescript": "^2.7.1",
|
||||||
|
"eslint-import-resolver-webpack": "^0.13.2",
|
||||||
|
"eslint-plugin-compat": "^4.0.2",
|
||||||
|
"eslint-plugin-import": "^2.26.0",
|
||||||
|
"eslint-plugin-jest": "^26.2.2",
|
||||||
|
"eslint-plugin-jsx-a11y": "^6.5.1",
|
||||||
|
"eslint-plugin-promise": "^6.0.0",
|
||||||
|
"eslint-plugin-react": "^7.29.4",
|
||||||
|
"eslint-plugin-react-hooks": "^4.5.0",
|
||||||
|
"file-loader": "^6.2.0",
|
||||||
|
"html-webpack-plugin": "^5.5.0",
|
||||||
|
"husky": "^8.0.1",
|
||||||
|
"identity-obj-proxy": "^3.0.0",
|
||||||
|
"jest": "^28.1.0",
|
||||||
|
"jest-environment-jsdom": "^28.1.0",
|
||||||
|
"lint-staged": "^12.4.1",
|
||||||
|
"mini-css-extract-plugin": "^2.6.0",
|
||||||
|
"prettier": "^2.6.2",
|
||||||
|
"react-refresh": "^0.13.0",
|
||||||
|
"react-test-renderer": "^18.1.0",
|
||||||
|
"rimraf": "^3.0.2",
|
||||||
|
"sass": "^1.51.0",
|
||||||
|
"sass-loader": "^12.6.0",
|
||||||
|
"style-loader": "^3.3.1",
|
||||||
|
"terser-webpack-plugin": "^5.3.1",
|
||||||
|
"ts-jest": "^28.0.2",
|
||||||
|
"ts-loader": "^9.3.0",
|
||||||
|
"ts-node": "^10.7.0",
|
||||||
|
"typescript": "^4.6.4",
|
||||||
|
"url-loader": "^4.1.1",
|
||||||
|
"webpack": "^5.72.1",
|
||||||
|
"webpack-bundle-analyzer": "^4.5.0",
|
||||||
|
"webpack-cli": "^4.9.2",
|
||||||
|
"webpack-dev-server": "^4.9.0",
|
||||||
|
"webpack-merge": "^5.8.0"
|
||||||
|
},
|
||||||
|
"build": {
|
||||||
|
"productName": "ElectronReact",
|
||||||
|
"appId": "org.erb.ElectronReact",
|
||||||
|
"asar": true,
|
||||||
|
"asarUnpack": "**\\*.{node,dll}",
|
||||||
|
"files": [
|
||||||
|
"dist",
|
||||||
|
"node_modules",
|
||||||
|
"package.json"
|
||||||
|
],
|
||||||
|
"afterSign": ".erb/scripts/notarize.js",
|
||||||
|
"mac": {
|
||||||
|
"target": {
|
||||||
|
"target": "default",
|
||||||
|
"arch": [
|
||||||
|
"arm64",
|
||||||
|
"x64"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"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": "release/app",
|
||||||
|
"buildResources": "assets",
|
||||||
|
"output": "release/build"
|
||||||
|
},
|
||||||
|
"extraResources": [
|
||||||
|
"./assets/**"
|
||||||
|
],
|
||||||
|
"publish": {
|
||||||
|
"provider": "github",
|
||||||
|
"owner": "electron-react-boilerplate",
|
||||||
|
"repo": "electron-react-boilerplate"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"collective": {
|
||||||
|
"url": "https://opencollective.com/electron-react-boilerplate-594"
|
||||||
|
},
|
||||||
|
"devEngines": {
|
||||||
|
"node": ">=14.x",
|
||||||
|
"npm": ">=7.x"
|
||||||
|
},
|
||||||
|
"electronmon": {
|
||||||
|
"patterns": [
|
||||||
|
"!**/**",
|
||||||
|
"src/main/*"
|
||||||
|
],
|
||||||
|
"logLevel": "quiet"
|
||||||
|
}
|
||||||
|
}
|
||||||
14
release/app/package-lock.json
generated
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "electron-react-boilerplate",
|
||||||
|
"version": "4.6.0",
|
||||||
|
"lockfileVersion": 2,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "electron-react-boilerplate",
|
||||||
|
"version": "4.6.0",
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"license": "MIT"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
18
release/app/package.json
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"name": "electron-react-boilerplate",
|
||||||
|
"version": "4.6.0",
|
||||||
|
"description": "A foundation for scalable desktop apps",
|
||||||
|
"license": "MIT",
|
||||||
|
"author": {
|
||||||
|
"name": "Electron React Boilerplate Maintainers",
|
||||||
|
"email": "electronreactboilerplate@gmail.com",
|
||||||
|
"url": "https://github.com/electron-react-boilerplate"
|
||||||
|
},
|
||||||
|
"main": "./dist/main/main.js",
|
||||||
|
"scripts": {
|
||||||
|
"electron-rebuild": "node -r ts-node/register ../../.erb/scripts/electron-rebuild.js",
|
||||||
|
"postinstall": "npm run electron-rebuild && npm run link-modules",
|
||||||
|
"link-modules": "node -r ts-node/register ../../.erb/scripts/link-modules.ts"
|
||||||
|
},
|
||||||
|
"dependencies": {}
|
||||||
|
}
|
||||||
9
src/__tests__/App.test.tsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import '@testing-library/jest-dom';
|
||||||
|
import { render } from '@testing-library/react';
|
||||||
|
import App from '../renderer/App';
|
||||||
|
|
||||||
|
describe('App', () => {
|
||||||
|
it('should render', () => {
|
||||||
|
expect(render(<App />)).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
137
src/main/main.ts
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
/* eslint global-require: off, no-console: off, promise/always-return: off */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This module executes inside of electron's main process. You can start
|
||||||
|
* electron renderer process from here and communicate with the other processes
|
||||||
|
* through IPC.
|
||||||
|
*
|
||||||
|
* When running `npm run build` or `npm run build:main`, this file is compiled to
|
||||||
|
* `./src/main.js` using webpack. This gives us some performance wins.
|
||||||
|
*/
|
||||||
|
import path from 'path';
|
||||||
|
import { app, BrowserWindow, shell, ipcMain } from 'electron';
|
||||||
|
import { autoUpdater } from 'electron-updater';
|
||||||
|
import log from 'electron-log';
|
||||||
|
import MenuBuilder from './menu';
|
||||||
|
import { resolveHtmlPath } from './util';
|
||||||
|
|
||||||
|
class AppUpdater {
|
||||||
|
constructor() {
|
||||||
|
log.transports.file.level = 'info';
|
||||||
|
autoUpdater.logger = log;
|
||||||
|
autoUpdater.checkForUpdatesAndNotify();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let mainWindow: BrowserWindow | null = null;
|
||||||
|
|
||||||
|
ipcMain.on('ipc-example', async (event, arg) => {
|
||||||
|
const msgTemplate = (pingPong: string) => `IPC test: ${pingPong}`;
|
||||||
|
console.log(msgTemplate(arg));
|
||||||
|
event.reply('ipc-example', msgTemplate('pong'));
|
||||||
|
});
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
const sourceMapSupport = require('source-map-support');
|
||||||
|
sourceMapSupport.install();
|
||||||
|
}
|
||||||
|
|
||||||
|
const isDebug =
|
||||||
|
process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';
|
||||||
|
|
||||||
|
if (isDebug) {
|
||||||
|
require('electron-debug')();
|
||||||
|
}
|
||||||
|
|
||||||
|
const installExtensions = async () => {
|
||||||
|
const installer = require('electron-devtools-installer');
|
||||||
|
const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
|
||||||
|
const extensions = ['REACT_DEVELOPER_TOOLS'];
|
||||||
|
|
||||||
|
return installer
|
||||||
|
.default(
|
||||||
|
extensions.map((name) => installer[name]),
|
||||||
|
forceDownload
|
||||||
|
)
|
||||||
|
.catch(console.log);
|
||||||
|
};
|
||||||
|
|
||||||
|
const createWindow = async () => {
|
||||||
|
if (isDebug) {
|
||||||
|
await installExtensions();
|
||||||
|
}
|
||||||
|
|
||||||
|
const RESOURCES_PATH = app.isPackaged
|
||||||
|
? path.join(process.resourcesPath, 'assets')
|
||||||
|
: path.join(__dirname, '../../assets');
|
||||||
|
|
||||||
|
const getAssetPath = (...paths: string[]): string => {
|
||||||
|
return path.join(RESOURCES_PATH, ...paths);
|
||||||
|
};
|
||||||
|
|
||||||
|
mainWindow = new BrowserWindow({
|
||||||
|
show: false,
|
||||||
|
width: 1024,
|
||||||
|
height: 728,
|
||||||
|
icon: getAssetPath('icon.png'),
|
||||||
|
webPreferences: {
|
||||||
|
preload: app.isPackaged
|
||||||
|
? path.join(__dirname, 'preload.js')
|
||||||
|
: path.join(__dirname, '../../.erb/dll/preload.js'),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
mainWindow.loadURL(resolveHtmlPath('index.html'));
|
||||||
|
|
||||||
|
mainWindow.on('ready-to-show', () => {
|
||||||
|
if (!mainWindow) {
|
||||||
|
throw new Error('"mainWindow" is not defined');
|
||||||
|
}
|
||||||
|
if (process.env.START_MINIMIZED) {
|
||||||
|
mainWindow.minimize();
|
||||||
|
} else {
|
||||||
|
mainWindow.show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
mainWindow.on('closed', () => {
|
||||||
|
mainWindow = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
const menuBuilder = new MenuBuilder(mainWindow);
|
||||||
|
menuBuilder.buildMenu();
|
||||||
|
|
||||||
|
// Open urls in the user's browser
|
||||||
|
mainWindow.webContents.setWindowOpenHandler((edata) => {
|
||||||
|
shell.openExternal(edata.url);
|
||||||
|
return { action: 'deny' };
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove this if your app does not use auto updates
|
||||||
|
// eslint-disable-next-line
|
||||||
|
new AppUpdater();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add event listeners...
|
||||||
|
*/
|
||||||
|
|
||||||
|
app.on('window-all-closed', () => {
|
||||||
|
// Respect the OSX convention of having the application in memory even
|
||||||
|
// after all windows have been closed
|
||||||
|
if (process.platform !== 'darwin') {
|
||||||
|
app.quit();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
app
|
||||||
|
.whenReady()
|
||||||
|
.then(() => {
|
||||||
|
createWindow();
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(console.log);
|
||||||
290
src/main/menu.ts
Normal file
@@ -0,0 +1,290 @@
|
|||||||
|
import {
|
||||||
|
app,
|
||||||
|
Menu,
|
||||||
|
shell,
|
||||||
|
BrowserWindow,
|
||||||
|
MenuItemConstructorOptions,
|
||||||
|
} from 'electron';
|
||||||
|
|
||||||
|
interface DarwinMenuItemConstructorOptions extends MenuItemConstructorOptions {
|
||||||
|
selector?: string;
|
||||||
|
submenu?: DarwinMenuItemConstructorOptions[] | Menu;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class MenuBuilder {
|
||||||
|
mainWindow: BrowserWindow;
|
||||||
|
|
||||||
|
constructor(mainWindow: BrowserWindow) {
|
||||||
|
this.mainWindow = mainWindow;
|
||||||
|
}
|
||||||
|
|
||||||
|
buildMenu(): Menu {
|
||||||
|
if (
|
||||||
|
process.env.NODE_ENV === 'development' ||
|
||||||
|
process.env.DEBUG_PROD === 'true'
|
||||||
|
) {
|
||||||
|
this.setupDevelopmentEnvironment();
|
||||||
|
}
|
||||||
|
|
||||||
|
const template =
|
||||||
|
process.platform === 'darwin'
|
||||||
|
? this.buildDarwinTemplate()
|
||||||
|
: this.buildDefaultTemplate();
|
||||||
|
|
||||||
|
const menu = Menu.buildFromTemplate(template);
|
||||||
|
Menu.setApplicationMenu(menu);
|
||||||
|
|
||||||
|
return menu;
|
||||||
|
}
|
||||||
|
|
||||||
|
setupDevelopmentEnvironment(): void {
|
||||||
|
this.mainWindow.webContents.on('context-menu', (_, props) => {
|
||||||
|
const { x, y } = props;
|
||||||
|
|
||||||
|
Menu.buildFromTemplate([
|
||||||
|
{
|
||||||
|
label: 'Inspect element',
|
||||||
|
click: () => {
|
||||||
|
this.mainWindow.webContents.inspectElement(x, y);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]).popup({ window: this.mainWindow });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
buildDarwinTemplate(): MenuItemConstructorOptions[] {
|
||||||
|
const subMenuAbout: DarwinMenuItemConstructorOptions = {
|
||||||
|
label: 'Electron',
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: 'About ElectronReact',
|
||||||
|
selector: 'orderFrontStandardAboutPanel:',
|
||||||
|
},
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ label: 'Services', submenu: [] },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{
|
||||||
|
label: 'Hide ElectronReact',
|
||||||
|
accelerator: 'Command+H',
|
||||||
|
selector: 'hide:',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Hide Others',
|
||||||
|
accelerator: 'Command+Shift+H',
|
||||||
|
selector: 'hideOtherApplications:',
|
||||||
|
},
|
||||||
|
{ label: 'Show All', selector: 'unhideAllApplications:' },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{
|
||||||
|
label: 'Quit',
|
||||||
|
accelerator: 'Command+Q',
|
||||||
|
click: () => {
|
||||||
|
app.quit();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const subMenuEdit: DarwinMenuItemConstructorOptions = {
|
||||||
|
label: 'Edit',
|
||||||
|
submenu: [
|
||||||
|
{ label: 'Undo', accelerator: 'Command+Z', selector: 'undo:' },
|
||||||
|
{ label: 'Redo', accelerator: 'Shift+Command+Z', selector: 'redo:' },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ label: 'Cut', accelerator: 'Command+X', selector: 'cut:' },
|
||||||
|
{ label: 'Copy', accelerator: 'Command+C', selector: 'copy:' },
|
||||||
|
{ label: 'Paste', accelerator: 'Command+V', selector: 'paste:' },
|
||||||
|
{
|
||||||
|
label: 'Select All',
|
||||||
|
accelerator: 'Command+A',
|
||||||
|
selector: 'selectAll:',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const subMenuViewDev: MenuItemConstructorOptions = {
|
||||||
|
label: 'View',
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: 'Reload',
|
||||||
|
accelerator: 'Command+R',
|
||||||
|
click: () => {
|
||||||
|
this.mainWindow.webContents.reload();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Toggle Full Screen',
|
||||||
|
accelerator: 'Ctrl+Command+F',
|
||||||
|
click: () => {
|
||||||
|
this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Toggle Developer Tools',
|
||||||
|
accelerator: 'Alt+Command+I',
|
||||||
|
click: () => {
|
||||||
|
this.mainWindow.webContents.toggleDevTools();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const subMenuViewProd: MenuItemConstructorOptions = {
|
||||||
|
label: 'View',
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: 'Toggle Full Screen',
|
||||||
|
accelerator: 'Ctrl+Command+F',
|
||||||
|
click: () => {
|
||||||
|
this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const subMenuWindow: DarwinMenuItemConstructorOptions = {
|
||||||
|
label: 'Window',
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: 'Minimize',
|
||||||
|
accelerator: 'Command+M',
|
||||||
|
selector: 'performMiniaturize:',
|
||||||
|
},
|
||||||
|
{ label: 'Close', accelerator: 'Command+W', selector: 'performClose:' },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ label: 'Bring All to Front', selector: 'arrangeInFront:' },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const subMenuHelp: MenuItemConstructorOptions = {
|
||||||
|
label: 'Help',
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: 'Learn More',
|
||||||
|
click() {
|
||||||
|
shell.openExternal('https://electronjs.org');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Documentation',
|
||||||
|
click() {
|
||||||
|
shell.openExternal(
|
||||||
|
'https://github.com/electron/electron/tree/main/docs#readme'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Community Discussions',
|
||||||
|
click() {
|
||||||
|
shell.openExternal('https://www.electronjs.org/community');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Search Issues',
|
||||||
|
click() {
|
||||||
|
shell.openExternal('https://github.com/electron/electron/issues');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const subMenuView =
|
||||||
|
process.env.NODE_ENV === 'development' ||
|
||||||
|
process.env.DEBUG_PROD === 'true'
|
||||||
|
? subMenuViewDev
|
||||||
|
: subMenuViewProd;
|
||||||
|
|
||||||
|
return [subMenuAbout, subMenuEdit, subMenuView, subMenuWindow, subMenuHelp];
|
||||||
|
}
|
||||||
|
|
||||||
|
buildDefaultTemplate() {
|
||||||
|
const templateDefault = [
|
||||||
|
{
|
||||||
|
label: '&File',
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: '&Open',
|
||||||
|
accelerator: 'Ctrl+O',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '&Close',
|
||||||
|
accelerator: 'Ctrl+W',
|
||||||
|
click: () => {
|
||||||
|
this.mainWindow.close();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '&View',
|
||||||
|
submenu:
|
||||||
|
process.env.NODE_ENV === 'development' ||
|
||||||
|
process.env.DEBUG_PROD === 'true'
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
label: '&Reload',
|
||||||
|
accelerator: 'Ctrl+R',
|
||||||
|
click: () => {
|
||||||
|
this.mainWindow.webContents.reload();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Toggle &Full Screen',
|
||||||
|
accelerator: 'F11',
|
||||||
|
click: () => {
|
||||||
|
this.mainWindow.setFullScreen(
|
||||||
|
!this.mainWindow.isFullScreen()
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Toggle &Developer Tools',
|
||||||
|
accelerator: 'Alt+Ctrl+I',
|
||||||
|
click: () => {
|
||||||
|
this.mainWindow.webContents.toggleDevTools();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: [
|
||||||
|
{
|
||||||
|
label: 'Toggle &Full Screen',
|
||||||
|
accelerator: 'F11',
|
||||||
|
click: () => {
|
||||||
|
this.mainWindow.setFullScreen(
|
||||||
|
!this.mainWindow.isFullScreen()
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Help',
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: 'Learn More',
|
||||||
|
click() {
|
||||||
|
shell.openExternal('https://electronjs.org');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Documentation',
|
||||||
|
click() {
|
||||||
|
shell.openExternal(
|
||||||
|
'https://github.com/electron/electron/tree/main/docs#readme'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Community Discussions',
|
||||||
|
click() {
|
||||||
|
shell.openExternal('https://www.electronjs.org/community');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Search Issues',
|
||||||
|
click() {
|
||||||
|
shell.openExternal('https://github.com/electron/electron/issues');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return templateDefault;
|
||||||
|
}
|
||||||
|
}
|
||||||
21
src/main/preload.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
|
||||||
|
|
||||||
|
export type Channels = 'ipc-example';
|
||||||
|
|
||||||
|
contextBridge.exposeInMainWorld('electron', {
|
||||||
|
ipcRenderer: {
|
||||||
|
sendMessage(channel: Channels, args: unknown[]) {
|
||||||
|
ipcRenderer.send(channel, args);
|
||||||
|
},
|
||||||
|
on(channel: Channels, func: (...args: unknown[]) => void) {
|
||||||
|
const subscription = (_event: IpcRendererEvent, ...args: unknown[]) =>
|
||||||
|
func(...args);
|
||||||
|
ipcRenderer.on(channel, subscription);
|
||||||
|
|
||||||
|
return () => ipcRenderer.removeListener(channel, subscription);
|
||||||
|
},
|
||||||
|
once(channel: Channels, func: (...args: unknown[]) => void) {
|
||||||
|
ipcRenderer.once(channel, (_event, ...args) => func(...args));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
18
src/main/util.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
/* eslint import/prefer-default-export: off, import/no-mutable-exports: off */
|
||||||
|
import { URL } from 'url';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
export let resolveHtmlPath: (htmlFileName: string) => string;
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV === 'development') {
|
||||||
|
const port = process.env.PORT || 1212;
|
||||||
|
resolveHtmlPath = (htmlFileName: string) => {
|
||||||
|
const url = new URL(`http://localhost:${port}`);
|
||||||
|
url.pathname = htmlFileName;
|
||||||
|
return url.href;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
resolveHtmlPath = (htmlFileName: string) => {
|
||||||
|
return `file://${path.resolve(__dirname, '../renderer/', htmlFileName)}`;
|
||||||
|
};
|
||||||
|
}
|
||||||
72
src/renderer/App.css
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
/*
|
||||||
|
* @NOTE: Prepend a `~` to css file paths that are in your node_modules
|
||||||
|
* See https://github.com/webpack-contrib/sass-loader#imports
|
||||||
|
*/
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
color: white;
|
||||||
|
height: 100vh;
|
||||||
|
background: linear-gradient(
|
||||||
|
200.96deg,
|
||||||
|
#fedc2a -29.09%,
|
||||||
|
#dd5789 51.77%,
|
||||||
|
#7a2c9e 129.35%
|
||||||
|
);
|
||||||
|
font-family: sans-serif;
|
||||||
|
overflow-y: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
appearance: none;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
box-shadow: 0px 8px 28px -6px rgba(24, 39, 75, 0.12),
|
||||||
|
0px 18px 88px -4px rgba(24, 39, 75, 0.14);
|
||||||
|
transition: all ease-in 0.1s;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
height: fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
opacity: 1;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Hello {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#components-layout-demo-side .logo {
|
||||||
|
height: 32px;
|
||||||
|
margin: 16px;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-layout .site-layout-background {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
183
src/renderer/App.jsx
Normal file
@@ -0,0 +1,183 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
|
||||||
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
|
import MuiDrawer from '@mui/material/Drawer';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import MuiAppBar from '@mui/material/AppBar';
|
||||||
|
import Toolbar from '@mui/material/Toolbar';
|
||||||
|
import List from '@mui/material/List';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
import Divider from '@mui/material/Divider';
|
||||||
|
import IconButton from '@mui/material/IconButton';
|
||||||
|
import Badge from '@mui/material/Badge';
|
||||||
|
import Container from '@mui/material/Container';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
import Paper from '@mui/material/Paper';
|
||||||
|
import Link from '@mui/material/Link';
|
||||||
|
import MenuIcon from '@mui/icons-material/Menu';
|
||||||
|
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
||||||
|
import NotificationsIcon from '@mui/icons-material/Notifications';
|
||||||
|
import { Button } from '@mui/material';
|
||||||
|
|
||||||
|
function Copyright(props) {
|
||||||
|
return (
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
color="text.secondary"
|
||||||
|
align="center"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{'Copyright © '}
|
||||||
|
<Link color="inherit" href="https://mui.com/">
|
||||||
|
Your Website
|
||||||
|
</Link>{' '}
|
||||||
|
{new Date().getFullYear()}
|
||||||
|
{'.'}
|
||||||
|
</Typography>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const drawerWidth = 240;
|
||||||
|
|
||||||
|
const AppBar = styled(MuiAppBar, {
|
||||||
|
shouldForwardProp: (prop) => prop !== 'open',
|
||||||
|
})(({ theme, open }) => ({
|
||||||
|
zIndex: theme.zIndex.drawer + 1,
|
||||||
|
transition: theme.transitions.create(['width', 'margin'], {
|
||||||
|
easing: theme.transitions.easing.sharp,
|
||||||
|
duration: theme.transitions.duration.leavingScreen,
|
||||||
|
}),
|
||||||
|
...(open && {
|
||||||
|
marginLeft: drawerWidth,
|
||||||
|
width: `calc(100% - ${drawerWidth}px)`,
|
||||||
|
transition: theme.transitions.create(['width', 'margin'], {
|
||||||
|
easing: theme.transitions.easing.sharp,
|
||||||
|
duration: theme.transitions.duration.enteringScreen,
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const Drawer = styled(MuiDrawer, {
|
||||||
|
shouldForwardProp: (prop) => prop !== 'open',
|
||||||
|
})(({ theme, open }) => ({
|
||||||
|
'& .MuiDrawer-paper': {
|
||||||
|
position: 'relative',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
width: drawerWidth,
|
||||||
|
transition: theme.transitions.create('width', {
|
||||||
|
easing: theme.transitions.easing.sharp,
|
||||||
|
duration: theme.transitions.duration.enteringScreen,
|
||||||
|
}),
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
...(!open && {
|
||||||
|
overflowX: 'hidden',
|
||||||
|
transition: theme.transitions.create('width', {
|
||||||
|
easing: theme.transitions.easing.sharp,
|
||||||
|
duration: theme.transitions.duration.leavingScreen,
|
||||||
|
}),
|
||||||
|
width: theme.spacing(7),
|
||||||
|
[theme.breakpoints.up('sm')]: {
|
||||||
|
width: theme.spacing(9),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mdTheme = createTheme();
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [open, setOpen] = React.useState(true);
|
||||||
|
const toggleDrawer = () => {
|
||||||
|
setOpen(!open);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider theme={mdTheme}>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBar position="absolute" open={open}>
|
||||||
|
<Toolbar
|
||||||
|
sx={{
|
||||||
|
pr: '24px', // keep right padding when drawer closed
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
edge="start"
|
||||||
|
color="inherit"
|
||||||
|
aria-label="open drawer"
|
||||||
|
onClick={toggleDrawer}
|
||||||
|
sx={{
|
||||||
|
marginRight: '36px',
|
||||||
|
...(open && { display: 'none' }),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Typography
|
||||||
|
component="h1"
|
||||||
|
variant="h6"
|
||||||
|
color="inherit"
|
||||||
|
noWrap
|
||||||
|
sx={{ flexGrow: 1 }}
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</Typography>
|
||||||
|
<IconButton color="inherit">
|
||||||
|
<Badge badgeContent={4} color="secondary">
|
||||||
|
<NotificationsIcon />
|
||||||
|
</Badge>
|
||||||
|
</IconButton>
|
||||||
|
</Toolbar>
|
||||||
|
</AppBar>
|
||||||
|
<Drawer variant="permanent" open={open}>
|
||||||
|
<Toolbar
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
px: [1],
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton onClick={toggleDrawer}>
|
||||||
|
<ChevronLeftIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Toolbar>
|
||||||
|
<Divider />
|
||||||
|
<Grid container direction={'column'} spacing={3}>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<Button>Home</Button>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<Button>Home</Button>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<Button>Home</Button>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<Button>Home</Button>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Drawer>
|
||||||
|
<Box
|
||||||
|
component="main"
|
||||||
|
sx={{
|
||||||
|
backgroundColor: (theme) =>
|
||||||
|
theme.palette.mode === 'light'
|
||||||
|
? theme.palette.grey[100]
|
||||||
|
: theme.palette.grey[900],
|
||||||
|
flexGrow: 1,
|
||||||
|
height: '100vh',
|
||||||
|
overflow: 'auto',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Toolbar />
|
||||||
|
<Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
|
||||||
|
<Grid container spacing={3}></Grid>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
14
src/renderer/index.ejs
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta
|
||||||
|
http-equiv="Content-Security-Policy"
|
||||||
|
content="script-src 'self' 'unsafe-inline'"
|
||||||
|
/>
|
||||||
|
<title>Hello Electron React!</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
13
src/renderer/index.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
const container = document.getElementById('root')!;
|
||||||
|
const root = createRoot(container);
|
||||||
|
root.render(<App />);
|
||||||
|
|
||||||
|
// calling IPC exposed from preload script
|
||||||
|
window.electron.ipcRenderer.once('ipc-example', (arg) => {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(arg);
|
||||||
|
});
|
||||||
|
window.electron.ipcRenderer.sendMessage('ipc-example', ['ping']);
|
||||||
18
src/renderer/preload.d.ts
vendored
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { Channels } from 'main/preload';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
electron: {
|
||||||
|
ipcRenderer: {
|
||||||
|
sendMessage(channel: Channels, args: unknown[]): void;
|
||||||
|
on(
|
||||||
|
channel: string,
|
||||||
|
func: (...args: unknown[]) => void
|
||||||
|
): (() => void) | undefined;
|
||||||
|
once(channel: string, func: (...args: unknown[]) => void): void;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {};
|
||||||
26
tsconfig.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"incremental": true,
|
||||||
|
"target": "es2021",
|
||||||
|
"module": "commonjs",
|
||||||
|
"lib": ["dom", "es2021"],
|
||||||
|
"declaration": true,
|
||||||
|
"declarationMap": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"pretty": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"baseUrl": "./src",
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"outDir": "release/app/dist"
|
||||||
|
},
|
||||||
|
"exclude": ["test", "release/build", "release/app/dist", ".erb/dll"]
|
||||||
|
}
|
||||||