├── .prettierrc
├── src
    ├── types
    │   └── index.d.ts
    ├── common
    │   └── helpers.ts
    ├── renderer
    │   ├── app.html
    │   ├── appRenderer.tsx
    │   ├── components
    │   │   ├── Icons.tsx
    │   │   ├── Theme.scss
    │   │   ├── Application.tsx
    │   │   └── Application.scss
    │   └── appPreload.tsx
    └── main
    │   ├── app.ts
    │   └── appWindow.ts
├── assets
    ├── icons
    │   ├── LICENSE
    │   ├── erwt.png
    │   ├── react.png
    │   ├── chrome.png
    │   ├── license.png
    │   ├── nodejs.png
    │   ├── webpack.png
    │   ├── electron.png
    │   └── typescript.png
    └── images
    │   ├── logo.png
    │   ├── appIcon.ico
    │   └── app_screen.png
├── misc
    └── window
    │   ├── titlebarContextApi.ts
    │   ├── windowPreload.ts
    │   ├── components
    │       ├── ControlButton.tsx
    │       ├── WindowControls.tsx
    │       ├── WindowFrame.tsx
    │       ├── Titlebar.less
    │       └── Titlebar.tsx
    │   ├── titlebarContext.ts
    │   ├── titlebarIPC.ts
    │   └── titlebarMenus.ts
├── tools
    ├── webpack
    │   ├── webpack.aliases.js
    │   ├── webpack.helpers.js
    │   ├── webpack.plugins.js
    │   ├── webpack.main.js
    │   ├── webpack.renderer.js
    │   └── webpack.rules.js
    └── forge
    │   └── forge.config.js
├── tsconfig.json
├── LICENSE
├── .eslintrc
├── package.json
├── .gitignore
└── README.md


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "trailingComma": "all",
4 |   "jsxSingleQuote": true
5 | }
6 | 


--------------------------------------------------------------------------------
/src/types/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css';
2 | declare module '*.png';
3 | declare module '*.jpg';
4 | declare module '*.jpeg';
5 | 


--------------------------------------------------------------------------------
/assets/icons/LICENSE:
--------------------------------------------------------------------------------
1 | # Attribution
2 | 
3 | <a href="https://www.flaticon.com/free-icons/license" title="license icons">Thanks to Flaticon</a>


--------------------------------------------------------------------------------
/assets/icons/erwt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckypenny1632333/Electron-React-Typescript-starter-boilerplate/HEAD/assets/icons/erwt.png


--------------------------------------------------------------------------------
/assets/icons/react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckypenny1632333/Electron-React-Typescript-starter-boilerplate/HEAD/assets/icons/react.png


--------------------------------------------------------------------------------
/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckypenny1632333/Electron-React-Typescript-starter-boilerplate/HEAD/assets/images/logo.png


--------------------------------------------------------------------------------
/assets/icons/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckypenny1632333/Electron-React-Typescript-starter-boilerplate/HEAD/assets/icons/chrome.png


--------------------------------------------------------------------------------
/assets/icons/license.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckypenny1632333/Electron-React-Typescript-starter-boilerplate/HEAD/assets/icons/license.png


--------------------------------------------------------------------------------
/assets/icons/nodejs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckypenny1632333/Electron-React-Typescript-starter-boilerplate/HEAD/assets/icons/nodejs.png


--------------------------------------------------------------------------------
/assets/icons/webpack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckypenny1632333/Electron-React-Typescript-starter-boilerplate/HEAD/assets/icons/webpack.png


--------------------------------------------------------------------------------
/assets/icons/electron.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckypenny1632333/Electron-React-Typescript-starter-boilerplate/HEAD/assets/icons/electron.png


--------------------------------------------------------------------------------
/assets/icons/typescript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckypenny1632333/Electron-React-Typescript-starter-boilerplate/HEAD/assets/icons/typescript.png


--------------------------------------------------------------------------------
/assets/images/appIcon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckypenny1632333/Electron-React-Typescript-starter-boilerplate/HEAD/assets/images/appIcon.ico


--------------------------------------------------------------------------------
/assets/images/app_screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckypenny1632333/Electron-React-Typescript-starter-boilerplate/HEAD/assets/images/app_screen.png


--------------------------------------------------------------------------------
/src/common/helpers.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * Checks if process NODE_ENV in 'development' mode
3 |  */
4 | export function inDev(): boolean {
5 |   return process.env.NODE_ENV == 'development';
6 | }
7 | 


--------------------------------------------------------------------------------
/misc/window/titlebarContextApi.ts:
--------------------------------------------------------------------------------
1 | import { TitlebarContextApi } from './titlebarContext';
2 | 
3 | const context: TitlebarContextApi = (window as any).electron_window?.titlebar;
4 | 
5 | export default context;
6 | 


--------------------------------------------------------------------------------
/misc/window/windowPreload.ts:
--------------------------------------------------------------------------------
1 | import { contextBridge } from 'electron';
2 | import titlebarContext from './titlebarContext';
3 | 
4 | contextBridge.exposeInMainWorld('electron_window', {
5 |   titlebar: titlebarContext,
6 | });
7 | 


--------------------------------------------------------------------------------
/src/renderer/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <title>Electron-React-Typescript Application</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app"></div>
11 | </body>
12 | 
13 | </html>


--------------------------------------------------------------------------------
/tools/webpack/webpack.aliases.js:
--------------------------------------------------------------------------------
 1 | const { createWebpackAliases } = require('./webpack.helpers');
 2 | 
 3 | // Export aliases
 4 | module.exports = createWebpackAliases({
 5 |   '@assets': 'assets',
 6 |   '@components': 'src/renderer/components',
 7 |   '@common': 'src/common',
 8 |   '@main': 'src/main',
 9 |   '@renderer': 'src/renderer',
10 |   '@src': 'src',
11 |   '@misc': 'misc',
12 | });
13 | 


--------------------------------------------------------------------------------
/tools/webpack/webpack.helpers.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const cwd = process.cwd();
 3 | 
 4 | 
 5 | function inDev() {
 6 |   return process.env.NODE_ENV == 'development';
 7 | }
 8 | 
 9 | function createWebpackAliases (aliases) {
10 |   const result = {};
11 |   for (const name in aliases) {
12 |     result[name] = path.join(cwd, aliases[name]);
13 |   }
14 |   return result;
15 | }
16 | 
17 | module.exports = {
18 |   inDev,
19 |   createWebpackAliases,
20 | };
21 | 


--------------------------------------------------------------------------------
/tools/webpack/webpack.plugins.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 3 | const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 4 | const { inDev } = require('./webpack.helpers');
 5 | 
 6 | module.exports = [
 7 |   new ForkTsCheckerWebpackPlugin(),
 8 |   inDev() && new webpack.HotModuleReplacementPlugin(),
 9 |   inDev() && new ReactRefreshWebpackPlugin(),
10 | ].filter(Boolean);
11 | 


--------------------------------------------------------------------------------
/tools/webpack/webpack.main.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/app.ts'],
 7 |   // Put your normal webpack config below here
 8 |   module: {
 9 |     rules: require('./webpack.rules'),
10 |   },
11 |   resolve: {
12 |     extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
13 |     alias: require('./webpack.aliases'),
14 |   },
15 |   stats: 'minimal',
16 | };
17 | 


--------------------------------------------------------------------------------
/src/renderer/appRenderer.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createRoot } from 'react-dom/client';
 3 | import WindowFrame from '@misc/window/components/WindowFrame';
 4 | import Application from '@components/Application';
 5 | 
 6 | // Say something
 7 | console.log('[ERWT] : Renderer execution started');
 8 | 
 9 | // Application to Render
10 | const app = (
11 |   <WindowFrame title='Electron-React-Typescript Application' platform='windows'>
12 |     <Application />
13 |   </WindowFrame>
14 | );
15 | 
16 | // Render application in DOM
17 | createRoot(document.getElementById('app')).render(app);


--------------------------------------------------------------------------------
/src/renderer/components/Icons.tsx:
--------------------------------------------------------------------------------
 1 | import chrome from '@assets/icons/chrome.png';
 2 | import react from '@assets/icons/react.png';
 3 | import typescript from '@assets/icons/typescript.png';
 4 | import erwt from '@assets/icons/erwt.png';
 5 | import electron from '@assets/icons/electron.png';
 6 | import nodejs from '@assets/icons/nodejs.png';
 7 | import webpack from '@assets/icons/webpack.png';
 8 | import license from '@assets/icons/license.png';
 9 | 
10 | export const icons = {
11 |   chrome,
12 |   react,
13 |   typescript,
14 |   erwt,
15 |   electron,
16 |   nodejs,
17 |   webpack,
18 |   license
19 | };


--------------------------------------------------------------------------------
/tools/webpack/webpack.renderer.js:
--------------------------------------------------------------------------------
 1 | const rules = require('./webpack.rules');
 2 | const plugins = require('./webpack.plugins');
 3 | 
 4 | module.exports = {
 5 |   module: {
 6 |     rules,
 7 |   },
 8 |   plugins: plugins,
 9 |   resolve: {
10 |     extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
11 |     alias: {
12 |       // Custom Aliases
13 |       ...require('./webpack.aliases'),
14 |     },
15 |   },
16 |   stats: 'minimal',
17 |   /**
18 |    * Fix: Enable inline-source-map to fix following:
19 |    * Dev tools: unable to load source maps over custom protocol
20 |    */
21 |   devtool: 'inline-source-map',
22 | };
23 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "jsx": "react",
 4 |     "allowJs": true,
 5 |     "target": "ES6",
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 |     "esModuleInterop": true,
 9 |     "noImplicitAny": true,
10 |     "sourceMap": true,
11 |     "baseUrl": ".",
12 |     "outDir": "dist",
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "paths": {
16 |       "*": ["node_modules/*"],
17 |       "@assets/*": ["./assets/*"],
18 |       "@components/*": ["./src/renderer/components/*"],
19 |       "@common/*": ["./src/common/*"],
20 |       "@main/*": ["./src/main/*"],
21 |       "@renderer/*": ["./src/renderer/*"],
22 |       "@src/*": ["./src/*"],
23 |       "@misc/*": ["./misc/*"],
24 |     }
25 |   },
26 |   "include": ["src/**/*", "tools/**/*"]
27 | }
28 | 


--------------------------------------------------------------------------------
/misc/window/components/ControlButton.tsx:
--------------------------------------------------------------------------------
 1 | import classNames from 'classnames';
 2 | import React from 'react';
 3 | 
 4 | interface IControlButtonProps {
 5 |   readonly name: string;
 6 |   readonly path: string;
 7 |   readonly title: string;
 8 | }
 9 | 
10 | const ControlButton: React.FC<
11 |   IControlButtonProps & React.HTMLAttributes<HTMLDivElement>
12 | > = (props) => {
13 |   const { name, path, title, ...rest } = props;
14 |   const { onClick } = rest;
15 | 
16 |   const className = classNames('control', name);
17 | 
18 |   return (
19 |     <div
20 |       aria-label={name}
21 |       className={className}
22 |       onClick={onClick}
23 |       title={title}
24 |       {...rest}
25 |     >
26 |       <svg aria-hidden='true' version='1.1' width='10' height='10'>
27 |         <path fill='currentColor' d={path} />
28 |       </svg>
29 |     </div>
30 |   );
31 | };
32 | 
33 | export default ControlButton;
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Steven Piao
 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 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es6": true,
 5 |     "node": true
 6 |   },
 7 |   "extends": [
 8 |     "eslint:recommended",
 9 |     "plugin:react/recommended",
10 |     "plugin:@typescript-eslint/eslint-recommended",
11 |     "plugin:@typescript-eslint/recommended",
12 |     "plugin:import/errors",
13 |     "plugin:import/warnings"
14 |   ],
15 |   "parser": "@typescript-eslint/parser",
16 |   "settings": {
17 |     "import/resolver": {
18 |       "node": {
19 |         "extensions": [".js", ".jsx", ".ts", ".tsx"]
20 |       },
21 |       "alias": {
22 |         "map": [
23 |           ["@renderer", "./src/renderer"],
24 |           ["@components", "./src/renderer/components"],
25 |           ["@common", "./src/common"],
26 |           ["@main", "./src/main"],
27 |           ["@src", "./src"],
28 |           ["@misc", "./misc"],
29 |           ["@assets", "./assets"]
30 |         ],
31 |         "extensions": [".js", ".jsx", ".ts", ".tsx"]
32 |       }
33 |     },
34 |     "react": {
35 |       "version": "latest"
36 |     }
37 |   },
38 |   "rules": {
39 |     "react/prop-types": "off",
40 |     "@typescript-eslint/no-var-requires": "off"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/renderer/appPreload.tsx:
--------------------------------------------------------------------------------
 1 | import '@misc/window/windowPreload';
 2 | 
 3 | // Say something
 4 | console.log('[ERWT] : Preload execution started');
 5 | 
 6 | // Get versions
 7 | window.addEventListener('DOMContentLoaded', () => {
 8 |   const app = document.getElementById('app');
 9 |   const { env } = process;
10 |   const versions: Record<string, unknown> = {};
11 | 
12 |   // ERWT Package version
13 |   versions['erwt'] = env['npm_package_version'];
14 |   versions['license'] = env['npm_package_license'];
15 | 
16 |   // Process versions
17 |   for (const type of ['chrome', 'node', 'electron']) {
18 |     versions[type] = process.versions[type].replace('+', '');
19 |   }
20 | 
21 |   // NPM deps versions
22 |   for (const type of ['react']) {
23 |     const v = env['npm_package_dependencies_' + type];
24 |     if (v) versions[type] = v.replace('^', '');
25 |   }
26 | 
27 |   // NPM @dev deps versions
28 |   for (const type of ['webpack', 'typescript']) {
29 |     const v = env['npm_package_devDependencies_' + type];
30 |     if (v) versions[type] = v.replace('^', '');
31 |   }
32 | 
33 |   // Set versions to app data
34 |   app.setAttribute('data-versions', JSON.stringify(versions));
35 | });


--------------------------------------------------------------------------------
/misc/window/components/WindowControls.tsx:
--------------------------------------------------------------------------------
 1 | import classNames from 'classnames';
 2 | import React from 'react';
 3 | import context from '../titlebarContextApi';
 4 | 
 5 | import ControlButton from './ControlButton';
 6 | 
 7 | type Props = {
 8 |   platform: string;
 9 |   tooltips?: boolean;
10 | };
11 | 
12 | const closePath =
13 |   'M 0,0 0,0.7 4.3,5 0,9.3 0,10 0.7,10 5,5.7 9.3,10 10,10 10,9.3 5.7,5 10,0.7 10,0 9.3,0 5,4.3 0.7,0 Z';
14 | const maximizePath = 'M 0,0 0,10 10,10 10,0 Z M 1,1 9,1 9,9 1,9 Z';
15 | const minimizePath = 'M 0,5 10,5 10,6 0,6 Z';
16 | 
17 | const WindowControls: React.FC<Props> = (props) => {
18 |   return (
19 |     <section
20 |       className={classNames(
21 |         'window-titlebar-controls',
22 |         `type-${props.platform}`,
23 |       )}
24 |     >
25 |       <ControlButton
26 |         name='minimize'
27 |         onClick={() => context.minimize()}
28 |         path={minimizePath}
29 |         title={props.tooltips ? 'Minimize' : null}
30 |       />
31 |       <ControlButton
32 |         name='maximize'
33 |         onClick={() => context.toggle_maximize()}
34 |         path={maximizePath}
35 |         title={props.tooltips ? 'Maximize' : null}
36 |       />
37 |       <ControlButton
38 |         name='close'
39 |         onClick={() => context.exit()}
40 |         path={closePath}
41 |         title={props.tooltips ? 'Close' : null}
42 |       />
43 |     </section>
44 |   );
45 | };
46 | 
47 | export default WindowControls;
48 | 


--------------------------------------------------------------------------------
/tools/webpack/webpack.rules.js:
--------------------------------------------------------------------------------
 1 | module.exports = [
 2 |   {
 3 |     // Add support for native node modules
 4 |     test: /native_modules\/.+\.node$/,
 5 |     use: 'node-loader',
 6 |   },
 7 |   {
 8 |     test: /\.(m?js|node)$/,
 9 |     parser: { amd: false },
10 |     use: {
11 |       loader: '@vercel/webpack-asset-relocator-loader',
12 |       options: {
13 |         outputAssetBase: 'native_modules',
14 |       },
15 |     },
16 |   },
17 |   {
18 |     // Typescript loader
19 |     test: /\.tsx?$/,
20 |     exclude: /(node_modules|\.webpack)/,
21 |     use: {
22 |       loader: 'ts-loader',
23 |       options: {
24 |         transpileOnly: true,
25 |       },
26 |     },
27 |   },
28 |   {
29 |     // CSS Loader
30 |     test: /\.css$/,
31 |     use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
32 |   },
33 |   {
34 |     // SCSS (SASS) Loader
35 |     test: /\.s[ac]ss$/i,
36 |     use: [
37 |       { loader: 'style-loader' },
38 |       { loader: 'css-loader' },
39 |       { loader: 'sass-loader' },
40 |     ],
41 |   },
42 |   {
43 |     // Less loader
44 |     test: /\.less$/,
45 |     use: [
46 |       { loader: 'style-loader' },
47 |       { loader: 'css-loader' },
48 |       { loader: 'less-loader' },
49 |     ],
50 |   },
51 |   {
52 |     // Assets loader
53 |     // More information here https://webpack.js.org/guides/asset-modules/
54 |     test: /\.(gif|jpe?g|tiff|png|webp|bmp|svg|eot|ttf|woff|woff2)$/i,
55 |     type: 'asset',
56 |     generator: {
57 |       filename: 'assets/[hash][ext][query]',
58 |     },
59 |   },
60 | ];
61 | 


--------------------------------------------------------------------------------
/misc/window/components/WindowFrame.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef } from 'react';
 2 | import Titlebar from './Titlebar';
 3 | import logo from '@assets/images/logo.png';
 4 | 
 5 | type Props = {
 6 |   title?: string;
 7 |   borderColor?: string;
 8 |   platform: 'windows' | 'mac';
 9 |   children: React.ReactNode;
10 | };
11 | 
12 | type Context = {
13 |   platform: 'windows' | 'mac';
14 | };
15 | 
16 | export const WindowContext = React.createContext<Context>({
17 |   platform: 'windows',
18 | });
19 | 
20 | const WindowFrame: React.FC<Props> = (props) => {
21 |   const itsRef = useRef<HTMLDivElement>(null);
22 | 
23 |   useEffect(() => {
24 |     const { parentElement } = itsRef.current;
25 |     parentElement.classList.add('has-electron-window');
26 |     parentElement.classList.add('has-border');
27 | 
28 |     // Apply border color if prop given
29 |     if (props.borderColor) {
30 |       parentElement.style.borderColor = props.borderColor;
31 |     }
32 |   }, []);
33 | 
34 |   return (
35 |     <WindowContext.Provider value={{ platform: props.platform }}>
36 |       {/* Reference creator */}
37 |       <div className='start-electron-window' ref={itsRef}></div>
38 |       {/* Window Titlebar */}
39 |       <Titlebar
40 |         title={props.title ?? 'Electron Window'}
41 |         mode='centered-title'
42 |         icon={logo}
43 |       />
44 |       {/* Window Content (Application to render) */}
45 |       <div className='window-content'>{props.children}</div>
46 |     </WindowContext.Provider>
47 |   );
48 | };
49 | 
50 | export default WindowFrame;
51 | 


--------------------------------------------------------------------------------
/misc/window/titlebarContext.ts:
--------------------------------------------------------------------------------
 1 | import { ipcRenderer } from 'electron';
 2 | 
 3 | const titlebarContext = {
 4 |   exit() {
 5 |     ipcRenderer.invoke('window-close');
 6 |   },
 7 |   undo() {
 8 |     ipcRenderer.invoke('web-undo');
 9 |   },
10 |   redo() {
11 |     ipcRenderer.invoke('web-redo');
12 |   },
13 |   cut() {
14 |     ipcRenderer.invoke('web-cut');
15 |   },
16 |   copy() {
17 |     ipcRenderer.invoke('web-copy');
18 |   },
19 |   paste() {
20 |     ipcRenderer.invoke('web-paste');
21 |   },
22 |   delete() {
23 |     ipcRenderer.invoke('web-delete');
24 |   },
25 |   select_all() {
26 |     ipcRenderer.invoke('web-select-all');
27 |   },
28 |   reload() {
29 |     ipcRenderer.invoke('web-reload');
30 |   },
31 |   force_reload() {
32 |     ipcRenderer.invoke('web-force-reload');
33 |   },
34 |   toggle_devtools() {
35 |     ipcRenderer.invoke('web-toggle-devtools');
36 |   },
37 |   actual_size() {
38 |     ipcRenderer.invoke('web-actual-size');
39 |   },
40 |   zoom_in() {
41 |     ipcRenderer.invoke('web-zoom-in');
42 |   },
43 |   zoom_out() {
44 |     ipcRenderer.invoke('web-zoom-out');
45 |   },
46 |   toggle_fullscreen() {
47 |     ipcRenderer.invoke('web-toggle-fullscreen');
48 |   },
49 |   minimize() {
50 |     ipcRenderer.invoke('window-minimize');
51 |   },
52 |   toggle_maximize() {
53 |     ipcRenderer.invoke('window-toggle-maximize');
54 |   },
55 |   open_url(url: string) {
56 |     ipcRenderer.invoke('open-url', url);
57 |   },
58 | };
59 | 
60 | export type TitlebarContextApi = typeof titlebarContext;
61 | 
62 | export default titlebarContext;
63 | 


--------------------------------------------------------------------------------
/src/main/app.ts:
--------------------------------------------------------------------------------
 1 | import { app, BrowserWindow } from 'electron';
 2 | import { createAppWindow } from './appWindow';
 3 | 
 4 | /** Handle creating/removing shortcuts on Windows when installing/uninstalling. */
 5 | if (require('electron-squirrel-startup')) {
 6 |   app.quit();
 7 | }
 8 | 
 9 | /**
10 |  * This method will be called when Electron has finished
11 |  * initialization and is ready to create browser windows.
12 |  * Some APIs can only be used after this event occurs.
13 |  */
14 | app.on('ready', createAppWindow);
15 | 
16 | /**
17 |  * Emitted when the application is activated. Various actions can
18 |  * trigger this event, such as launching the application for the first time,
19 |  * attempting to re-launch the application when it's already running,
20 |  * or clicking on the application's dock or taskbar icon.
21 |  */
22 | app.on('activate', () => {
23 |   /**
24 |    * On OS X it's common to re-create a window in the app when the
25 |    * dock icon is clicked and there are no other windows open.
26 |    */
27 |   if (BrowserWindow.getAllWindows().length === 0) {
28 |     createAppWindow();
29 |   }
30 | });
31 | 
32 | /**
33 |  * Emitted when all windows have been closed.
34 |  */
35 | app.on('window-all-closed', () => {
36 |   /**
37 |    * On OS X it is common for applications and their menu bar
38 |    * to stay active until the user quits explicitly with Cmd + Q
39 |    */
40 |   if (process.platform !== 'darwin') {
41 |     app.quit();
42 |   }
43 | });
44 | 
45 | /**
46 |  * In this file you can include the rest of your app's specific main process code.
47 |  * You can also put them in separate files and import them here.
48 |  */


--------------------------------------------------------------------------------
/src/main/appWindow.ts:
--------------------------------------------------------------------------------
 1 | import { app, BrowserWindow } from 'electron';
 2 | import path from 'path';
 3 | import { registerTitlebarIpc } from '@misc/window/titlebarIPC';
 4 | 
 5 | // Electron Forge automatically creates these entry points
 6 | declare const APP_WINDOW_WEBPACK_ENTRY: string;
 7 | declare const APP_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
 8 | 
 9 | let appWindow: BrowserWindow;
10 | 
11 | /**
12 |  * Create Application Window
13 |  * @returns {BrowserWindow} Application Window Instance
14 |  */
15 | export function createAppWindow(): BrowserWindow {
16 |   // Create new window instance
17 |   appWindow = new BrowserWindow({
18 |     width: 800,
19 |     height: 600,
20 |     backgroundColor: '#202020',
21 |     show: false,
22 |     autoHideMenuBar: true,
23 |     frame: false,
24 |     titleBarStyle: 'hidden',
25 |     icon: path.resolve('assets/images/appIcon.ico'),
26 |     webPreferences: {
27 |       nodeIntegration: false,
28 |       contextIsolation: true,
29 |       nodeIntegrationInWorker: false,
30 |       nodeIntegrationInSubFrames: false,
31 |       preload: APP_WINDOW_PRELOAD_WEBPACK_ENTRY,
32 |       sandbox: false,
33 |     },
34 |   });
35 | 
36 |   // Load the index.html of the app window.
37 |   appWindow.loadURL(APP_WINDOW_WEBPACK_ENTRY);
38 | 
39 |   // Show window when its ready to
40 |   appWindow.on('ready-to-show', () => appWindow.show());
41 | 
42 |   // Register Inter Process Communication for main process
43 |   registerMainIPC();
44 | 
45 |   // Close all windows when main window is closed
46 |   appWindow.on('close', () => {
47 |     appWindow = null;
48 |     app.quit();
49 |   });
50 | 
51 |   return appWindow;
52 | }
53 | 
54 | /**
55 |  * Register Inter Process Communication
56 |  */
57 | function registerMainIPC() {
58 |   /**
59 |    * Here you can assign IPC related codes for the application window
60 |    * to Communicate asynchronously from the main process to renderer processes.
61 |    */
62 |   registerTitlebarIpc(appWindow);
63 | }
64 | 


--------------------------------------------------------------------------------
/misc/window/titlebarIPC.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserWindow, ipcMain, shell } from 'electron';
 2 | 
 3 | export const registerTitlebarIpc = (mainWindow: BrowserWindow) => {
 4 |   ipcMain.handle('window-minimize', () => {
 5 |     mainWindow.minimize();
 6 |   });
 7 | 
 8 |   ipcMain.handle('window-maximize', () => {
 9 |     mainWindow.maximize();
10 |   });
11 | 
12 |   ipcMain.handle('window-toggle-maximize', () => {
13 |     if (mainWindow.isMaximized()) {
14 |       mainWindow.unmaximize();
15 |     } else {
16 |       mainWindow.maximize();
17 |     }
18 |   });
19 | 
20 |   ipcMain.handle('window-close', () => {
21 |     mainWindow.close();
22 |   });
23 | 
24 |   ipcMain.handle('web-undo', () => {
25 |     mainWindow.webContents.undo();
26 |   });
27 | 
28 |   ipcMain.handle('web-redo', () => {
29 |     mainWindow.webContents.redo();
30 |   });
31 | 
32 |   ipcMain.handle('web-cut', () => {
33 |     mainWindow.webContents.cut();
34 |   });
35 | 
36 |   ipcMain.handle('web-copy', () => {
37 |     mainWindow.webContents.copy();
38 |   });
39 | 
40 |   ipcMain.handle('web-paste', () => {
41 |     mainWindow.webContents.paste();
42 |   });
43 | 
44 |   ipcMain.handle('web-delete', () => {
45 |     mainWindow.webContents.delete();
46 |   });
47 | 
48 |   ipcMain.handle('web-select-all', () => {
49 |     mainWindow.webContents.selectAll();
50 |   });
51 | 
52 |   ipcMain.handle('web-reload', () => {
53 |     mainWindow.webContents.reload();
54 |   });
55 | 
56 |   ipcMain.handle('web-force-reload', () => {
57 |     mainWindow.webContents.reloadIgnoringCache();
58 |   });
59 | 
60 |   ipcMain.handle('web-toggle-devtools', () => {
61 |     mainWindow.webContents.toggleDevTools();
62 |   });
63 | 
64 |   ipcMain.handle('web-actual-size', () => {
65 |     mainWindow.webContents.setZoomLevel(0);
66 |   });
67 | 
68 |   ipcMain.handle('web-zoom-in', () => {
69 |     mainWindow.webContents.setZoomLevel(mainWindow.webContents.zoomLevel + 0.5);
70 |   });
71 | 
72 |   ipcMain.handle('web-zoom-out', () => {
73 |     mainWindow.webContents.setZoomLevel(mainWindow.webContents.zoomLevel - 0.5);
74 |   });
75 | 
76 |   ipcMain.handle('web-toggle-fullscreen', () => {
77 |     mainWindow.setFullScreen(!mainWindow.fullScreen);
78 |   });
79 | 
80 |   ipcMain.handle('open-url', (e, url) => {
81 |     shell.openExternal(url);
82 |   });
83 | };
84 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "electron-react-typescript-webpack-application",
 3 |   "version": "1.0.0",
 4 |   "description": "Desktop Applications using Electron, React, Webpack, TypeScript in 2023",
 5 |   "main": ".webpack/main",
 6 |   "scripts": {
 7 |     "start": "cross-env NODE_ENV=development electron-forge start",
 8 |     "package": "electron-forge package",
 9 |     "make": "electron-forge make",
10 |     "publish": "electron-forge publish",
11 |     "lint": "eslint src/ --ext .ts,.js,.tsx,.jsx"
12 |   },
13 |   "keywords": [
14 |     "electron",
15 |     "electron-webpack",
16 |     "electron-react",
17 |     "electron-typescript",
18 |     "electron-react-typescript",
19 |     "2023",
20 |     "react",
21 |     "react-typescript",
22 |     "react-webpack",
23 |     "create-react-app"
24 |   ],
25 |   "author": {
26 |     "name": "Darkhorse",
27 |     "url": "https://github.com/darkhorse07232020"
28 |   },
29 |   "repository": {
30 |     "type": "git",
31 |     "url": "https://github.com/darkhorse07232020/electron-react-typescript-application"
32 |   },
33 |   "license": "MIT",
34 |   "config": {
35 |     "forge": "./tools/forge/forge.config.js"
36 |   },
37 |   "devDependencies": {
38 |     "@electron-forge/cli": "6.2.1",
39 |     "@electron-forge/maker-deb": "6.2.1",
40 |     "@electron-forge/maker-rpm": "6.2.1",
41 |     "@electron-forge/maker-squirrel": "6.2.1",
42 |     "@electron-forge/maker-zip": "6.2.1",
43 |     "@electron-forge/plugin-webpack": "6.2.1",
44 |     "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
45 |     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
46 |     "@types/node": "^20.4.1",
47 |     "@types/react": "^18.2.14",
48 |     "@types/react-dom": "^18.2.6",
49 |     "@types/webpack-env": "^1.18.1",
50 |     "@typescript-eslint/eslint-plugin": "^6.0.0",
51 |     "@typescript-eslint/parser": "^6.0.0",
52 |     "@vercel/webpack-asset-relocator-loader": "^1.7.3",
53 |     "classnames": "^2.3.2",
54 |     "cross-env": "^7.0.3",
55 |     "css-loader": "^6.8.1",
56 |     "electron": "^25.2.0",
57 |     "eslint": "^8.44.0",
58 |     "eslint-import-resolver-alias": "^1.1.2",
59 |     "eslint-plugin-import": "^2.27.5",
60 |     "eslint-plugin-react": "^7.32.2",
61 |     "file-loader": "^6.2.0",
62 |     "fork-ts-checker-webpack-plugin": "^8.0.0",
63 |     "less": "^4.1.3",
64 |     "less-loader": "11.1.3",
65 |     "node-loader": "^2.0.0",
66 |     "react-refresh": "^0.14.0",
67 |     "sass": "^1.63.6",
68 |     "sass-loader": "^13.3.2",
69 |     "style-loader": "^3.3.3",
70 |     "ts-loader": "9.4.4",
71 |     "typescript": "^5.1.6",
72 |     "webpack": "^5.88.1"
73 |   },
74 |   "dependencies": {
75 |     "electron-squirrel-startup": "^1.0.0",
76 |     "react": "^18.2.0",
77 |     "react-dom": "^18.2.0"
78 |   }
79 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | .pnpm-debug.log*
  9 | 
 10 | # Diagnostic reports (https://nodejs.org/api/report.html)
 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 12 | 
 13 | # Runtime data
 14 | pids
 15 | *.pid
 16 | *.seed
 17 | *.pid.lock
 18 | 
 19 | # Directory for instrumented libs generated by jscoverage/JSCover
 20 | lib-cov
 21 | 
 22 | # Coverage directory used by tools like istanbul
 23 | coverage
 24 | *.lcov
 25 | 
 26 | # nyc test coverage
 27 | .nyc_output
 28 | 
 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 30 | .grunt
 31 | 
 32 | # Bower dependency directory (https://bower.io/)
 33 | bower_components
 34 | 
 35 | # node-waf configuration
 36 | .lock-wscript
 37 | 
 38 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 39 | build/Release
 40 | 
 41 | # Dependency directories
 42 | node_modules/
 43 | jspm_packages/
 44 | 
 45 | # Snowpack dependency directory (https://snowpack.dev/)
 46 | web_modules/
 47 | 
 48 | # TypeScript cache
 49 | *.tsbuildinfo
 50 | 
 51 | # Optional npm cache directory
 52 | .npm
 53 | 
 54 | # Optional eslint cache
 55 | .eslintcache
 56 | 
 57 | # Optional stylelint cache
 58 | .stylelintcache
 59 | 
 60 | # Microbundle cache
 61 | .rpt2_cache/
 62 | .rts2_cache_cjs/
 63 | .rts2_cache_es/
 64 | .rts2_cache_umd/
 65 | 
 66 | # Optional REPL history
 67 | .node_repl_history
 68 | 
 69 | # Output of 'npm pack'
 70 | *.tgz
 71 | 
 72 | # Yarn Integrity file
 73 | .yarn-integrity
 74 | 
 75 | # dotenv environment variable files
 76 | .env
 77 | .env.development.local
 78 | .env.test.local
 79 | .env.production.local
 80 | .env.local
 81 | 
 82 | # parcel-bundler cache (https://parceljs.org/)
 83 | .cache
 84 | .parcel-cache
 85 | 
 86 | # Next.js build output
 87 | .next
 88 | out
 89 | 
 90 | # Nuxt.js build / generate output
 91 | .nuxt
 92 | dist
 93 | 
 94 | # Gatsby files
 95 | .cache/
 96 | # Comment in the public line in if your project uses Gatsby and not Next.js
 97 | # https://nextjs.org/blog/next-9-1#public-directory-support
 98 | # public
 99 | 
100 | # vuepress build output
101 | .vuepress/dist
102 | 
103 | # vuepress v2.x temp and cache directory
104 | .temp
105 | .cache
106 | 
107 | # Docusaurus cache and generated files
108 | .docusaurus
109 | 
110 | # Serverless directories
111 | .serverless/
112 | 
113 | # FuseBox cache
114 | .fusebox/
115 | 
116 | # DynamoDB Local files
117 | .dynamodb/
118 | 
119 | # TernJS port file
120 | .tern-port
121 | 
122 | # Stores VSCode versions used for testing VSCode extensions
123 | .vscode-test
124 | 
125 | # yarn v2
126 | .yarn/cache
127 | .yarn/unplugged
128 | .yarn/build-state.yml
129 | .yarn/install-state.gz
130 | .pnp.*
131 | 


--------------------------------------------------------------------------------
/misc/window/titlebarMenus.ts:
--------------------------------------------------------------------------------
  1 | export type TitlebarMenuItem = {
  2 |   name: string;
  3 |   action?: string;
  4 |   shortcut?: string;
  5 |   value?: string | number;
  6 |   items?: TitlebarMenuItem[];
  7 | };
  8 | 
  9 | export type TitlebarMenu = {
 10 |   name: string;
 11 |   items: TitlebarMenuItem[];
 12 | };
 13 | 
 14 | const titlebarMenus: TitlebarMenu[] = [
 15 |   {
 16 |     name: 'File',
 17 |     items: [
 18 |       {
 19 |         name: 'Exit',
 20 |         action: 'exit',
 21 |       },
 22 |     ],
 23 |   },
 24 |   {
 25 |     name: 'Edit',
 26 |     items: [
 27 |       {
 28 |         name: 'Undo',
 29 |         action: 'undo',
 30 |         shortcut: 'Ctrl+Z',
 31 |       },
 32 |       {
 33 |         name: 'Redo',
 34 |         action: 'redo',
 35 |         shortcut: 'Ctrl+Y',
 36 |       },
 37 |       {
 38 |         name: '__',
 39 |       },
 40 |       {
 41 |         name: 'Cut',
 42 |         action: 'cut',
 43 |         shortcut: 'Ctrl+X',
 44 |       },
 45 |       {
 46 |         name: 'Copy',
 47 |         action: 'copy',
 48 |         shortcut: 'Ctrl+C',
 49 |       },
 50 |       {
 51 |         name: 'Paste',
 52 |         action: 'paste',
 53 |         shortcut: 'Ctrl+V',
 54 |       },
 55 |       {
 56 |         name: 'Delete',
 57 |         action: 'delete',
 58 |       },
 59 |       {
 60 |         name: '__',
 61 |       },
 62 |       {
 63 |         name: 'Select All',
 64 |         action: 'select_all',
 65 |         shortcut: 'Ctrl+A',
 66 |       },
 67 |     ],
 68 |   },
 69 |   {
 70 |     name: 'View',
 71 |     items: [
 72 |       {
 73 |         name: 'Reload',
 74 |         action: 'reload',
 75 |         shortcut: 'Ctrl+R',
 76 |       },
 77 |       {
 78 |         name: 'Force Reload',
 79 |         action: 'force_reload',
 80 |         shortcut: 'Ctrl+Shift+R',
 81 |       },
 82 |       {
 83 |         name: 'Toogle Developer Tools',
 84 |         action: 'toggle_devtools',
 85 |         shortcut: 'Ctrl+Shift+I',
 86 |       },
 87 |       {
 88 |         name: '__',
 89 |       },
 90 |       {
 91 |         name: 'Actual Size',
 92 |         action: 'actual_size',
 93 |         shortcut: 'Ctrl+0',
 94 |       },
 95 |       {
 96 |         name: 'Zoom In',
 97 |         action: 'zoom_in',
 98 |         shortcut: 'Ctrl++',
 99 |       },
100 |       {
101 |         name: 'Zoom Out',
102 |         action: 'zoom_out',
103 |         shortcut: 'Ctrl+-',
104 |       },
105 |       {
106 |         name: '__',
107 |       },
108 |       {
109 |         name: 'Toggle Fullscreen',
110 |         action: 'toggle_fullscreen',
111 |         shortcut: 'F11',
112 |       },
113 |     ],
114 |   },
115 |   {
116 |     name: 'Window',
117 |     items: [
118 |       {
119 |         name: 'Minimize',
120 |         action: 'minimize',
121 |         shortcut: 'Ctrl+M',
122 |       },
123 |       {
124 |         name: 'Close',
125 |         action: 'exit',
126 |         shortcut: 'Ctrl+W',
127 |       },
128 |     ],
129 |   },
130 | ];
131 | 
132 | export default titlebarMenus;
133 | 


--------------------------------------------------------------------------------
/tools/forge/forge.config.js:
--------------------------------------------------------------------------------
 1 | // Forge Configuration
 2 | const path = require('path');
 3 | const rootDir = process.cwd();
 4 | 
 5 | module.exports = {
 6 |   // Packager Config
 7 |   packagerConfig: {
 8 |     // Create asar archive for main, renderer process files
 9 |     asar: true,
10 |     // Set executable name
11 |     executableName: 'Electron-React-Typescript Application',
12 |     // Set application copyright
13 |     appCopyright: 'Copyright (C) 2021 Darkhorse',
14 |     // Set application icon
15 |     icon: path.resolve('assets/images/appIcon.ico'),
16 |   },
17 |   // Forge Makers
18 |   makers: [
19 |     {
20 |       // Squirrel.Windows is a no-prompt, no-hassle, no-admin method of installing
21 |       // Windows applications and is therefore the most user friendly you can get.
22 |       name: '@electron-forge/maker-squirrel',
23 |       config: {
24 |         name: 'electron-react-typescript-webpack-application',
25 |       },
26 |     },
27 |     {
28 |       // The Zip target builds basic .zip files containing your packaged application.
29 |       // There are no platform specific dependencies for using this maker and it will run on any platform.
30 |       name: '@electron-forge/maker-zip',
31 |       platforms: ['darwin'],
32 |     },
33 |     {
34 |       // The deb target builds .deb packages, which are the standard package format for Debian-based
35 |       // Linux distributions such as Ubuntu.
36 |       name: '@electron-forge/maker-deb',
37 |       config: {},
38 |     },
39 |     {
40 |       // The RPM target builds .rpm files, which is the standard package format for
41 |       // RedHat-based Linux distributions such as Fedora.
42 |       name: '@electron-forge/maker-rpm',
43 |       config: {},
44 |     },
45 |   ],
46 |   // Forge Plugins
47 |   plugins: [
48 |     {
49 |       name: '@electron-forge/plugin-webpack',
50 |       config: {
51 |         // Fix content-security-policy error when image or video src isn't same origin
52 |         // Remove 'unsafe-eval' to get rid of console warning in development mode.
53 |         devContentSecurityPolicy: `default-src 'self' 'unsafe-inline' data:; script-src 'self' 'unsafe-inline' data:`,
54 |         // Ports
55 |         port: 3000, // Webpack Dev Server port
56 |         loggerPort: 9000, // Logger port
57 |         // Main process webpack configuration
58 |         mainConfig: path.join(rootDir, 'tools/webpack/webpack.main.js'),
59 |         // Renderer process webpack configuration
60 |         renderer: {
61 |           // Configuration file path
62 |           config: path.join(rootDir, 'tools/webpack/webpack.renderer.js'),
63 |           // Entrypoints of the application
64 |           entryPoints: [
65 |             {
66 |               // Window process name
67 |               name: 'app_window',
68 |               // React Hot Module Replacement (HMR)
69 |               rhmr: 'react-hot-loader/patch',
70 |               // HTML index file template
71 |               html: path.join(rootDir, 'src/renderer/app.html'),
72 |               // Renderer
73 |               js: path.join(rootDir, 'src/renderer/appRenderer.tsx'),
74 |               // Main Window
75 |               // Preload
76 |               preload: {
77 |                 js: path.join(rootDir, 'src/renderer/appPreload.tsx'),
78 |               },
79 |             },
80 |           ],
81 |         },
82 |         devServer: {
83 |           liveReload: false,
84 |         },
85 |       },
86 |     },
87 |   ],
88 | };
89 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Electron-React-Typescript-starter files
  2 | 
  3 | A minimal secure boilerplate for writing Desktop Applications using [Electron](https://www.electronjs.org/), [React](https://reactjs.org/), [Webpack](https://webpack.js.org/) & [TypeScript](https://www.typescriptlang.org/) with Custom Titlebar.
  4 | 
  5 | 
  6 | <br>
  7 | <img src="assets/images/app_screen.png" />
  8 | 
  9 | <br>
 10 | 
 11 | # Custom Electron Window Titlebar & Menus etc.
 12 | 
 13 | **Following are the list of features it provides :**
 14 | 
 15 | - Custom Titlebar for Electron Window.
 16 | - Easily changable platform specific controls for max/min/close buttons using `windows` or `mac` value for `platform` property with `<WindowFrame>` in renderer.
 17 | - Titlebar menus can show/hide by pressing `alt` or `option` key.
 18 | - Window frame `title` prop displays in titlebar center when menus are toggeled off.
 19 | - Menu entries can be customized in `misc/window/titlebarMenus.ts` file.
 20 | - Menu items and windows controls layout or colors can be customized easily by modifying the `misc/window` modules.
 21 | 
 22 | <br><br>
 23 | 
 24 | # Core Features
 25 | 
 26 | - 🌟 Electron
 27 | - 🌀 TypeScript
 28 | - ⚛️ React
 29 | - 🥗 SASS/SCSS Loader
 30 | - 🛶 LESS Loader (optional)
 31 | - 🎨 CSS Loader
 32 | - 📸 Image Loader
 33 | - 🆎 Font Loader
 34 | - 🧹 ESLint
 35 | - 📦 Electron Forge
 36 | - 📐 Custom Window Frame
 37 | - 📐 Custom Window Titlebar
 38 | - 📐 Custom Window Menubar
 39 | - 🔱 Webpack & Configuration
 40 | - 🧩 Aliases for Project Paths
 41 | - 🔥 React Fast Refresh + Webpack HMR
 42 | - 🌞 Dark Mode + Light Mode (Theme)
 43 | - 🎁 Package Bundling (Distribution / Release)
 44 | 
 45 | <br>
 46 | 
 47 | ## Custom Aliases for Paths
 48 | 
 49 | We can use predefined aliases for `import` paths already used in this project. Following are the details:
 50 | 
 51 | | Alias         | Target Path                |
 52 | | ------------- | -------------------------- |
 53 | | `@assets`     | `/assets`                  |
 54 | | `@main`       | `/src/main`                |
 55 | | `@renderer`   | `/src/renderer`            |
 56 | | `@common`     | `/src/common`              |
 57 | | `@misc`       | `/misc`                    |
 58 | | `@src`        | `/src`                     |
 59 | | `@components` | `/src/renderer/components` |
 60 | 
 61 | <br><br>
 62 | 
 63 | # Installation
 64 | 
 65 | <br>
 66 | 
 67 | Install dependencies using [pnpm](https://pnpm.io/) or [yarn](https://www.npmjs.com/package/yarn) or [npm](https://www.npmjs.com/) :
 68 | 
 69 | ```bash
 70 | # using pnpm
 71 | pnpm install
 72 | 
 73 | # or using yarn
 74 | yarn install
 75 | 
 76 | # or using npm
 77 | npm install
 78 | ```
 79 | 
 80 | <br />
 81 | 
 82 | ## Start : Development
 83 | 
 84 | To develop and run your application, you need to run following command.
 85 | <br />
 86 | Start electron application for development :
 87 | 
 88 | ```bash
 89 | yarn start
 90 | ```
 91 | 
 92 | <br />
 93 | 
 94 | ## Lint : Development
 95 | 
 96 | To lint application source code using ESLint via this command :
 97 | 
 98 | ```bash
 99 | yarn lint
100 | ```
101 | 
102 | <br />
103 | 
104 | ## Package : Production
105 | 
106 | Customize and package your Electron app with OS-specific bundles (.app, .exe etc)
107 | 
108 | ```bash
109 | yarn package
110 | ```
111 | 
112 | <br />
113 | 
114 | ## Make : Production
115 | 
116 | Making is a way of taking your packaged application and making platform specific distributables like DMG, EXE, or Flatpak files (amongst others).
117 | 
118 | ```bash
119 | yarn make
120 | ```
121 | 
122 | <br />
123 | 
124 | ## Publish : Production
125 | 
126 | Publishing is a way of taking the artifacts generated by the `make` command and sending them to a service somewhere for you to distribute or use as updates. (This could be your update server or an S3 bucket)
127 | 
128 | ```bash
129 | yarn publish
130 | ```
131 | 
132 | <br />
133 | 
134 | ## Packager & Makers Configuration
135 | 
136 | This provides an easy way of configuring your packaged application and making platform specific distributables like DMG, EXE, or Flatpak files.
137 | 
138 | This configurations file is available in :
139 | 
140 | ```bash
141 | tools/forge/forge.config.js
142 | ```
143 | 
144 | For further information, you can visit [Electron Forge Configuration](https://www.electronforge.io/configuration)
145 | 


--------------------------------------------------------------------------------
/src/renderer/components/Theme.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 |  *=========================================================================
  3 |  * ERWT Dark Theme
  4 |  *=========================================================================
  5 |  *
  6 |  * Here we define the Dark Theme (stylesheet) for application.
  7 |  */
  8 | 
  9 | :root {
 10 |   // Application
 11 |   --app-accent-color: #32639f;
 12 |   --app-font-size: 16px;
 13 |   --app-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
 14 |     "Open Sans", "Helvetica Neue", sans-serif;
 15 |   --app-bgcolor: #202020;
 16 |   --app-border-color: #3b3f44;
 17 | 
 18 |   // Scrollbar
 19 |   --scroll-width: 10px;
 20 |   --scroll-track-bgcolor: #2f2f2f52;
 21 |   --scroll-thumb-bgcolor: rgba(59, 59, 59, 0.747);
 22 |   --scroll-thumb-hover-bgcolor: #555;
 23 | 
 24 |   // Selection
 25 |   --selection-bgcolor: var(--app-accent-color);
 26 |   --selection-color: #fff;
 27 | 
 28 |   // Button
 29 |   --button-color: #fff;
 30 |   --button-border: 1px solid #222424;
 31 |   --button-bgcolor: hsl(0, 0%, 22%);
 32 |   --button-hover-bgcolor: hsl(0, 0%, 24%);
 33 |   --button-active-bgcolor: hsl(0deg 0% 20%);
 34 |   --button-shadow-color: #00000078;
 35 | 
 36 |   // Titlebar
 37 |   --titlebar-bgcolor: hsl(0deg 0% 10%);
 38 |   --titlebar-color: hsl(0, 0%, 85%);
 39 |   --titlebar-title-color: hsl(0, 0%, 85%);
 40 |   --titlebar-menu-border-color: #2d2c2c;
 41 |   --titlebar-menu-title-hover-bgcolor: hsl(0deg 0% 12%);
 42 |   --titlebar-menu-title-active-bgcolor: hsl(0deg 0% 14%);
 43 |   --titlebar-menu-title-active-border-color: var(--titlebar-menu-border-color);
 44 |   --titlebar-menu-separator-bgcolor: var(--titlebar-menu-border-color);
 45 |   --titlebar-popup-bgcolor: hsl(0deg 0% 14%);
 46 |   --titlebar-popup-border: 1px solid var(--titlebar-menu-border-color);
 47 |   --titlebar-popup-shadow: 4px 10px 10px rgba(0, 0, 0, 0.2);
 48 |   --titlebar-popup-item-name-color: hsl(0, 0%, 75%);
 49 |   --titlebar-popup-item-shortcut-color: hsla(0, 0%, 55%, 0.8);
 50 |   --titlebar-popup-item-hover-color: hsl(0, 0%, 85%);
 51 |   --titlebar-popup-item-hover-bgcolor: hsl(0deg 0% 18%);
 52 |   --titlebar-popup-item-hover-shortcut-color: var(--app-accent-color);
 53 |   --titlebar-popup-item-name-shadow-color: #151515;
 54 | 
 55 |   // ERWT
 56 |   --erwt-heading-color: #dddddd;
 57 | }
 58 | 
 59 | /*
 60 |  *=========================================================================
 61 |  * ERWT Light Theme
 62 |  *=========================================================================
 63 |  *
 64 |  * Light theme for ERWT application.
 65 |  */
 66 | 
 67 | body:not(.dark-mode) {
 68 |   // Application
 69 |   --app-accent-color: #2f77ca;
 70 |   --app-bgcolor: #f1f0f0;
 71 | 
 72 |   // Selection
 73 |   --selection-bgcolor: var(--app-accent-color);
 74 |   --selection-color: #fff;
 75 | 
 76 |   // Scrollbar
 77 |   --scroll-track-bgcolor: #2f2f2f1f;
 78 |   --scroll-thumb-bgcolor: rgb(59 59 59 / 30%);
 79 |   --scroll-thumb-hover-bgcolor: var(--app-accent-color);
 80 | 
 81 |   // Button
 82 |   --button-border: 1px solid #eaeaea;
 83 |   --button-bgcolor: #fff;
 84 |   --button-color: #424242;
 85 |   --button-shadow-color: white;
 86 |   --button-hover-bgcolor: hsl(0, 0%, 98%);
 87 |   --button-active-bgcolor: hsl(0, 0%, 96%);
 88 | 
 89 |   // Titlebar
 90 |   --titlebar-bgcolor: #dcddde;
 91 |   --titlebar-color: #1f1f1f;
 92 |   --titlebar-title-color: var(--titlebar-color);
 93 |   --titlebar-menu-title-hover-bgcolor: #e6e6e6;
 94 |   --titlebar-popup-item-hover-bgcolor: hsl(210deg 16% 92%);
 95 |   --titlebar-popup-bgcolor: hsl(0deg 0% 99%);
 96 |   --titlebar-menu-title-active-bgcolor: hsl(0deg 0% 99%);
 97 |   --titlebar-menu-title-active-border-color: #d3d6d8;
 98 |   --titlebar-popup-border: 1px solid #d3d6d8;
 99 |   --titlebar-menu-separator-bgcolor: #d3d6d8;
100 |   --titlebar-popup-item-hover-bgcolor: #d6dade;
101 |   --titlebar-popup-item-name-color: #0e0e0e;
102 |   --titlebar-popup-item-name-shadow-color: rgba(255, 255, 255, 0.8);
103 |   --titlebar-popup-item-hover-color: #000000;
104 |   --titlebar-popup-item-hover-shortcut-color: var(--app-accent-color);
105 |   --titlebar-popup-item-hover-bgcolor: #e6e6e6;
106 | 
107 |   // ERWT
108 |   --erwt-heading-color: #282828;
109 | 
110 |   // Overrides
111 |   .main-teaser {
112 |     background: #fff;
113 |     color: #747474;
114 | 
115 |     &:after {
116 |       box-shadow: none;
117 |     }
118 |   }
119 | 
120 |   .versions .item {
121 |     color: #656565;
122 |     background: #fff;
123 |     box-shadow: 0 2px 4px #00000005;
124 | 
125 |     & > span {
126 |       color: #999999;
127 |     }
128 |   }
129 | }
130 | 


--------------------------------------------------------------------------------
/misc/window/components/Titlebar.less:
--------------------------------------------------------------------------------
  1 | @titlebar-baseSize: 16px;
  2 | @titlebar-height: 28px;
  3 | @titlebar-bg: #171b21;
  4 | @titlebar-iconSize: 16px;
  5 | @em: @titlebar-baseSize*1em;
  6 | 
  7 | //-----------------------------------------
  8 | // Mixins
  9 | //-----------------------------------------
 10 | 
 11 | .flex-strech() {
 12 |   display: flex;
 13 |   align-items: stretch;
 14 | }
 15 | 
 16 | .flex-align-center() {
 17 |   display: flex;
 18 |   align-items: center;
 19 | }
 20 | 
 21 | //-----------------------------------------
 22 | // Stylesheet
 23 | //-----------------------------------------
 24 | 
 25 | .window-content {
 26 |   position: relative;
 27 |   overflow: auto;
 28 |   flex: 1;
 29 | }
 30 | 
 31 | .window-titlebar {
 32 |   .flex-strech();
 33 |   font-size: @titlebar-baseSize;
 34 |   height: @titlebar-height;
 35 |   background: @titlebar-bg;
 36 |   -webkit-app-region: drag; // Draggable
 37 |   user-select: none;
 38 |   position: relative;
 39 | 
 40 |   &>section {
 41 |     .flex-align-center();
 42 |   }
 43 | 
 44 |   &-content {
 45 |     flex: 1;
 46 |     font-size: calc(@titlebar-baseSize - 3px);
 47 |     color: #a9b0bb;
 48 | 
 49 |     &.centered {
 50 |       width: 100%;
 51 |       height: 100%;
 52 |       position: absolute;
 53 |       justify-content: center;
 54 |     }
 55 |   }
 56 | 
 57 |   // Titlebar icon
 58 |   &-icon {
 59 |     padding: 0 0.75em;
 60 | 
 61 |     img {
 62 |       width: @titlebar-iconSize;
 63 |       height: @titlebar-iconSize;
 64 |     }
 65 |   }
 66 | 
 67 |   // Titlebar Menu
 68 |   &-menu {
 69 |     flex: 1;
 70 |   }
 71 | 
 72 |   .menu {
 73 |     &-item {
 74 |       position: relative;
 75 |     }
 76 | 
 77 |     &-item.active {
 78 |       .menu-title {
 79 |         background: #3c4043;
 80 |         color: #bfbfbf;
 81 |       }
 82 |     }
 83 | 
 84 |     &-title {
 85 |       padding: 4px 10px;
 86 |       font-size: 0.8125rem;
 87 |       text-shadow: 0px 1px 1px black;
 88 |       -webkit-app-region: no-drag;
 89 |       color: #97a0b1;
 90 | 
 91 |       &:hover {
 92 |         background-color: #1f252c;
 93 |       }
 94 |     }
 95 | 
 96 |     &-popup {
 97 |       display: none;
 98 |       position: fixed;
 99 |       background: #292a2d;
100 |       min-width: 70px;
101 |       border: 1px solid #3c4043;
102 |       padding: 0.25rem 0;
103 |       box-shadow: 2px 1px 4px hsla(0, 0%, 0%, 0.5);
104 |       z-index: 10000;
105 | 
106 |       &.active {
107 |         display: block;
108 |       }
109 | 
110 |       &-item {
111 |         display: flex;
112 |         justify-content: space-between;
113 |         font-size: 0.8125rem;
114 |         text-shadow: 0px 1px 1px black;
115 |         padding: 0.375rem 1rem;
116 | 
117 |         &:hover {
118 |           background: #1761cb;
119 | 
120 |           .popup-item-shortcut {
121 |             color: #8cbbff;
122 |           }
123 |         }
124 |       }
125 |     }
126 |   }
127 | 
128 |   .popup-item {
129 |     &-name {
130 |       padding-right: 2rem;
131 |       color: #d8d8d8;
132 |     }
133 | 
134 |     &-shortcut {
135 |       color: #73757c;
136 |       text-shadow: none;
137 |     }
138 | 
139 |     &-separator {
140 |       height: 1px;
141 |       background: #3c4043;
142 |       margin: 4px 0;
143 |     }
144 |   }
145 | 
146 |   // Titlebar controls
147 |   &-controls {
148 |     .flex-strech();
149 |     position: absolute;
150 |     right: 0;
151 |     top: 0;
152 |     bottom: 0;
153 |     color: #969799;
154 | 
155 |     &.type-windows {
156 |       .control {
157 |         padding: 0 1.15em;
158 |         font-size: 0.875em;
159 |         display: flex;
160 |         height: 100%;
161 |         align-items: center;
162 |         -webkit-app-region: no-drag;
163 | 
164 |         &.close:hover {
165 |           background: #e10000;
166 |         }
167 | 
168 |         &:hover {
169 |           background: #242d38;
170 |           color: #d8d9db;
171 |         }
172 |       }
173 |     }
174 | 
175 |     &.type-mac {
176 |       .control {
177 |         width: 16px;
178 |         height: 16px;
179 |         background: #0e0e0e99;
180 |         border-radius: 50%;
181 |         display: flex;
182 |         align-items: center;
183 |         justify-content: center;
184 |         margin-right: 0.675rem;
185 |         color: transparent;
186 |         -webkit-app-region: no-drag;
187 |         opacity: 0.8;
188 | 
189 |         &:hover {
190 |           opacity: 1;
191 |         }
192 |       }
193 | 
194 |       .control.close {
195 |         background: #f46d60;
196 |       }
197 | 
198 |       .control.maximize {
199 |         background: #59ca56;
200 |       }
201 | 
202 |       .control.minimize {
203 |         background: #f9c04e;
204 |       }
205 |     }
206 |   }
207 | }


--------------------------------------------------------------------------------
/src/renderer/components/Application.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react';
  2 | import './Application.scss';
  3 | import { icons } from './Icons';
  4 | 
  5 | const Application: React.FC = () => {
  6 |   const [counter, setCounter] = useState(0);
  7 |   const [darkTheme, setDarkTheme] = useState(true);
  8 |   const [versions, setVersions] = useState<Record<string, string>>({});
  9 | 
 10 |   /*On component mount*/
 11 |   useEffect(() => {
 12 |     const useDarkTheme = parseInt(localStorage.getItem('dark-mode'));
 13 |     if (isNaN(useDarkTheme)) {
 14 |       setDarkTheme(true);
 15 |     } else if (useDarkTheme == 1) {
 16 |       setDarkTheme(true);
 17 |     } else if (useDarkTheme == 0) {
 18 |       setDarkTheme(false);
 19 |     }
 20 | 
 21 |     // Apply verisons
 22 |     const app = document.getElementById('app');
 23 |     const versions = JSON.parse(app.getAttribute('data-versions'));
 24 |     setVersions(versions);
 25 |   }, []);
 26 | 
 27 |   /**
 28 |    * On Dark theme change
 29 |    */
 30 |   useEffect(() => {
 31 |     if (darkTheme) {
 32 |       localStorage.setItem('dark-mode', '1');
 33 |       document.body.classList.add('dark-mode');
 34 |     } else {
 35 |       localStorage.setItem('dark-mode', '0');
 36 |       document.body.classList.remove('dark-mode');
 37 |     }
 38 |   }, [darkTheme]);
 39 | 
 40 |   /**
 41 |    * Toggle Theme
 42 |    */
 43 |   function toggleTheme() {
 44 |     setDarkTheme(!darkTheme);
 45 |   }
 46 | 
 47 |   return (
 48 |     <div id='erwt'>
 49 |       <div className='header'>
 50 |         <div className='main-heading'>
 51 |           <h1 className='themed'>ERWT - Electron Boilerplate</h1>
 52 |         </div>
 53 |         <div className='main-teaser'>
 54 |           <div>
 55 |             Robust boilerplate for Desktop Applications with Electron and
 56 |             ReactJS.
 57 |             <br />
 58 |             Hot Reloading is used in this project for fast development
 59 |             experience.
 60 |             <br />
 61 |             If you think the project is useful enough, just spread the word around!
 62 |           </div>
 63 |         </div>
 64 |         <div className='versions'>
 65 |           <div className='item'>
 66 |             <div>
 67 |               <img className='item-icon' src={icons.electron} /> Electron
 68 |             </div>
 69 |             <span>{versions?.electron}</span>
 70 |           </div>
 71 |           <div className='item'>
 72 |             <div>
 73 |               <img className='item-icon' src={icons.erwt} /> ERWT
 74 |             </div>
 75 |             <span>{versions?.erwt}</span>
 76 |           </div>
 77 |           <div className='item'>
 78 |             <div>
 79 |               <img className='item-icon' src={icons.typescript} /> Typescript
 80 |             </div>
 81 |             <span>{versions?.typescript}</span>
 82 |           </div>
 83 |           <div className='item'>
 84 |             <div>
 85 |               <img className='item-icon' src={icons.nodejs} /> Nodejs
 86 |             </div>
 87 |             <span>{versions?.node}</span>
 88 |           </div>
 89 |           <div className='item'>
 90 |             <div>
 91 |               <img className='item-icon' src={icons.react} /> React
 92 |             </div>
 93 |             <span>{versions?.react}</span>
 94 |           </div>
 95 |           <div className='item'>
 96 |             <div>
 97 |               <img className='item-icon' src={icons.webpack} /> Webpack
 98 |             </div>
 99 |             <span>{versions?.webpack}</span>
100 |           </div>
101 |           <div className='item'>
102 |             <div>
103 |               <img className='item-icon' src={icons.chrome} /> Chrome
104 |             </div>
105 |             <span>{versions?.chrome}</span>
106 |           </div>
107 |           <div className='item'>
108 |             <div>
109 |               <img className='item-icon' src={icons.license} /> License
110 |             </div>
111 |             <span>{versions?.license}</span>
112 |           </div>
113 |         </div>
114 |       </div>
115 | 
116 |       <div className='footer'>
117 |         <div className='center'>
118 |           <button
119 |             onClick={() => {
120 |               if (counter > 99) return alert('Going too high!!');
121 |               setCounter(counter + 1);
122 |             }}
123 |           >
124 |             Increment {counter != 0 ? counter : ''} <span>{counter}</span>
125 |           </button>
126 |           &nbsp;&nbsp; &nbsp;&nbsp;
127 |           <button
128 |             onClick={() => {
129 |               if (counter == 0) return alert('Oops.. thats not possible!');
130 |               setCounter(counter > 0 ? counter - 1 : 0);
131 |             }}
132 |           >
133 |             Decrement <span>{counter}</span>
134 |           </button>
135 |           &nbsp;&nbsp; &nbsp;&nbsp;
136 |           <button onClick={toggleTheme}>
137 |             {darkTheme ? 'Light Theme' : 'Dark Theme'}
138 |           </button>
139 |         </div>
140 |       </div>
141 |     </div>
142 |   );
143 | };
144 | 
145 | export default Application;
146 | 
147 | 


--------------------------------------------------------------------------------
/misc/window/components/Titlebar.tsx:
--------------------------------------------------------------------------------
  1 | import React, { createRef, useContext, useEffect, useRef, useState } from 'react';
  2 | import titlebarMenus from '../titlebarMenus';
  3 | import classNames from 'classnames';
  4 | import WindowControls from './WindowControls';
  5 | import context from '../titlebarContextApi';
  6 | import { WindowContext } from './WindowFrame';
  7 | import './Titlebar.less';
  8 | 
  9 | type Props = {
 10 |   title: string;
 11 |   mode: 'centered-title';
 12 |   icon?: string;
 13 | };
 14 | 
 15 | const Titlebar: React.FC<Props> = (props) => {
 16 |   const activeMenuIndex = useRef<number | null>(null);
 17 |   const menusRef = titlebarMenus.map(() => createRef<HTMLDivElement>());
 18 |   const [menusVisible, setMenusVisible] = useState(true);
 19 |   const windowContext = useContext(WindowContext);
 20 | 
 21 |   useEffect(() => {
 22 |     const handleKeyDown = (e: KeyboardEvent) => {
 23 |       if (e.repeat) return; // Prevent repeatation of toggle when key holding
 24 |       if (e.altKey) {
 25 |         // Hiding menus? close active menu popup
 26 |         if (menusVisible) {
 27 |           closeActiveMenu();
 28 |         }
 29 |         setMenusVisible(!menusVisible);
 30 |       }
 31 |     };
 32 | 
 33 |     document.addEventListener('keydown', handleKeyDown);
 34 | 
 35 |     return () => {
 36 |       document.removeEventListener('keydown', handleKeyDown);
 37 |     };
 38 |   }, [menusVisible, menusRef]);
 39 | 
 40 |   useEffect(() => {
 41 |     function handleClickOutside(event: MouseEvent) {
 42 |       if (activeMenuIndex.current != null) {
 43 |         if (
 44 |           menusRef[activeMenuIndex.current].current &&
 45 |           !menusRef[activeMenuIndex.current].current?.contains(event.target as Node)
 46 |         ) {
 47 |           // console.log('You clicked outside of me!');
 48 |           closeActiveMenu();
 49 |         }
 50 |       }
 51 |     }
 52 | 
 53 |     if (activeMenuIndex != null) {
 54 |       document.addEventListener('mousedown', handleClickOutside);
 55 |       // console.log('added event');
 56 |     }
 57 | 
 58 |     return () => {
 59 |       document.removeEventListener('mousedown', handleClickOutside);
 60 |       // console.log('remove event');
 61 |     };
 62 |   }, [activeMenuIndex, menusRef]);
 63 | 
 64 |   function showMenu(index: number, e: React.MouseEvent<HTMLDivElement>) {
 65 |     e.stopPropagation();
 66 |     e.preventDefault();
 67 | 
 68 |     if (menusRef[index].current?.classList.contains('active')) {
 69 |       // close..
 70 |       closeActiveMenu();
 71 |     } else {
 72 |       // open..
 73 |       menusRef[index].current?.classList.add('active');
 74 |       activeMenuIndex.current = index;
 75 |       menusRef[index].current?.parentElement?.classList.add('active');
 76 |     }
 77 |   }
 78 | 
 79 |   function onMenuHover(index: number) {
 80 |     if (activeMenuIndex.current != null) {
 81 |       menusRef[activeMenuIndex.current].current?.classList.toggle('active');
 82 |       menusRef[index].current?.classList.toggle('active');
 83 |       menusRef[index].current?.parentElement?.classList.toggle('active');
 84 |       menusRef[activeMenuIndex.current].current?.parentElement?.classList.toggle(
 85 |         'active',
 86 |       );
 87 | 
 88 |       activeMenuIndex.current = index;
 89 |     }
 90 |   }
 91 | 
 92 |   function closeActiveMenu() {
 93 |     if (activeMenuIndex.current != null) {
 94 |       menusRef[activeMenuIndex.current].current?.classList.remove('active');
 95 |       menusRef[activeMenuIndex.current]?.current?.parentElement?.classList.remove('active');
 96 |       activeMenuIndex.current = null;
 97 |     }
 98 |   }
 99 | 
100 |   function handleAction(action?: string, value?: string | number) {
101 |     closeActiveMenu();
102 |     const c: Record<string, CallableFunction> = context;
103 |     if (action) {
104 |       if (typeof c[action] === 'function') {
105 |         c[action](value);
106 |       } else {
107 |         console.log(`action [${action}] is not available in titlebar context`);
108 |       }
109 |     }
110 |   }
111 | 
112 |   return (
113 |     <div className='window-titlebar'>
114 |       {props.icon ? (
115 |         <section className='window-titlebar-icon'>
116 |           <img src={props.icon} alt='titlebar icon' />
117 |         </section>
118 |       ) : (
119 |         ''
120 |       )}
121 | 
122 |       <section
123 |         className={classNames('window-titlebar-content', {
124 |           centered: props.mode === 'centered-title',
125 |         })}
126 |       >
127 |         {menusVisible ? '' : <div className='window-title'>{props.title}</div>}
128 |       </section>
129 | 
130 |       <section
131 |         className={classNames('window-titlebar-menu', {
132 |           hidden: !menusVisible,
133 |         })}
134 |       >
135 |         {titlebarMenus.map((item, menuIndex) => {
136 |           return (
137 |             <div className='menu-item' key={`menu_${menuIndex}`}>
138 |               <div
139 |                 className='menu-title'
140 |                 onClick={(e) => showMenu(menuIndex, e)}
141 |                 onMouseEnter={() => onMenuHover(menuIndex)}
142 |                 onMouseDown={(e) => e.preventDefault()}
143 |               >
144 |                 {item.name}
145 |               </div>
146 |               <div className='menu-popup' ref={menusRef[menuIndex]}>
147 |                 {item.items?.map((menuItem, menuItemIndex) => {
148 |                   if (menuItem.name === '__') {
149 |                     return (
150 |                       <div
151 |                         key={`menu_${menuIndex}_popup_item_${menuItemIndex}`}
152 |                         className='popup-item-separator'
153 |                       ></div>
154 |                     );
155 |                   }
156 | 
157 |                   return (
158 |                     <div
159 |                       key={`menu_${menuIndex}_popup_item_${menuItemIndex}`}
160 |                       className='menu-popup-item'
161 |                       onClick={() =>
162 |                         handleAction(menuItem.action, menuItem.value)
163 |                       }
164 |                       onMouseDown={(e) => e.preventDefault()}
165 |                     >
166 |                       <div className='popup-item-name'>{menuItem.name}</div>
167 |                       <div className='popup-item-shortcut'>
168 |                         {menuItem.shortcut}
169 |                       </div>
170 |                     </div>
171 |                   );
172 |                 })}
173 |               </div>
174 |             </div>
175 |           );
176 |         })}
177 |       </section>
178 | 
179 |       <WindowControls platform={windowContext.platform} tooltips={true} />
180 |     </div>
181 |   );
182 | };
183 | 
184 | export default Titlebar;
185 | 


--------------------------------------------------------------------------------
/src/renderer/components/Application.scss:
--------------------------------------------------------------------------------
  1 | @import "./Theme.scss";
  2 | 
  3 | /**
  4 |  *==========================================================================
  5 |  * Application Specific Stylesheet
  6 |  *==========================================================================
  7 |  *
  8 |  * Here we use the codes to apply application specific style
  9 |  */
 10 | 
 11 | ::selection {
 12 |   background: var(--selection-bgcolor);
 13 |   color: var(--selection-color);
 14 | }
 15 | 
 16 | ::-webkit-scrollbar {
 17 |   width: var(--scroll-width);
 18 | 
 19 |   &-track {
 20 |     background: var(--scroll-track-bgcolor);
 21 |   }
 22 | 
 23 |   &-thumb {
 24 |     background: var(--scroll-thumb-bgcolor);
 25 |   }
 26 | 
 27 |   &-thumb:hover {
 28 |     background: var(--scroll-thumb-hover-bgcolor);
 29 |   }
 30 | }
 31 | 
 32 | html,
 33 | body,
 34 | #app {
 35 |   height: 100%;
 36 | }
 37 | 
 38 | body {
 39 |   margin: 0;
 40 |   font-size: var(--app-font-size);
 41 |   font-family: var(--app-font-family);
 42 |   color: var(--app-color);
 43 |   background: var(--app-bgcolor);
 44 |   line-height: 1.5;
 45 | }
 46 | 
 47 | h1 {
 48 |   margin: 0;
 49 | }
 50 | 
 51 | #app {
 52 |   display: flex;
 53 |   flex-direction: column;
 54 |   box-sizing: border-box;
 55 |   user-select: none;
 56 | 
 57 |   &.has-border {
 58 |     border: var(--app-border-color);
 59 |   }
 60 | }
 61 | 
 62 | button {
 63 |   background: var(--button-bgcolor);
 64 |   color: var(--button-color);
 65 |   font-weight: normal;
 66 |   text-shadow: 0px 1px var(--button-shadow-color);
 67 |   font-family: var(--app-font-family);
 68 |   border: var(--button-border);
 69 |   padding: 0.5rem 1rem;
 70 |   border-radius: 6px;
 71 |   font-size: 0.875rem;
 72 |   cursor: pointer;
 73 |   display: inline-flex;
 74 |   justify-content: space-around;
 75 |   align-items: center;
 76 |   outline: none;
 77 |   min-width: 140px;
 78 | 
 79 |   &:hover {
 80 |     background: var(--button-hover-bgcolor);
 81 |   }
 82 | 
 83 |   &:active {
 84 |     background: var(--button-active-bgcolor);
 85 |   }
 86 | 
 87 |   &>span {
 88 |     color: var(--button-badge-color);
 89 |     background-color: var(--button-badge-bgcolor);
 90 |     font-size: 12px;
 91 |     width: 24px;
 92 |     height: 24px;
 93 |     border-radius: 50%;
 94 |     display: inline-flex;
 95 |     align-items: center;
 96 |     justify-content: center;
 97 |     display: none;
 98 |   }
 99 | 
100 |   img {
101 |     width: 22px;
102 |     opacity: 0.8;
103 |   }
104 | }
105 | 
106 | .rotate {
107 |   animation: rotate 4.5s linear infinite;
108 | }
109 | 
110 | @keyframes rotate {
111 |   to {
112 |     transform: rotate(360deg);
113 |   }
114 | }
115 | 
116 | .main-heading {
117 |   display: flex;
118 |   align-items: center;
119 |   justify-content: center;
120 |   margin-bottom: 3rem;
121 | 
122 |   img {
123 |     margin-right: 1rem;
124 |   }
125 | 
126 |   h1 {
127 |     font-size: 1.5rem;
128 |     font-weight: 300;
129 |     color: var(--erwt-heading-color);
130 |     line-height: 1;
131 |     text-transform: uppercase;
132 |   }
133 | }
134 | 
135 | .hidden {
136 |   display: none !important;
137 | }
138 | 
139 | .center {
140 |   text-align: center;
141 | }
142 | 
143 | .main-teaser {
144 |   position: relative;
145 |   display: flex;
146 |   line-height: 25px;
147 |   font-size: 14px;
148 |   margin-bottom: 2em;
149 |   color: gray;
150 |   width: 63%;
151 |   margin: 0 auto;
152 |   margin-bottom: 3rem;
153 |   text-align: left;
154 |   padding-left: 1rem;
155 |   background: #191919;
156 |   padding-top: 1rem;
157 |   padding-bottom: 10px;
158 |   padding-right: 1rem;
159 |   border-radius: 0 0 8px 8px;
160 |   box-shadow: 0 8px 10px 0px #00000003;
161 | }
162 | 
163 | .main-teaser:after {
164 |   content: "";
165 |   position: absolute;
166 |   top: 0;
167 |   width: calc(100% + 40px);
168 |   height: 2px;
169 |   background: var(--app-accent-color);
170 |   left: -20px;
171 |   box-shadow: 0 10px 20px #000000e3;
172 |   border-radius: 8px;
173 | }
174 | 
175 | .versions {
176 |   display: flex;
177 |   justify-content: space-between;
178 |   gap: 1rem;
179 |   flex-wrap: wrap;
180 |   border-radius: 10px;
181 |   box-shadow: 0 0 20px inset rgb(0 0 0 / 3%);
182 |   width: 80%;
183 |   margin: 0 auto;
184 | }
185 | 
186 | .versions .item {
187 |   background: #191919;
188 |   color: #d1d1d1;
189 |   width: calc(50% - 1rem);
190 |   padding: 4px 12px;
191 |   display: flex;
192 |   justify-content: space-between;
193 |   font-size: 14px;
194 |   margin: 0;
195 |   box-sizing: border-box;
196 |   border-radius: 4px;
197 | 
198 |   &>* {
199 |     display: flex;
200 |   }
201 | 
202 |   &-icon {
203 |     width: 20px;
204 |     height: 20px;
205 |     margin-right: 10px;
206 |     opacity: 0.8;
207 |   }
208 | 
209 |   &>span {
210 |     color: gray;
211 |     text-align: right;
212 |   }
213 | }
214 | 
215 | #erwt {
216 |   // user-select: none;
217 |   display: flex;
218 |   flex-direction: column;
219 |   height: 100%;
220 |   justify-content: space-between;
221 |   background: var(--erwt-gradient);
222 | 
223 |   .header {
224 |     padding: 3rem 2rem 0rem 2rem;
225 |     max-width: 700px;
226 |     margin: 0 auto;
227 |   }
228 | 
229 |   .footer {
230 |     padding: 2rem;
231 |     background: var(--app-footer-bgColor);
232 |   }
233 | }
234 | 
235 | /**
236 |  *==========================================================================
237 |  * Titlebar Overrides
238 |  *==========================================================================
239 |  *
240 |  * Here we override color, style, layout sizes for custom electron window
241 |  */
242 | 
243 | .window-titlebar {
244 |   background: var(--titlebar-bgcolor);
245 |   height: auto;
246 |   overflow: hidden;
247 | 
248 |   &-icon {
249 |     min-height: 33px;
250 | 
251 |     img {
252 |       border-radius: 50%;
253 |     }
254 |   }
255 | 
256 |   .window-title {
257 |     color: var(--titlebar-title-color);
258 |   }
259 | 
260 |   .menu-item {
261 |     &.active .menu-title {
262 |       background: var(--titlebar-menu-title-active-bgcolor);
263 |       box-shadow: var(--titlebar-menu-title-shadow);
264 |       color: var(--titlebar-color);
265 |       border-color: var(--titlebar-menu-title-active-border-color);
266 |       border-radius: 4px 4px 0 0;
267 |       border-top-color: var(--app-accent-color);
268 |     }
269 |   }
270 | 
271 |   .menu-title {
272 |     font-weight: normal;
273 |     text-shadow: none;
274 |     color: var(--titlebar-color);
275 |     border-color: transparent;
276 |     border-width: 1px 1px 0 1px;
277 |     border-style: solid;
278 |     padding: 2px 8px;
279 |     margin-right: 2px;
280 |     border-radius: 4px;
281 | 
282 |     &:hover {
283 |       background-color: var(--titlebar-menu-title-hover-bgcolor);
284 |     }
285 |   }
286 | 
287 |   .menu-popup {
288 |     display: none;
289 |     position: fixed;
290 |     background-color: var(--titlebar-popup-bgcolor);
291 |     min-width: 70px;
292 |     border: var(--titlebar-popup-border);
293 |     border-top: 0;
294 |     padding: 0.25rem 0;
295 |     box-shadow: 4px 10px 10px #0000002e;
296 |     z-index: 10000;
297 |     border-radius: 0 6px 6px 6px;
298 | 
299 |     &-item {
300 |       padding: 0.3125rem 1rem;
301 | 
302 |       &:hover {
303 |         background: var(--titlebar-popup-item-hover-bgcolor);
304 | 
305 |         .popup-item-shortcut {
306 |           color: var(--titlebar-popup-item-hover-shortcut-color);
307 |         }
308 | 
309 |         .popup-item-name {
310 |           color: var(--titlebar-popup-item-hover-color);
311 |         }
312 |       }
313 |     }
314 |   }
315 | 
316 |   .popup-item-separator {
317 |     background: var(--titlebar-menu-separator-bgcolor);
318 |   }
319 | 
320 |   .popup-item-name {
321 |     padding-right: 2rem;
322 |     color: var(--titlebar-popup-item-name-color);
323 |     text-shadow: 0px 1px var(--titlebar-popup-item-name-shadow-color);
324 |   }
325 | 
326 |   .popup-item-shortcut {
327 |     color: var(--titlebar-popup-item-shortcut-color);
328 |     text-shadow: none;
329 |     letter-spacing: 0.5px;
330 |   }
331 | 
332 |   &-controls.type-windows .control {
333 |     color: var(--titlebar-color);
334 |     font-family: Arial, Helvetica, sans-serif;
335 | 
336 |     &:hover {
337 |       color: var(--titlebar-color);
338 |       background: var(--titlebar-popup-item-hover-bgcolor);
339 |     }
340 | 
341 |     &.close:hover {
342 |       color: #fff;
343 |     }
344 |   }
345 | }


--------------------------------------------------------------------------------