GithubHelp home page GithubHelp logo

hellosoftware-io / electron-typescript-react-mui Goto Github PK

View Code? Open in Web Editor NEW
70.0 5.0 16.0 1.15 MB

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

Home Page: https://hellosoftware.io

License: MIT License

HTML 3.97% TypeScript 96.03%
react reactjs material-ui typescript electron example boilerplate webpack template electron-app

electron-typescript-react-mui's Issues

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 />
);

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?

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

求解决，谢谢

[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

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

[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 !!

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;

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.