hellosoftware-io / electron-typescript-react-mui

Lightweight, modern boilerplate built with electron, typescript, react, and material-ui.

Electron, TypeScript, MUI (formerly Material-UI), React Boilerplate

Modern and lightweight boilerplate built with electron, typescript, react, webpack, and mui. This also demonstrates live-reloading and static images.

Major technologies

• React.js 18
• Electron 19
• MUI 5 (formerly Material-UI)
• Webpack 5
• Typescript, ESLint, and Prettier are used to improve the developer experience

Requires

• Node.js 16.x
• NPM >= 7.x

Recommended tools

• Visual Studio Code
  • Prettier extension (formatting)
  • ESLint extension (error checking)
• NVM (mac only. helps to manage multiple node.js versions on your machine)

Getting Started

1. Download this repo or run the following command to clone it

git clone https://github.com/hellosoftware-io/electron-typescript-react-material-ui myapp

2. Navigate to the project root

cd myapp

3. Using NPM 7+, run the following command to install dependencies

npm install

4. Run the following command to build and start the development version of your app with live reloading.

npm run dev

Packaging

Run npm run package to build and package your electron app.

Common issues

xcrun: error: invalid active developer path

This is caused when elecron-builder tries to sign a build. Run xcode-select --install to install the necessary Xcode tools.

Folder structure

myapp/
| - dist/               //- Generated by Webpack automatically
| - node_modules/
| - packages/           //- Generated by build script automatically
| - static/             //- Global static assets
| | - electron.svg
| - src/
| | - main/             //- Backend modules for the Electron app
| | | - main.ts         //- Entry point of 'electron-main'
| | - renderer/         //- Frontend React components for the Electron app
| | | - index.tsx       //- Entry point of 'electron-renderer'
| - webpack/            //- Webpack config files
| | - electron.webpack.ts
| | - react.webpack.ts
| - .eslintrc           //- ESLint config
| - .gitignore
| - package-lock.json
| - package.json
| - tsconfig.json       //- TypeScript config
| - webpack.config.js   //- Webpack config

Contributing

Pull requests are always welcome 😃.

License

This project is licensed under the terms of the MIT license.

electron-typescript-react-mui's Issues

preload.js如何设置呢？

preload.js如何设置呢？

webPreferences: {
      nodeIntegration: true,
      contextIsolation: true,
      devTools: process.env.NODE_ENV !== "production",
      preload: path.join(rootPath, "src/main/preload.js"),
},

在设置contextIsolation为true之后会报错
报错信息如下：

Uncaught ReferenceError: global is not defined
    at jsonp chunk loading:42:1
    at jsonp chunk loading:511:1
    at startup:6:1

求解决，谢谢

create a root element and use the ReactDOMClient.render method instead

Create a root element and use the ReactDOMClient.render method instead like this:

import React from "react";
import {createRoot} from 'react-dom/client';
import App from "./components/App";

const rootElem = document.createElement("div");
rootElem.id = "root";
document.body.appendChild(rootElem);

const root = createRoot(rootElem);

root.render(
      <App />
);

[resolved] Valid identities only ?

I get an error when building

(macos catalina, node v16.12.0)

'Valid identities only'

$ npm run package

> [email protected] package
> npm-run-all build package:dist


> [email protected] build
> npm-run-all build:electron build:react


> [email protected] build:electron
> webpack --config webpack/electron.webpack.ts --mode=production

asset main.js 1.36 KiB [emitted] [minimized] (name: main) 1 related asset
./src/main/main.ts 2.47 KiB [built] [code generated]
external "electron" 42 bytes [built] [code generated]
external "path" 42 bytes [built] [code generated]
external "url" 42 bytes [built] [code generated]
webpack 5.64.0 compiled successfully in 4368 ms

> [email protected] build:react
> webpack --config webpack/react.webpack.ts --mode=production

asset js/main.js 1.04 MiB [emitted] [minimized] (name: main) 2 related assets
asset 6a27bb9462f0659447a0.svg 3.78 KiB [emitted] [immutable] [from: static/electron.svg] (auxiliary name: main)
asset index.html 217 bytes [emitted]
695 modules
webpack 5.64.0 compiled successfully in 18203 ms

> [email protected] package:dist
> electron-builder --dir

  • electron-builder  version=22.13.1 os=19.6.0
  • loaded configuration  file=package.json ("build" field)
  • writing effective config  file=packages/builder-effective-config.yaml
  • packaging       platform=darwin arch=x64 electron=15.3.1 appOutDir=packages/mac
  • downloading     url=https://github.com/electron/electron/releases/download/v15.3.1/electron-v15.3.1-darwin-x64.zip size=83 MB parts=8
  • downloaded      url=https://github.com/electron/electron/releases/download/v15.3.1/electron-v15.3.1-darwin-x64.zip duration=4.896s
  • default Electron icon is used  reason=application icon is not set
  • skipped macOS application code signing  reason=cannot find valid "Developer ID Application" identity or custom non-Apple code signing certificate, see https://electron.build/code-signing allIdentities=  1) DA8392F58866098799723C66DAA2ED95138675CE "com.apple.ubiquity.peer-uuid.A8B2988C-E259-4A4F-AA8A-717935892A10" (CSSMERR_TP_CERT_EXPIRED)
  2) 8E28E35CB38493AFCE1BFAB66A84E657EF4E8AFD "com.apple.ubiquity.peer-uuid.8870F39A-0D6B-41E0-B9FF-AD74D954FE8F" (CSSMERR_TP_CERT_EXPIRED)
  3) E57BC143CB59C2C2FDF28E47CEDD853BEBEC57BC "com.apple.ubiquity.ssl-cert.8870F39A-0D6B-41E0-B9FF-AD74D954FE8F" (CSSMERR_TP_CERT_EXPIRED)
  4) 81BA9ADCD7D05BD1BBBF63A2F08FF3375448E4C4 "com.apple.idms.appleid.prd.67765171376d7141426a44505233647a4b384e6649513d3d" (CSSMERR_TP_CERT_EXPIRED)
  5) BC0110A5A7E118014FBC839509CACF4860177B0A "com.apple.idms.appleid.prd.67765171376d7141426a44505233647a4b384e6649513d3d" (CSSMERR_TP_CERT_EXPIRED)
  6) C7D2F2274D500ECBABB88BC5264A3EDA3286C57E "com.apple.idms.appleid.prd.67765171376d7141426a44505233647a4b384e6649513d3d" (CSSMERR_TP_CERT_EXPIRED)
  7) 850784D2B3DCBE464AED076BDF667B8E9F3FF03E "com.apple.idms.appleid.prd.67765171376d7141426a44505233647a4b384e6649513d3d" (CSSMERR_TP_CERT_EXPIRED)
  8) 0186655B86889B9A4CBE968ABF3D197CAEA3EC83 "com.apple.idms.appleid.prd.67765171376d7141426a44505233647a4b384e6649513d3d" (CSSMERR_TP_CERT_EXPIRED)
  9) 66CE63371241CA19E8E5F9353C8A5D0E633B277B "com.apple.idms.appleid.prd.67765171376d7141426a44505233647a4b384e6649513d3d" (CSSMERR_TP_CERT_EXPIRED)
 10) AF9FE64F366D60EF8326F31E41896E191F9B6DE2 "com.apple.idms.appleid.prd.67765171376d7141426a44505233647a4b384e6649513d3d" (CSSMERR_TP_CERT_EXPIRED)
 11) D15FDAC582D9D8B5357C5CDD20AC5AC0776E93D7 "com.apple.idms.appleid.prd.67765171376d7141426a44505233647a4b384e6649513d3d" (CSSMERR_TP_CERT_EXPIRED)
 12) BB0AE5B3B9F89899E2664271C9812F57FD549B9F "iPhone Developer: allen joslin (73B8T2EJDQ)" (CSSMERR_TP_CERT_EXPIRED)
 13) 2B48DA71A6D5BD6E64B63CB657E8799490627A22 "iPhone Distribution: allen joslin (5N7H5D8AKN)" (CSSMERR_TP_CERT_EXPIRED)
 14) 4DE5240C6008678F055C61648659B4390BD117AF "FileVault Recovery Key (ajoslin.local)" (CSSMERR_TP_CERT_EXPIRED)
     14 identities found
                                                Valid identities only
     0 valid identities found

Tray icon doesn't work in production

Hi Team,

Thanks for the fantastic starter project, it's saved a lot of time, but unfortunately I've lost probably more time trying to get the tray icon to work :(

I'm guessing it has something to do with way Webpack is setup, but I'm now on week 3 trying to get this to work.

The tray icon will show fine in development, but no matter what I do it will not show in production. I'm using a .ico file in the static folder, and the static folder is being copied into the packages/win-unpacked/resources folder. All the other images used in the app work, but the tray icon just won't.

Any thoughts on what the issue might be?

Uncaught Error: Cannot find module 'canvas'

I'm having trouble getting started with konva & react-konva in my Electron project based on the boilerplate: https://github.com/hellosoftware-io/electron-typescript-react-mui

Here is a minimal repo showing the problem: https://github.com/ajoslin103/electron-typescript-react-mui

I managed to get the webpack config to work (see below), so the app will compile and launch, but I get a runtime error (whether i have canvas installed or not, does not change the error)

Can anyone say what I should do the fix this problem?

runtime error:

Uncaught Error: Cannot find module 'canvas'
    at webpackMissingModule (index-node.js:4:24)
    at ./node_modules/konva/cmj/index-node.js (index-node.js:4:24)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/react-konva/lib/ReactKonva.js (ReactKonva.js:24:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/renderer/components/KonvaThumbnail.tsx (KonvaThumbnail.tsx:5:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)

which shows as:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const _FullInternals_1 = require("./_FullInternals");
const Canvas = require("canvas"); <==================================== error's here
const canvas = Canvas['default'] || Canvas;
global.DOMMatrix = canvas.DOMMatrix;
const isNode = typeof global.document === 'undefined';
if (isNode) {
    _FullInternals_1.Konva.Util['createCanvasElement'] = () => {
        const node = canvas.createCanvas(300, 300);
        if (!node['style']) {
            node['style'] = {};
        }
        return node;
    };
    _FullInternals_1.Konva.Util.createImageElement = () => {
        const node = new canvas.Image();
        return node;
    };
}
exports.default = _FullInternals_1.Konva;

webpack config

import * as path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { Configuration as WebpackConfiguration, IgnorePlugin } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";

const rootPath = path.resolve(__dirname, "..");

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const config: Configuration = {
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    mainFields: ["main", "module", "browser"],
  },
  entry: path.resolve(rootPath, "src/renderer", "index.tsx"),
  target: "electron-renderer",
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        include: /src/,
        use: {
          loader: "ts-loader",
        },
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
  devServer: {
    static: {
      directory: path.resolve(rootPath, "dist/renderer"),
      publicPath: "/",
    },
    port: 4000,
    historyApiFallback: true,
    compress: true,
  },
  output: {
    path: path.resolve(rootPath, "dist/renderer"),
    filename: "js/[name].js",
  },
  plugins: [
    new HtmlWebpackPlugin({ template: path.resolve(rootPath, "index.html") }),
    new IgnorePlugin({
      resourceRegExp: /canvas|jsdom/,
      contextRegExp: /konva/,
    }),
  ],
  externals: { knex: "commonjs knex" },
};

export default config;

[Resolved] Add multiple window support?

Is it possible you could add to the framework the capability to handle multiple windows with different contents?

All demos I can find only have one window type, I would like two so that my users can do two kinds of jobs.

Thanks for your work! Makes my work possible !!

Preload.ts

Hello,

Is it possible to also add preload.ts and let it to be compiled to the dist folder and then loaded by main?

Thanks

npm run dev:react produce error

Hi, thank you for boilerplate.
I have noticed issue that command "dev:react" produce error
Uncaught ReferenceError: global is not defined at main.js:114096 at main.js:114565 at main.js:114576