├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .prettierrc ├── LICENSE.md ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── screenshot-1.png ├── src ├── declaration.d.ts ├── main │ └── main.ts └── renderer │ ├── components │ ├── App.tsx │ └── Greetings.tsx │ ├── index.tsx │ └── theme.tsx ├── static └── electron.svg ├── tsconfig.json └── webpack ├── electron.webpack.ts └── react.webpack.ts /.eslintignore: -------------------------------------------------------------------------------- 1 | */.js 2 | 3 | 4 | ### macOS ### 5 | # General 6 | .DS_Store 7 | .AppleDouble 8 | .LSOverride 9 | 10 | # Icon must end with two \r 11 | Icon 12 | 13 | # Thumbnails 14 | ._* 15 | 16 | # Files that might appear in the root of a volume 17 | .DocumentRevisions-V100 18 | .fseventsd 19 | .Spotlight-V100 20 | .TemporaryItems 21 | .Trashes 22 | .VolumeIcon.icns 23 | .com.apple.timemachine.donotpresent 24 | 25 | # Directories potentially created on remote AFP share 26 | .AppleDB 27 | .AppleDesktop 28 | Network Trash Folder 29 | Temporary Items 30 | .apdisk 31 | 32 | ### Node ### 33 | # Logs 34 | logs 35 | *.log 36 | npm-debug.log* 37 | yarn-debug.log* 38 | yarn-error.log* 39 | lerna-debug.log* 40 | 41 | # Diagnostic reports (https://nodejs.org/api/report.html) 42 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 43 | 44 | # Runtime data 45 | pids 46 | *.pid 47 | *.seed 48 | *.pid.lock 49 | 50 | # Directory for instrumented libs generated by jscoverage/JSCover 51 | lib-cov 52 | 53 | # Coverage directory used by tools like istanbul 54 | coverage 55 | *.lcov 56 | 57 | # nyc test coverage 58 | .nyc_output 59 | 60 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 61 | .grunt 62 | 63 | # Bower dependency directory (https://bower.io/) 64 | bower_components 65 | 66 | # node-waf configuration 67 | .lock-wscript 68 | 69 | # Compiled binary addons (https://nodejs.org/api/addons.html) 70 | build/Release 71 | 72 | # Dependency directories 73 | node_modules/ 74 | jspm_packages/ 75 | 76 | # Snowpack dependency directory (https://snowpack.dev/) 77 | web_modules/ 78 | 79 | # TypeScript cache 80 | *.tsbuildinfo 81 | 82 | # Optional npm cache directory 83 | .npm 84 | 85 | # Optional eslint cache 86 | .eslintcache 87 | 88 | # Microbundle cache 89 | .rpt2_cache/ 90 | .rts2_cache_cjs/ 91 | .rts2_cache_es/ 92 | .rts2_cache_umd/ 93 | 94 | # Optional REPL history 95 | .node_repl_history 96 | 97 | # Output of 'npm pack' 98 | *.tgz 99 | 100 | # Yarn Integrity file 101 | .yarn-integrity 102 | 103 | # dotenv environment variables file 104 | .env 105 | .env.test 106 | .env.local 107 | 108 | # parcel-bundler cache (https://parceljs.org/) 109 | .cache 110 | .parcel-cache 111 | 112 | # Next.js build output 113 | .next 114 | out 115 | 116 | # Nuxt.js build / generate output 117 | .nuxt 118 | dist 119 | 120 | packages 121 | 122 | # Gatsby files 123 | .cache/ 124 | # Comment in the public line in if your project uses Gatsby and not Next.js 125 | # https://nextjs.org/blog/next-9-1#public-directory-support 126 | # public 127 | 128 | # vuepress build output 129 | .vuepress/dist 130 | 131 | # Serverless directories 132 | .serverless/ 133 | 134 | # FuseBox cache 135 | .fusebox/ 136 | 137 | # DynamoDB Local files 138 | .dynamodb/ 139 | 140 | # TernJS port file 141 | .tern-port 142 | 143 | # Stores VSCode versions used for testing VSCode extensions 144 | .vscode-test 145 | 146 | # yarn v2 147 | .yarn/cache 148 | .yarn/unplugged 149 | .yarn/build-state.yml 150 | .yarn/install-state.gz 151 | .pnp.* 152 | 153 | ### vscode ### 154 | .vscode/* 155 | !.vscode/settings.json 156 | !.vscode/tasks.json 157 | !.vscode/launch.json 158 | !.vscode/extensions.json 159 | *.code-workspace 160 | 161 | # Local History for Visual Studio Code 162 | .history/ -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "plugins": ["react", "@typescript-eslint"], 4 | "extends": [ 5 | "eslint:recommended", 6 | "plugin:react/recommended", 7 | "plugin:@typescript-eslint/recommended", 8 | "prettier" 9 | ], 10 | "env": { 11 | "browser": true, 12 | "es2020": true, 13 | "node": true 14 | }, 15 | "parserOptions": { 16 | "ecmaFeatures": { 17 | "jsx": true 18 | }, 19 | "ecmaVersion": 11, 20 | "sourceType": "module" 21 | }, 22 | "settings": { 23 | "react": { 24 | "version": "detect" 25 | } 26 | }, 27 | "rules": { 28 | "react/react-in-jsx-scope": 0, 29 | "react/display-name": 0, 30 | "react/prop-types": 0, 31 | "@typescript-eslint/explicit-function-return-type": 0, 32 | "@typescript-eslint/explicit-member-accessibility": 0, 33 | "@typescript-eslint/indent": 0, 34 | "@typescript-eslint/member-delimiter-style": 0, 35 | "@typescript-eslint/no-explicit-any": 0, 36 | "@typescript-eslint/no-var-requires": 0, 37 | "@typescript-eslint/no-use-before-define": 0, 38 | "@typescript-eslint/no-unused-vars": [ 39 | 2, 40 | { 41 | "argsIgnorePattern": "^_" 42 | } 43 | ], 44 | "no-console": [ 45 | 2, 46 | { 47 | "allow": ["warn", "error"] 48 | } 49 | ] 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### macOS ### 2 | # General 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Icon must end with two \r 8 | Icon 9 | 10 | # Thumbnails 11 | ._* 12 | 13 | # Files that might appear in the root of a volume 14 | .DocumentRevisions-V100 15 | .fseventsd 16 | .Spotlight-V100 17 | .TemporaryItems 18 | .Trashes 19 | .VolumeIcon.icns 20 | .com.apple.timemachine.donotpresent 21 | 22 | # Directories potentially created on remote AFP share 23 | .AppleDB 24 | .AppleDesktop 25 | Network Trash Folder 26 | Temporary Items 27 | .apdisk 28 | 29 | ### Node ### 30 | # Logs 31 | logs 32 | *.log 33 | npm-debug.log* 34 | yarn-debug.log* 35 | yarn-error.log* 36 | lerna-debug.log* 37 | 38 | # Diagnostic reports (https://nodejs.org/api/report.html) 39 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 40 | 41 | # Runtime data 42 | pids 43 | *.pid 44 | *.seed 45 | *.pid.lock 46 | 47 | # Directory for instrumented libs generated by jscoverage/JSCover 48 | lib-cov 49 | 50 | # Coverage directory used by tools like istanbul 51 | coverage 52 | *.lcov 53 | 54 | # nyc test coverage 55 | .nyc_output 56 | 57 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 58 | .grunt 59 | 60 | # Bower dependency directory (https://bower.io/) 61 | bower_components 62 | 63 | # node-waf configuration 64 | .lock-wscript 65 | 66 | # Compiled binary addons (https://nodejs.org/api/addons.html) 67 | build/Release 68 | 69 | # Dependency directories 70 | node_modules/ 71 | jspm_packages/ 72 | 73 | # Snowpack dependency directory (https://snowpack.dev/) 74 | web_modules/ 75 | 76 | # TypeScript cache 77 | *.tsbuildinfo 78 | 79 | # Optional npm cache directory 80 | .npm 81 | 82 | # Optional eslint cache 83 | .eslintcache 84 | 85 | # Microbundle cache 86 | .rpt2_cache/ 87 | .rts2_cache_cjs/ 88 | .rts2_cache_es/ 89 | .rts2_cache_umd/ 90 | 91 | # Optional REPL history 92 | .node_repl_history 93 | 94 | # Output of 'npm pack' 95 | *.tgz 96 | 97 | # Yarn Integrity file 98 | .yarn-integrity 99 | 100 | # dotenv environment variables file 101 | .env 102 | .env.test 103 | .env.local 104 | 105 | # parcel-bundler cache (https://parceljs.org/) 106 | .cache 107 | .parcel-cache 108 | 109 | # Next.js build output 110 | .next 111 | out 112 | 113 | # Nuxt.js build / generate output 114 | .nuxt 115 | dist 116 | 117 | packages 118 | 119 | # Gatsby files 120 | .cache/ 121 | # Comment in the public line in if your project uses Gatsby and not Next.js 122 | # https://nextjs.org/blog/next-9-1#public-directory-support 123 | # public 124 | 125 | # vuepress build output 126 | .vuepress/dist 127 | 128 | # Serverless directories 129 | .serverless/ 130 | 131 | # FuseBox cache 132 | .fusebox/ 133 | 134 | # DynamoDB Local files 135 | .dynamodb/ 136 | 137 | # TernJS port file 138 | .tern-port 139 | 140 | # Stores VSCode versions used for testing VSCode extensions 141 | .vscode-test 142 | 143 | # yarn v2 144 | .yarn/cache 145 | .yarn/unplugged 146 | .yarn/build-state.yml 147 | .yarn/install-state.gz 148 | .pnp.* 149 | 150 | ### vscode ### 151 | .vscode/* 152 | !.vscode/settings.json 153 | !.vscode/tasks.json 154 | !.vscode/launch.json 155 | !.vscode/extensions.json 156 | *.code-workspace 157 | 158 | # Local History for Visual Studio Code 159 | .history/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 HelloSoftware 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Electron, TypeScript, MUI (formerly Material-UI), React Boilerplate 2 | 3 | Modern and lightweight boilerplate built with electron, typescript, react, webpack, and mui. This also demonstrates live-reloading and static images. 4 | 5 | ![Screenshot](/screenshot-1.png) 6 | 7 | ## Major technologies 8 | 9 | - [React.js 18](https://reactjs.org/) 10 | - [Electron 19](https://www.electronjs.org/) 11 | - [MUI 5](https://mui.com/) (formerly Material-UI) 12 | - [Webpack 5](https://webpack.js.org/) 13 | - Typescript, ESLint, and Prettier are used to improve the developer experience 14 | 15 | ## Requires 16 | 17 | - [Node.js 16.x](https://nodejs.org/en/) 18 | - [NPM >= 7.x](https://github.com/npm/cli) 19 | 20 | ## Recommended tools 21 | 22 | - [Visual Studio Code](https://code.visualstudio.com/) 23 | - [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) (formatting) 24 | - [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) (error checking) 25 | - [NVM](https://github.com/nvm-sh/nvm) (mac only. helps to manage multiple node.js versions on your machine) 26 | 27 | ## Getting Started 28 | 29 | 1. Download this repo or run the following command to clone it 30 | 31 | ```sh 32 | git clone https://github.com/hellosoftware-io/electron-typescript-react-material-ui myapp 33 | ``` 34 | 35 | 2. Navigate to the project root 36 | 37 | ```sh 38 | cd myapp 39 | ``` 40 | 41 | 3. Using NPM 7+, run the following command to install dependencies 42 | 43 | ```sh 44 | npm install 45 | ``` 46 | 47 | 4. Run the following command to build and start the development version of your app with live reloading. 48 | 49 | ```sh 50 | npm run dev 51 | ``` 52 | 53 | ## Packaging 54 | 55 | Run `npm run package` to build and package your electron app. 56 | 57 | ## Common issues 58 | 59 | ### xcrun: error: invalid active developer path 60 | 61 | This is caused when elecron-builder tries to sign a build. Run `xcode-select --install` to install the necessary Xcode tools. 62 | 63 | ## Folder structure 64 | 65 | ``` 66 | myapp/ 67 | | - dist/ //- Generated by Webpack automatically 68 | | - node_modules/ 69 | | - packages/ //- Generated by build script automatically 70 | | - static/ //- Global static assets 71 | | | - electron.svg 72 | | - src/ 73 | | | - main/ //- Backend modules for the Electron app 74 | | | | - main.ts //- Entry point of 'electron-main' 75 | | | - renderer/ //- Frontend React components for the Electron app 76 | | | | - index.tsx //- Entry point of 'electron-renderer' 77 | | - webpack/ //- Webpack config files 78 | | | - electron.webpack.ts 79 | | | - react.webpack.ts 80 | | - .eslintrc //- ESLint config 81 | | - .gitignore 82 | | - package-lock.json 83 | | - package.json 84 | | - tsconfig.json //- TypeScript config 85 | | - webpack.config.js //- Webpack config 86 | ``` 87 | 88 | ## Contributing 89 | 90 | Pull requests are always welcome 😃. 91 | 92 | ## License 93 | 94 | This project is licensed under the terms of the [MIT license](LICENSE). 95 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | New Electron App 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electron-typescript-react-mui", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "Lightweight, modern boilerplate built with electron, typescript, and react.", 6 | "main": "./dist/main.js", 7 | "scripts": { 8 | "dev": "npm-run-all -p dev:react electron:serve", 9 | "dev:electron": "cross-env NODE_ENV=development webpack --config webpack/electron.webpack.ts --mode=development && npm run start:electron", 10 | "dev:react": "cross-env NODE_ENV=development webpack serve --config webpack/react.webpack.ts --mode=development", 11 | "electron:serve": "wait-on http-get://localhost:4000/ && npm run dev:electron", 12 | "start:electron": "electron .", 13 | "build": "npm-run-all build:electron build:react", 14 | "build:run": "npm-run-all build start:electron", 15 | "build:electron": "webpack --config webpack/electron.webpack.ts --mode=production", 16 | "build:react": "webpack --config webpack/react.webpack.ts --mode=production", 17 | "package": "npm-run-all build package:dist", 18 | "package:dist": "electron-builder --dir" 19 | }, 20 | "keywords": [], 21 | "author": "HelloSoftware", 22 | "license": "MIT", 23 | "dependencies": { 24 | "@emotion/react": "^11.9.3", 25 | "@emotion/styled": "^11.9.3", 26 | "@mui/material": "^5.9.1", 27 | "react": "^18.2.0", 28 | "react-dom": "^18.2.0" 29 | }, 30 | "devDependencies": { 31 | "@types/node": "^16.11.45", 32 | "@types/react": "^18.0.15", 33 | "@types/react-dom": "^18.0.6", 34 | "@types/webpack-dev-server": "^4.7.2", 35 | "@typescript-eslint/eslint-plugin": "^5.30.7", 36 | "@typescript-eslint/parser": "^5.30.7", 37 | "cross-env": "^7.0.3", 38 | "electron": "^19.0.8", 39 | "electron-builder": "^23.3.2", 40 | "eslint": "^8.20.0", 41 | "eslint-config-prettier": "^8.5.0", 42 | "eslint-plugin-react": "^7.30.1", 43 | "html-webpack-plugin": "^5.5.0", 44 | "npm-run-all": "^4.1.5", 45 | "prettier": "^2.7.1", 46 | "ts-loader": "^9.3.1", 47 | "ts-node": "^10.9.1", 48 | "typescript": "^4.7.4", 49 | "wait-on": "^6.0.1", 50 | "webpack": "^5.73.0", 51 | "webpack-cli": "^4.10.0", 52 | "webpack-dev-server": "^4.9.3" 53 | }, 54 | "build": { 55 | "appId": "com.company.app", 56 | "productName": "App Name", 57 | "mac": { 58 | "category": "public.app-category.video" 59 | }, 60 | "directories": { 61 | "output": "packages" 62 | }, 63 | "files": [ 64 | "package.json", 65 | "dist/**" 66 | ] 67 | }, 68 | "engines": { 69 | "npm": ">=7.0.0", 70 | "node": ">=16.13.0" 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /screenshot-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hellosoftware-io/electron-typescript-react-mui/76b5810b8a859214976da780cca64abd8d856531/screenshot-1.png -------------------------------------------------------------------------------- /src/declaration.d.ts: -------------------------------------------------------------------------------- 1 | // Required to allow importing images with webpack in typescript 2 | declare module "*.png"; 3 | declare module "*.jpg"; 4 | declare module "*.svg"; 5 | -------------------------------------------------------------------------------- /src/main/main.ts: -------------------------------------------------------------------------------- 1 | import { app, BrowserWindow } from "electron"; 2 | import * as path from "path"; 3 | import * as url from "url"; 4 | 5 | let mainWindow: Electron.BrowserWindow | null; 6 | 7 | function createWindow() { 8 | mainWindow = new BrowserWindow({ 9 | width: 1100, 10 | height: 700, 11 | backgroundColor: "#f2f2f2", 12 | webPreferences: { 13 | nodeIntegration: true, 14 | contextIsolation: false, 15 | devTools: process.env.NODE_ENV !== "production", 16 | }, 17 | }); 18 | 19 | if (process.env.NODE_ENV === "development") { 20 | mainWindow.loadURL("http://localhost:4000"); 21 | } else { 22 | mainWindow.loadURL( 23 | url.format({ 24 | pathname: path.join(__dirname, "renderer/index.html"), 25 | protocol: "file:", 26 | slashes: true, 27 | }) 28 | ); 29 | } 30 | 31 | mainWindow.on("closed", () => { 32 | mainWindow = null; 33 | }); 34 | } 35 | 36 | // This method will be called when Electron has finished 37 | // initialization and is ready to create browser windows. 38 | // Some APIs can only be used after this event occurs. 39 | app.on("ready", createWindow); 40 | 41 | // Quit when all windows are closed. 42 | app.on("window-all-closed", () => { 43 | // On OS X it is common for applications and their menu bar 44 | // to stay active until the user quits explicitly with Cmd + Q 45 | if (process.platform !== "darwin") { 46 | app.quit(); 47 | } 48 | }); 49 | 50 | app.on("activate", () => { 51 | // On OS X it"s common to re-create a window in the app when the 52 | // dock icon is clicked and there are no other windows open. 53 | if (mainWindow === null) { 54 | createWindow(); 55 | } 56 | }); 57 | -------------------------------------------------------------------------------- /src/renderer/components/App.tsx: -------------------------------------------------------------------------------- 1 | import { Box, CssBaseline, ThemeProvider } from "@mui/material"; 2 | import React from "react"; 3 | import theme from "../theme"; 4 | import Greetings from "./Greetings"; 5 | 6 | export default function App(): JSX.Element { 7 | return ( 8 | // Setup theme and css baseline for the Material-UI app 9 | // https://mui.com/customization/theming/ 10 | 11 | 12 | theme.palette.background.default, 15 | }} 16 | > 17 |
18 | {/* This is where your app content should go */} 19 | 20 |
21 | 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /src/renderer/components/Greetings.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Container, Grid, Typography } from "@mui/material"; 2 | import React from "react"; 3 | import electronLogo from "../../../static/electron.svg"; 4 | 5 | export default function Greetings(): JSX.Element { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | Electron boilerplate with TypeScript, React, and MUI 13 | 14 | 15 | Made by HelloSoftware 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/renderer/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import App from "./components/App"; 4 | 5 | const rootElement = document.getElementById("root"); 6 | const root = createRoot(rootElement!); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /src/renderer/theme.tsx: -------------------------------------------------------------------------------- 1 | import { createTheme } from "@mui/material/styles"; 2 | 3 | // Create a Material-UI theme instance 4 | // https://mui.com/customization/theming/ 5 | const theme = createTheme({ 6 | palette: { 7 | primary: { 8 | main: "#9EEAF9", 9 | }, 10 | secondary: { 11 | main: "#9575CD", 12 | }, 13 | background: { 14 | default: "#2C2E3B", 15 | }, 16 | }, 17 | typography: { 18 | fontWeightMedium: 600, 19 | fontSize: 17, 20 | h1: { 21 | fontSize: "2.2rem", 22 | fontWeight: 400, 23 | color: "#9EEAF9", 24 | }, 25 | body1: { 26 | color: "#9EEAF9", 27 | }, 28 | }, 29 | }); 30 | 31 | export default theme; 32 | -------------------------------------------------------------------------------- /static/electron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 15 | 22 | 34 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2021", 4 | "module": "commonjs", 5 | "lib": ["dom", "esnext"], 6 | "allowJs": true, 7 | "jsx": "react", 8 | "sourceMap": true, 9 | "outDir": "./dist", 10 | "strict": true, 11 | "esModuleInterop": true, 12 | "noImplicitAny": true, 13 | "noImplicitThis": true, 14 | "strictNullChecks": true, 15 | "allowSyntheticDefaultImports": true 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /webpack/electron.webpack.ts: -------------------------------------------------------------------------------- 1 | import * as path from "path"; 2 | import { Configuration } from "webpack"; 3 | 4 | const rootPath = path.resolve(__dirname, ".."); 5 | 6 | const config: Configuration = { 7 | resolve: { 8 | extensions: [".tsx", ".ts", ".js"], 9 | }, 10 | devtool: "source-map", 11 | entry: path.resolve(rootPath, "src/main", "main.ts"), 12 | target: "electron-main", 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.(js|ts|tsx)$/, 17 | exclude: /node_modules/, 18 | include: /src/, 19 | use: { 20 | loader: "ts-loader", 21 | }, 22 | }, 23 | ], 24 | }, 25 | node: { 26 | __dirname: false, 27 | }, 28 | output: { 29 | path: path.resolve(rootPath, "dist"), 30 | filename: "[name].js", 31 | }, 32 | }; 33 | 34 | export default config; 35 | -------------------------------------------------------------------------------- /webpack/react.webpack.ts: -------------------------------------------------------------------------------- 1 | import HtmlWebpackPlugin from "html-webpack-plugin"; 2 | import * as path from "path"; 3 | import { Configuration as WebpackConfiguration } from "webpack"; 4 | import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server"; 5 | 6 | const rootPath = path.resolve(__dirname, ".."); 7 | 8 | interface Configuration extends WebpackConfiguration { 9 | devServer?: WebpackDevServerConfiguration; 10 | } 11 | 12 | const config: Configuration = { 13 | resolve: { 14 | extensions: [".tsx", ".ts", ".js"], 15 | mainFields: ["main", "module", "browser"], 16 | }, 17 | entry: path.resolve(rootPath, "src/renderer", "index.tsx"), 18 | target: "electron-renderer", 19 | devtool: "source-map", 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.(js|ts|tsx)$/, 24 | exclude: /node_modules/, 25 | include: /src/, 26 | use: { 27 | loader: "ts-loader", 28 | }, 29 | }, 30 | { 31 | test: /\.(png|svg|jpg|jpeg|gif)$/i, 32 | type: "asset/resource", 33 | }, 34 | ], 35 | }, 36 | devServer: { 37 | static: { 38 | directory: path.resolve(rootPath, "dist/renderer"), 39 | publicPath: "/", 40 | }, 41 | port: 4000, 42 | historyApiFallback: true, 43 | compress: true, 44 | }, 45 | output: { 46 | path: path.resolve(rootPath, "dist/renderer"), 47 | filename: "js/[name].js", 48 | }, 49 | plugins: [ 50 | new HtmlWebpackPlugin({ template: path.resolve(rootPath, "index.html") }), 51 | ], 52 | }; 53 | 54 | export default config; 55 | --------------------------------------------------------------------------------