hellosoftware-io / electron-typescript-react-mui Goto Github PK
View Code? Open in Web Editor NEWLightweight, modern boilerplate built with electron, typescript, react, and material-ui.
Home Page: https://hellosoftware.io
License: MIT License
Lightweight, modern boilerplate built with electron, typescript, react, and material-ui.
Home Page: https://hellosoftware.io
License: MIT License
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?
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 />
);
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
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.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
求解决,谢谢
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
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
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;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.