├── .babelrc ├── .eslintrc.json ├── .gitignore ├── .npmignore ├── .prettierrc ├── .vscode └── settings.json ├── CHANGELOG.md ├── README.md ├── bin └── setup.js ├── config └── tag.js ├── package-lock.json ├── package.json ├── public ├── index.html └── style.css ├── src ├── components │ ├── App.tsx │ └── style.css ├── main │ └── main.ts └── renderer │ └── renderer.tsx ├── tsconfig.json ├── webpack.main.config.js ├── webpack.renderer.config.js └── webpack.rules.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/typescript", "@babel/env", "@babel/react"], 3 | "plugins": [ 4 | "@babel/proposal-class-properties", 5 | "@babel/proposal-object-rest-spread", 6 | "@babel/plugin-transform-runtime", 7 | "react-hot-loader/babel" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "plugins": ["@typescript-eslint"], 4 | "parserOptions": { 5 | "sourceType": "module", 6 | "ecmaFeatures": { 7 | "modules": true, 8 | "jsx": true 9 | }, 10 | "useJSXTextNode": true, 11 | "project": "./tsconfig.json" 12 | }, 13 | "extends": [ 14 | "plugin:@typescript-eslint/recommended", 15 | "react-app", 16 | "plugin:react-hooks/recommended", 17 | "prettier" 18 | ], 19 | "rules": { 20 | "no-shadow": 1, 21 | "@typescript-eslint/explicit-function-return-type": 0, 22 | "@typescript-eslint/no-explicit-any": 0, 23 | "@typescript-eslint/no-var-requires": 0 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | out 3 | .webpack 4 | lib -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .npmrc 2 | .env 3 | .webpack 4 | out 5 | .vscode 6 | lib/react-dev-tools -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "all" 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.background": "#282F32", 4 | "titleBar.activeBackground": "#384147", 5 | "titleBar.activeForeground": "#FBFCFC" 6 | }, 7 | "gitdoc.enabled": false 8 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### Changelog 2 | 3 | All notable changes to this project will be documented in this file. Dates are displayed in UTC. 4 | 5 | #### [v3.1.16](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.15...v3.1.16) 6 | 7 | > 5 December 2022 8 | 9 | - pkg: updated [`dbc275c`](https://github.com/saostad/Electron-React-Typescript/commit/dbc275c051e1769759cf4fab0981aea3ecead27d) 10 | - pkg: updated [`6b3e1c1`](https://github.com/saostad/Electron-React-Typescript/commit/6b3e1c112b2ac3c9cff8558575f7f86a8d4a6553) 11 | - doc: change log [`1965057`](https://github.com/saostad/Electron-React-Typescript/commit/1965057e763a061b0292c4aedf6bdff69dbf1574) 12 | 13 | #### [v3.1.15](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.14...v3.1.15) 14 | 15 | > 24 October 2022 16 | 17 | - pkg: electron 19 [`a7e6efd`](https://github.com/saostad/Electron-React-Typescript/commit/a7e6efdd9f23092d2d88c330bb9e7025e754d272) 18 | - pkg: electron v21 [`7a7f647`](https://github.com/saostad/Electron-React-Typescript/commit/7a7f647d8d8953518ac4fc2989439f432d1d1ad3) 19 | - doc: change log [`4ed45d1`](https://github.com/saostad/Electron-React-Typescript/commit/4ed45d16d812cd699e8f9a95899bc04d64736be3) 20 | 21 | #### [v3.1.14](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.13...v3.1.14) 22 | 23 | > 12 April 2022 24 | 25 | - doc: change log [`c49d7eb`](https://github.com/saostad/Electron-React-Typescript/commit/c49d7eb1328208f38bbac446d16d10506b26b77e) 26 | - doc: readme updated [`1583038`](https://github.com/saostad/Electron-React-Typescript/commit/15830387d86a7eabf335853768d083ed7902f7e0) 27 | 28 | #### [v3.1.13](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.12...v3.1.13) 29 | 30 | > 12 April 2022 31 | 32 | - pkg: updated [`dc03939`](https://github.com/saostad/Electron-React-Typescript/commit/dc03939e75699502dca95920eb167d9d0455f1d1) 33 | - pkg: updated [`eec70b5`](https://github.com/saostad/Electron-React-Typescript/commit/eec70b5cf782ec3382d1777bac84c869bfa246d8) 34 | - pkg: updated to react 18 [`8672a3d`](https://github.com/saostad/Electron-React-Typescript/commit/8672a3d531a26bcc6dce8578a191e592f808cbe9) 35 | 36 | #### [v3.1.12](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.12-beta03...v3.1.12) 37 | 38 | > 27 April 2021 39 | 40 | - doc: change log [`07b42cf`](https://github.com/saostad/Electron-React-Typescript/commit/07b42cf737a2d56fb3075d13ef17a5e9dec6ca78) 41 | - pub: v3.1.12 [`79362c8`](https://github.com/saostad/Electron-React-Typescript/commit/79362c89f040a4c6f5d639a45bbfd949b8ae4380) 42 | 43 | #### [v3.1.12-beta03](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.12-beta02...v3.1.12-beta03) 44 | 45 | > 27 April 2021 46 | 47 | - bug: fix in devtools download [`770aa60`](https://github.com/saostad/Electron-React-Typescript/commit/770aa608c76ed9bffbcfaff235a76cbc7284d77d) 48 | - doc: change log [`403f92a`](https://github.com/saostad/Electron-React-Typescript/commit/403f92a363df74fa6fdbfd88bf23f901d856c02f) 49 | 50 | #### [v3.1.12-beta02](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.12-beta01...v3.1.12-beta02) 51 | 52 | > 27 April 2021 53 | 54 | - pkg: use electron-devtools-installer to download dev tools [`6afacf2`](https://github.com/saostad/Electron-React-Typescript/commit/6afacf2a3cbdce476b0698c0f1d2813a2d1edbe2) 55 | - doc: change log [`a03e27f`](https://github.com/saostad/Electron-React-Typescript/commit/a03e27f1aee65b71f5216d2f720f57fde83a9966) 56 | 57 | #### [v3.1.12-beta01](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.11...v3.1.12-beta01) 58 | 59 | > 27 April 2021 60 | 61 | - pkg: updated [`62f37f7`](https://github.com/saostad/Electron-React-Typescript/commit/62f37f7a73ee5257a39cad250d2307f25dab4e34) 62 | - doc: change log [`93f95fd`](https://github.com/saostad/Electron-React-Typescript/commit/93f95fd9b990978bdc9ea3f8723c13af2c475deb) 63 | 64 | #### [v3.1.11](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.10...v3.1.11) 65 | 66 | > 10 March 2021 67 | 68 | - pkg: updated - electron 12 [`9a86409`](https://github.com/saostad/Electron-React-Typescript/commit/9a864096d65356b749afe95df872bd5cd7fa368e) 69 | - doc: change log [`78d3153`](https://github.com/saostad/Electron-React-Typescript/commit/78d3153dfc58f8c034f9d367de2541bb82906f15) 70 | 71 | #### [v3.1.10](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.9...v3.1.10) 72 | 73 | > 29 December 2020 74 | 75 | - package: updated [`2a618ba`](https://github.com/saostad/Electron-React-Typescript/commit/2a618bab3f0b1c98a968a1a2d3c594c7f2f5445a) 76 | - doc: change log [`c0bcedf`](https://github.com/saostad/Electron-React-Typescript/commit/c0bcedf35fba43970f889ee6b86afc124169149c) 77 | 78 | #### [v3.1.9](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.8...v3.1.9) 79 | 80 | > 8 December 2020 81 | 82 | - packages: updated Electron: 11.0.4 [`c6bb798`](https://github.com/saostad/Electron-React-Typescript/commit/c6bb798da242c356504f0287aaba54b839dbb5aa) 83 | - doc: change log [`e5d7f5e`](https://github.com/saostad/Electron-React-Typescript/commit/e5d7f5e96703df84cbdadbc119e0886de94cd5e3) 84 | 85 | #### [v3.1.8](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.7...v3.1.8) 86 | 87 | > 21 September 2020 88 | 89 | - pkg: updated [`f0077d1`](https://github.com/saostad/Electron-React-Typescript/commit/f0077d123bd7ed9147840ffbb1e0f75c3ea222b3) 90 | - doc: change log [`b6416ba`](https://github.com/saostad/Electron-React-Typescript/commit/b6416ba84f5b61b22261f6b272b1078a95f4095a) 91 | 92 | #### [v3.1.7](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.6...v3.1.7) 93 | 94 | > 17 September 2020 95 | 96 | - pkg: updated [`fdf2d34`](https://github.com/saostad/Electron-React-Typescript/commit/fdf2d3421e6c8122cb1ad0bee8bc63dea0fcd7a9) 97 | - doc: change log [`4d9ba0c`](https://github.com/saostad/Electron-React-Typescript/commit/4d9ba0c56552903553497601c44288e8bb0c2da5) 98 | 99 | #### [v3.1.6](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.5...v3.1.6) 100 | 101 | > 10 July 2020 102 | 103 | - package: updated [`2d5b51e`](https://github.com/saostad/Electron-React-Typescript/commit/2d5b51e379fd36db58275b3e8f4737f147011f63) 104 | - doc: change log [`926b5d2`](https://github.com/saostad/Electron-React-Typescript/commit/926b5d2cb977b64b0b057ae8c56fee6df804654e) 105 | 106 | #### [v3.1.5](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.4...v3.1.5) 107 | 108 | > 15 June 2020 109 | 110 | - package: updated [`3f02b58`](https://github.com/saostad/Electron-React-Typescript/commit/3f02b58d2767cbc8ffa89b3a931b45018e0dd423) 111 | - doc: change log [`71003d1`](https://github.com/saostad/Electron-React-Typescript/commit/71003d1db35497770b99ae118c3153fb2e676968) 112 | 113 | #### [v3.1.4](https://github.com/saostad/Electron-React-Typescript/compare/v3.1.3...v3.1.4) 114 | 115 | > 9 June 2020 116 | 117 | - doc: change-log and git tagging added [`30220da`](https://github.com/saostad/Electron-React-Typescript/commit/30220daf8d496ccb7d65b05003ad06b6ed415187) 118 | 119 | #### v3.1.3 120 | 121 | > 9 June 2020 122 | 123 | - package: updated to electron 9 [`2affa4c`](https://github.com/saostad/Electron-React-Typescript/commit/2affa4ca61a54cd5f4518b18f20944d1723e2c47) 124 | - first commit [`eb79803`](https://github.com/saostad/Electron-React-Typescript/commit/eb79803ba2768e074e2d897b3e85c32dce5faa65) 125 | - packages updated [`e6a77f8`](https://github.com/saostad/Electron-React-Typescript/commit/e6a77f8b28d49e75c5de4ccdb8f8ef079f9395da) 126 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Electron-React-Typescript 2 | 3 | Boilerplate for develop Electron application with React and Typescript 4 | 5 | ## How to use it 6 | 7 | - `npm init electron-ts-react FOLDER_NAME VSCode` 8 | - `cd FOLDER_NAME` 9 | - `npm start` 10 | 11 | ## Integrate in VSCode 12 | 13 | - in settings add : 14 | 15 | `"eslint.validate": [ "javascript", "javascriptreact", { "language": "typescript", "autoFix": true }, { "language": "typescriptreact", "autoFix": true }]` 16 | 17 | ## This project powered by 18 | 19 | - Electron-forge 20 | - React 21 | - Typescript 22 | - React Hot reloading 23 | - [React-dev-tools](https://github.com/MarshallOfSound/electron-devtools-installer) 24 | - Eslint for Typescript linting 25 | - Webpack 26 | - Babel 27 | -------------------------------------------------------------------------------- /bin/setup.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | const util = require("util"); 3 | const path = require("path"); 4 | 5 | /** Steps: 6 | * 1- create folder 7 | * 2- copy files to created folder 8 | * 3- run npm install 9 | * 4- run git init 10 | * 5- run vscode 11 | */ 12 | 13 | const defaultFolderName = "electron-ts-starter"; 14 | const initWorkingDirectory = process.cwd(); 15 | 16 | let folderName = defaultFolderName; 17 | if (process.argv.slice(2).length > 0) { 18 | folderName = process.argv.slice(2)[0]; 19 | } 20 | 21 | const folderPath = path.join(initWorkingDirectory, folderName); 22 | 23 | let runVsCode = false; 24 | if (process.argv.slice(2).length > 1) { 25 | runVsCode = true; 26 | } 27 | 28 | const repo = "https://github.com/saostad/Electron-React-Typescript.git"; 29 | console.log(`downloading files from repo ${repo}`); 30 | 31 | const exec = util.promisify(require("child_process").exec); 32 | async function runShellCmd(command) { 33 | try { 34 | const { stdout, stderr } = await exec(command); 35 | console.log(stdout); 36 | console.log(stderr); 37 | } catch (err) { 38 | console.error(err); 39 | } 40 | } 41 | 42 | (async () => { 43 | try { 44 | await runShellCmd(`git clone --depth 1 ${repo} ${folderName}`); 45 | process.chdir(folderPath); 46 | 47 | console.log(`installing dependencies, please wait...`); 48 | await runShellCmd(`npm i`); 49 | console.log(`dependencies installed successfully!`); 50 | 51 | await runShellCmd(`npx rimraf ./.git`); 52 | console.log(`old .git folder deleted successfully!`); 53 | 54 | await runShellCmd(`git init && git add . && git commit -am "init commit"`); 55 | console.log(`new git repo initialized successfully!`); 56 | 57 | if (runVsCode) { 58 | console.log(`starting vscode...`); 59 | runShellCmd(`code ${folderPath}`); 60 | } 61 | } catch (error) { 62 | console.log(error); 63 | } 64 | })(); 65 | -------------------------------------------------------------------------------- /config/tag.js: -------------------------------------------------------------------------------- 1 | const util = require("util"); 2 | 3 | const exec = util.promisify(require("child_process").exec); 4 | async function runShellCmd(command) { 5 | try { 6 | const { stdout, stderr } = await exec(command); 7 | console.log(stdout); 8 | console.log(stderr); 9 | } catch (err) { 10 | console.error(err); 11 | } 12 | } 13 | 14 | const version = require("../package.json").version; 15 | 16 | async function tag() { 17 | await runShellCmd(`git add .`); 18 | await runShellCmd(`git commit`); 19 | await runShellCmd(`git tag v${version}`); 20 | } 21 | tag(); 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-electron-ts-react", 3 | "productName": "electron-ts-react", 4 | "version": "3.1.16", 5 | "description": "Electron Typescript React Boilerplate / Starter", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/saostad/Electron-React-Typescript.git" 9 | }, 10 | "bin": "./bin/setup.js", 11 | "main": ".webpack/main", 12 | "scripts": { 13 | "tag": "node ./config/tag.js", 14 | "auto-changelog": "auto-changelog --hide-credit --breaking-pattern \"breaking:\"", 15 | "gen-changelog": "npm run auto-changelog && git add CHANGELOG.md && git commit -m \"doc: change log\"", 16 | "start": "electron-forge start", 17 | "package": "electron-forge package", 18 | "make": "electron-forge make", 19 | "publishOnly": "electron-forge publish", 20 | "postpublish": "npm-run-all -s tag gen-changelog" 21 | }, 22 | "keywords": [ 23 | "electron", 24 | "typescript", 25 | "react", 26 | "starter", 27 | "boilerplate" 28 | ], 29 | "author": "Saeid Ostad", 30 | "license": "MIT", 31 | "config": { 32 | "forge": { 33 | "packagerConfig": {}, 34 | "makers": [ 35 | { 36 | "name": "@electron-forge/maker-squirrel", 37 | "config": { 38 | "name": "electron-ts-react" 39 | } 40 | }, 41 | { 42 | "name": "@electron-forge/maker-zip", 43 | "platforms": [ 44 | "darwin" 45 | ] 46 | }, 47 | { 48 | "name": "@electron-forge/maker-deb", 49 | "config": {} 50 | }, 51 | { 52 | "name": "@electron-forge/maker-rpm", 53 | "config": {} 54 | } 55 | ], 56 | "plugins": [ 57 | { 58 | "name": "@electron-forge/plugin-webpack", 59 | "config": { 60 | "mainConfig": "./webpack.main.config.js", 61 | "renderer": { 62 | "config": "./webpack.renderer.config.js", 63 | "entryPoints": [ 64 | { 65 | "html": "./public/index.html", 66 | "js": "./src/renderer/renderer.tsx", 67 | "name": "main_window" 68 | } 69 | ] 70 | } 71 | } 72 | } 73 | ] 74 | } 75 | }, 76 | "dependencies": { 77 | "@hot-loader/react-dom": "^17.0.2", 78 | "react": "^18.2.0", 79 | "react-dom": "^18.2.0" 80 | }, 81 | "devDependencies": { 82 | "@babel/core": "^7.21.8", 83 | "@babel/plugin-proposal-class-properties": "^7.18.6", 84 | "@babel/plugin-proposal-object-rest-spread": "^7.20.7", 85 | "@babel/plugin-transform-runtime": "^7.21.4", 86 | "@babel/preset-env": "^7.21.5", 87 | "@babel/preset-react": "^7.18.6", 88 | "@babel/preset-typescript": "^7.21.5", 89 | "@babel/runtime": "^7.21.5", 90 | "@electron-forge/cli": "^6.1.1", 91 | "@electron-forge/maker-deb": "^6.1.1", 92 | "@electron-forge/maker-rpm": "^6.1.1", 93 | "@electron-forge/maker-squirrel": "^6.1.1", 94 | "@electron-forge/maker-zip": "^6.1.1", 95 | "@electron-forge/plugin-webpack": "^6.1.1", 96 | "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0", 97 | "@types/node": "^18.16.9", 98 | "@types/react": "^18.2.6", 99 | "@types/react-dom": "^18.2.4", 100 | "@typescript-eslint/eslint-plugin": "^5.59.6", 101 | "@typescript-eslint/parser": "^5.59.6", 102 | "auto-changelog": "^2.4.0", 103 | "babel-eslint": "^10.1.0", 104 | "babel-loader": "^9.1.2", 105 | "css-loader": "^6.7.3", 106 | "electron": "^24.3.0", 107 | "electron-devtools-installer": "^3.2.0", 108 | "electron-squirrel-startup": "^1.0.0", 109 | "eslint": "^8.40.0", 110 | "eslint-config-prettier": "^8.8.0", 111 | "eslint-config-react-app": "^7.0.1", 112 | "eslint-plugin-flowtype": "^8.0.3", 113 | "eslint-plugin-import": "^2.27.5", 114 | "eslint-plugin-jsx-a11y": "^6.7.1", 115 | "eslint-plugin-react": "^7.32.2", 116 | "eslint-plugin-react-hooks": "^4.6.0", 117 | "file-loader": "^6.2.0", 118 | "node-loader": "^2.0.0", 119 | "npm-run-all": "^4.1.5", 120 | "react-hot-loader": "^4.13.1", 121 | "style-loader": "^3.3.2", 122 | "ts-loader": "^9.4.2", 123 | "typescript": "^5.0.4", 124 | "url-loader": "^4.1.1" 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | My App Title 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /public/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saostad/Electron-React-Typescript/6b0b21840e4a12f4a1d216871b0f1c3efabc481f/public/style.css -------------------------------------------------------------------------------- /src/components/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { hot } from "react-hot-loader/root"; 3 | 4 | import "./style.css"; 5 | 6 | function App() { 7 | return ( 8 |
9 |

Hello From Electron App

10 |

Electron: {process.versions.electron}

11 |

Chrome: {process.versions.chrome}

12 |

Node: {process.versions.node}

13 |
14 | ); 15 | } 16 | 17 | export default hot(App); 18 | -------------------------------------------------------------------------------- /src/components/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: whitesmoke; 3 | } 4 | -------------------------------------------------------------------------------- /src/main/main.ts: -------------------------------------------------------------------------------- 1 | import { app, BrowserWindow } from "electron"; 2 | import installExtension, { 3 | REACT_DEVELOPER_TOOLS, 4 | } from "electron-devtools-installer"; 5 | 6 | declare global { 7 | const MAIN_WINDOW_WEBPACK_ENTRY: string; 8 | } 9 | 10 | // Handle creating/removing shortcuts on Windows when installing/uninstalling. 11 | if (require("electron-squirrel-startup")) { 12 | // eslint-disable-line global-require 13 | app.quit(); 14 | } 15 | 16 | app.whenReady().then(() => { 17 | installExtension(REACT_DEVELOPER_TOOLS, { 18 | loadExtensionOptions: { allowFileAccess: true }, 19 | forceDownload: false, 20 | }) 21 | .then((name) => console.log(`Added Extension: ${name}`)) 22 | .catch((err) => console.log("An error occurred: ", err)); 23 | }); 24 | 25 | // Keep a global reference of the window object, if you don't, the window will 26 | // be closed automatically when the JavaScript object is garbage collected. 27 | let mainWindow: null | BrowserWindow; 28 | 29 | const createWindow = () => { 30 | // Create the browser window. 31 | mainWindow = new BrowserWindow({ 32 | width: 800, 33 | height: 600, 34 | webPreferences: { 35 | nodeIntegration: true, 36 | contextIsolation: false, 37 | }, 38 | }); 39 | 40 | // and load the index.html of the app. 41 | mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY); 42 | 43 | // Open the DevTools. 44 | mainWindow.webContents.openDevTools(); 45 | 46 | // Emitted when the window is closed. 47 | mainWindow.on("closed", () => { 48 | // Dereference the window object, usually you would store windows 49 | // in an array if your app supports multi windows, this is the time 50 | // when you should delete the corresponding element. 51 | mainWindow = null; 52 | }); 53 | }; 54 | 55 | // This method will be called when Electron has finished 56 | // initialization and is ready to create browser windows. 57 | // Some APIs can only be used after this event occurs. 58 | app.on("ready", createWindow); 59 | 60 | // Quit when all windows are closed. 61 | app.on("window-all-closed", () => { 62 | // On OS X it is common for applications and their menu bar 63 | // to stay active until the user quits explicitly with Cmd + Q 64 | if (process.platform !== "darwin") { 65 | app.quit(); 66 | } 67 | }); 68 | 69 | app.on("activate", () => { 70 | // On OS X it's common to re-create a window in the app when the 71 | // dock icon is clicked and there are no other windows open. 72 | if (mainWindow === null) { 73 | createWindow(); 74 | } 75 | }); 76 | 77 | // In this file you can include the rest of your app's specific main process 78 | // code. You can also put them in separate files and import them here. 79 | -------------------------------------------------------------------------------- /src/renderer/renderer.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | import App from "../components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("app")); 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "jsx": "react", 5 | "module": "commonjs", 6 | "moduleResolution": "node", 7 | "noImplicitAny": true, 8 | "noImplicitThis": true, 9 | "strictNullChecks": true, 10 | "sourceMap": true, 11 | "target": "es5" 12 | }, 13 | "exclude": ["node_modules", "dist", "out", ".webpack"] 14 | } 15 | -------------------------------------------------------------------------------- /webpack.main.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /** 3 | * This is the main entry point for your application, it's the first file 4 | * that runs in the main process. 5 | */ 6 | entry: "./src/main/main.ts", 7 | // // Put your normal webpack config below here 8 | module: { 9 | rules: require("./webpack.rules"), 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /webpack.renderer.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // Put your normal webpack config below here 3 | resolve: { 4 | extensions: [".js", ".ts", ".tsx"], 5 | alias: { "react-dom": "@hot-loader/react-dom" }, 6 | }, 7 | module: { 8 | rules: require("./webpack.rules"), 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /webpack.rules.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | // Add support for native node modules 3 | { 4 | test: /\.node$/, 5 | use: "node-loader", 6 | }, 7 | { 8 | test: /\.(m?js|node)$/, 9 | exclude: /(.webpack|node_modules)/, 10 | parser: { amd: false }, 11 | use: { 12 | loader: "@marshallofsound/webpack-asset-relocator-loader", 13 | options: { 14 | outputAssetBase: "native_modules", 15 | }, 16 | }, 17 | }, 18 | { 19 | test: /\.(j|t)sx?$/, 20 | exclude: /node_modules/, 21 | loader: "babel-loader", 22 | }, 23 | { 24 | test: /\.(scss|css)$/, 25 | use: ["style-loader", "css-loader"], 26 | }, 27 | { 28 | test: /\.(svg|ico|icns)$/, 29 | loader: "file-loader", 30 | options: { 31 | name: "[path][name].[ext]", 32 | }, 33 | }, 34 | { 35 | test: /\.(jpg|png|woff|woff2|eot|ttf)$/, 36 | loader: "url-loader", 37 | options: { 38 | name: "[path][name].[ext]", 39 | }, 40 | }, 41 | ]; 42 | --------------------------------------------------------------------------------