diego3g / electron-typescript-react Goto Github PK
View Code? Open in Web Editor NEW:electron: An Electron boilerplate including TypeScript, React, Jest and ESLint.
:electron: An Electron boilerplate including TypeScript, React, Jest and ESLint.
Hi.
I've tried combining @unform/web and @unform/core to this boilerplate but the electron window displays a blank page when I add those dependencies.
Maybe there is a different configuration required in webpack for @unform to work ?
rules.webpack.js
has a problem:
if some module use typeof require
to check require is define or not
the boilerplate default webpack
rule config will change it , like:
var u = typeof require && require
// compile
var u = true && require
so it will cause a error when app build: ReferenceError: require is not defined
you can change this code in rules.webpack.js
below and solve this problem at line 7
- test: /\.(m?js|node)$/,
+ test: /\.(node)$/,
I don't know why, but it‘s useful
download the package
yarn add exceljs
use exceljs
in App.tsx
like
+ import Excel from 'exceljs'
export function App() {
+ const workbook = new Excel.Workbook()
rules.webpack.js
and restart, back to normal.According to electron/forge#682 (comment) and https://www.electronforge.io/cli#start
If you type rs (and hit enter) in the same terminal where you ran the start command, the running app will be terminated and restarted.
Does this work for you? Somehow, it does not work for me. I tested with vanilla electron-forge and there it works.
So each time I change something on the main code, I have to Ctrl+C and npm start
. Any ideas? How is your dev workflow?
i tried to edit index.html
, but it doesnt work.
for example i want to add this in
<link
rel="stylesheet"
href="css/bootstrap.css"
/>
Following Electron's security guide, nodeIntegation should not be set to true
"It is paramount that you do not enable Node.js integration in any renderer (BrowserWindow, BrowserView, or ) that loads remote content. The goal is to limit the powers you grant to remote content, thus making it dramatically more difficult for an attacker to harm your users should they gain the ability to execute JavaScript on your website."
"A cross-site-scripting (XSS) attack is more dangerous if an attacker can jump out of the renderer process and execute code on the user's computer. Cross-site-scripting attacks are fairly common - and while an issue, their power is usually limited to messing with the website that they are executed on. Disabling Node.js integration helps prevent an XSS from being escalated into a so-called "Remote Code Execution" (RCE) attack."
The following StackOverflow thread is relevant to this issue: source: https://stackoverflow.com/questions/55164360/with-contextisolation-true-is-it-possible-to-use-ipcrenderer
How to use a static image in this template? I've try to put file in assets, but doesn't work, I've try import using relative path and doesn't work too.
even after changing in index.html , window title is not changing, it is showing as webpack App ?
` ## Electron + TypeScript + React
Boilerplate for a project using Electron, React and Typescript
Use a package manager of your choice (npm, yarn, etc.) in order to install all dependencies
npm install
yarn install
In order to run this project 2 scripts will need to be executed dev:react
and dev:electron
, run each one in a different terminal and always run dev:react
before dev:electron
, or dev
to run them in order automatically
npm run dev:react
npm run dev:electron
or
npm run dev
To generate a project package run package
npm run package
Pull requests are always welcome 😃.
MIT `
install lib
npm install @grpc/proto-loader
add code into electron/main.ts
const protoLoader = require("@grpc/proto-loader")
console.log(protoLoader)
has error
Compiling Renderer CodeApp threw an error during load
Error: Cannot find module 'lodash.camelcase'
at webpackMissingModule (/Users/loid/WebstormProjects/react-electron-dev/.webpack/main/index.js:31:88)
at Object../node_modules/.store/@[email protected]/node_modules/@grpc/proto-loader/build/src/index.js (/Users/loid/WebstormProjects/react-electron-dev/.webpack/main/index.js:31:179)
at __webpack_require__ (/Users/loid/WebstormProjects/react-electron-dev/.webpack/main/index.js:444:41)
at /Users/loid/WebstormProjects/react-electron-dev/.webpack/main/index.js:515:19
at /Users/loid/WebstormProjects/react-electron-dev/.webpack/main/index.js:585:3
at Object.<anonymous> (/Users/loid/WebstormProjects/react-electron-dev/.webpack/main/index.js:588:12)
at Module._compile (internal/modules/cjs/loader.js:1078:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
at Module.load (internal/modules/cjs/loader.js:935:32)
at Module._load (internal/modules/cjs/loader.js:776:14)
When configuring the routing, can not switch very well, who has the routing configuration, grateful
In App.tsx
`
const childProcess = require('child_process')
const App = () => {
childProcess.exec('npm -v', (error, stdout, stderr) => {
if (error) {
alert('Error')
return
}
alert(stdout.toString())
})
return (
<>
</>
)
}
`
Working fine in Development mode.
But getting 'Error' alert while running the packaged output ?
Initializing tesseract.js with const worker = createWorker();
returns error
....webpack\renderer\main_window\index.js:979
/******/ self["webpackHotUpdateelectron_react_typescript"] = (chunkId, moreModules, runtime) => {
^
ReferenceError: self is not defined
when initialized from the renderer process and
.webpack\main\index.js:45199
electron__WEBPACK_IMPORTED_MODULE_2__.app.on('ready', createWindow).whenReady().then(registerListeners)["catch"](function (e) {
^
TypeError: Cannot read properties of undefined (reading 'on')
when initialized from the main process.
help me. in china
⨯ Get "https://github-production-release-asset-2e65be.s3.amazonaws.com/9384267/e5b6ac80-29ac-11eb-8450-e1664b235645?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20201209%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20201209T064807Z&X-Amz-Expires=300&X-Amz-Signature=689bd6ce877c9a8da88a87808156a4de6b3ede3dbec329a19520df561b3a9524&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=9384267&response-content-disposition=attachment%3B%20filename%3Delectron-v8.5.5-darwin-x64.zip&response-content-type=application%2Foctet-stream": EOF
github.com/develar/app-builder/pkg/download.(*Downloader).follow.func1
/Volumes/data/Documents/app-builder/pkg/download/downloader.go:206
github.com/develar/app-builder/pkg/download.(*Downloader).follow
/Volumes/data/Documents/app-builder/pkg/download/downloader.go:234
github.com/develar/app-builder/pkg/download.(*Downloader).DownloadNoRetry
/Volumes/data/Documents/app-builder/pkg/download/downloader.go:128
github.com/develar/app-builder/pkg/download.(*Downloader).Download
/Volumes/data/Documents/app-builder/pkg/download/downloader.go:112
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).doDownload
/Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:192
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).Download
/Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:177
github.com/develar/app-builder/pkg/electron.downloadElectron.func1.1
/Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:73
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2
/Volumes/data/Documents/app-builder/pkg/util/async.go:68
runtime.goexit
/usr/local/Cellar/go/1.14.5/libexec/src/runtime/asm_amd64.s:1373
⨯ /Users/tongle3000/Documents/xxxx/projects/react-electron/electron-typescript-react/node_modules/_app-builder-bin@3.5.10@app-builder-bin/mac/app-builder exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE stackTrace=
Error: /Users/tongle3000/Documents/xxxx/projects/react-electron/electron-typescript-react/node_modules/_app-builder-bin@3.5.10@app-builder-bin/mac/app-builder exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
at ChildProcess. (/Users/tongle3000/Documents/xxxx/projects/react-electron/electron-typescript-react/node_modules/_builder-util@22.9.1@builder-util/src/util.ts:243:14)
at Object.onceWrapper (events.js:417:26)
at ChildProcess.emit (events.js:310:20)
at maybeClose (internal/child_process.js:1021:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] package:dist: electron-builder --dir
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] package:dist script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tongle3000/.npm/_logs/2020-12-09T06_48_31_743Z-debug.log
ERROR: "package:dist" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] package: npm-run-all build package:dist
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] package script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tongle3000/.npm/_logs/2020-12-09T06_48_31_844Z-debug.log
I received the following error:
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:68:19)
at Object.createHash (node:crypto:138:10)
at BulkUpdateDecorator.hashFactory (/Users/username/Documents/GitHub/project-name/node_modules/webpack/lib/util/createHash.js:145:18)
at BulkUpdateDecorator.update (/Users/username/Documents/GitHub/project-name/node_modules/webpack/lib/util/createHash.js:46:50)
at SourceMapSource.updateHash (/Users/username/Documents/GitHub/project-name/node_modules/webpack-sources/lib/SourceMapSource.js:233:8)
at NormalModule._initBuildHash (/Users/username/Documents/GitHub/project-name/node_modules/webpack/lib/NormalModule.js:868:17)
at handleParseResult (/Users/username/Documents/GitHub/project-name/node_modules/webpack/lib/NormalModule.js:934:10)
at /Users/username/Documents/GitHub/project-name/node_modules/webpack/lib/NormalModule.js:1026:4
at processResult (/Users/username/Documents/GitHub/project-name/node_modules/webpack/lib/NormalModule.js:743:11)
at /Users/username/Documents/GitHub/project-name/node_modules/webpack/lib/NormalModule.js:807:5
at /Users/username/Documents/GitHub/project-name/node_modules/loader-runner/lib/LoaderRunner.js:406:3
at iterateNormalLoaders (/Users/username/Documents/GitHub/project-name/node_modules/loader-runner/lib/LoaderRunner.js:232:10)
at iterateNormalLoaders (/Users/username/Documents/GitHub/project-name/node_modules/loader-runner/lib/LoaderRunner.js:239:10)
at /Users/username/Documents/GitHub/project-name/node_modules/loader-runner/lib/LoaderRunner.js:254:3
at context.callback (/Users/username/Documents/GitHub/project-name/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at /Users/username/Documents/GitHub/project-name/node_modules/babel-loader/lib/index.js:39:71 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',@
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Likely due to a newer version of node. To fix this, I updated all the @electron-forge/ modules to 7.4.0, and then reformatted the "plugins" section of the package to the new format its later version requires:
"plugins": [
{
"name": "@electron-forge/plugin-webpack",
"config":{
"mainConfig": "./webpack/main.webpack.js",
"renderer": {
"config": "./webpack/renderer.webpack.js",
"entryPoints": [
{
"html": "./public/index.html",
"js": "./src/index.tsx",
"name": "main_window",
"preload": {
"js": "./electron/bridge.ts"
}
}
]
}
}
}
],
Then reinstalled everything (yarn / npm install) and ran it again, and that seemed to get everything working.
Hope this helps future browsers such as myself. Thanks for the template :)
I was doing some research about security in Electron and found we should not enable nodeJs integration for Remote Content.
https://github.com/electron/electron/blob/master/docs/tutorial/security.md (second option)
So I tried to disable that option and got some issues -- I believe it was caused by some webpack configuration, not sure.
I'm not an expert in security but I like to follow as much as I can so I wonder if this should be a concern because basically we would be loading the Electron Renderer in localhost (dev environment) and in a static HTML page (prod environment), right?
What do you guys think?
Error: Cannot find module './build/Release/robotjs.node' at webpackMissingModule (/Users/diserdong/Work/workSpace/deskWork/rhino-air/.webpack/main/index.js:21139:84) at Object../node_modules/[email protected]@robotjs/index.js (/Users/diserdong/Work/workSpace/deskWork/rhino-air/.webpack/main/index.js:21139:187) at __webpack_require__ (/Users/diserdong/Work/workSpace/deskWork/rhino-air/.webpack/main/index.js:27521:42) at /Users/diserdong/Work/workSpace/deskWork/rhino-air/.webpack/main/index.js:27600:65 at /Users/diserdong/Work/workSpace/deskWork/rhino-air/.webpack/main/index.js:27772:3 at Object.<anonymous> (/Users/diserdong/Work/workSpace/deskWork/rhino-air/.webpack/main/index.js:27775:12) at Module._compile (internal/modules/cjs/loader.js:1152:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1173:10) at Module.load (internal/modules/cjs/loader.js:992:32) at Module._load (internal/modules/cjs/loader.js:885:14)
./electron/main.js
import robot from "robotjs"
And I tried the suggested npm install and npm rebuild within the node_modules/robotjs directory, but the error wasn't fixed.
https://github.com/octalmage/robotjs/wiki/Electron
npm rebuild --runtime=electron --target=13.1.2 --disturl=https://atom.io/download/atom-shell --abi=83
node: 14.16.0
electron-rebuild: 3.2.4
electron: 13.1.2 (process.version)
current i am using mac os how to build windows and linux apps
How can I configure and use knex and sqlite in this boilerplate?
It seems we must add an assets folder to the webpack ?
It is trying to find it inside dist folder.
Implementing the tray icon I got the following error.
Uncaught Exception:
TypeError: Error processing argument at index 0, conversion failure from /Users..../dist/assets/icon-dark.png at App.<anonymous>
And then indicates a line in dist/main.js when I add the path to new Tray(
.
I'm trying to incorporate either playwright or puppeteer within my app so that I can use the tool for testing websites I create but I'm having issues. This issue I'm created is related to playwright. I installed playwright using npm i --save-dev playwright
and have included it inside of my main.ts
with:
import playwright, { chromium } from 'playwright';
However, when I try to start the program I get an error message popup and this message:
Error: Cannot find module 'playwright-core'
at webpackMissingModule (...\.webpack\main\index.js:1232:50)
at Object../node_modules/playwright/index.mjs (...\.webpack\main\index.js:1232:140)
at __webpack_require__ (...\.webpack\main\index.js:1275:41)
at ...\.webpack\main\index.js:1345:68
at ...\.webpack\main\index.js:1588:3
at Object.<anonymous> (...\.webpack\main\index.js:1591:12)
at Module._compile (internal/modules/cjs/loader.js:1078:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
at Module.load (internal/modules/cjs/loader.js:935:32)
at Module._load (internal/modules/cjs/loader.js:776:14)
I'm not entirely sure what I'm doing wrong as I'm a little new to using typescript with electron and react. I've done something similar using just react and electron in the past with no issues so I'm a little confused what I'm doing wrong.
Tried to add file to assets and public but it doesn't find it.
The following command does not work correctly in a production environment, as the __dirname variable indicates for the root of the operating system and not for the project entrypoint
if (process.env.NODE_ENV === 'development') {
mainWindow.loadURL('http://localhost:4000')
} else {
mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
})
)
}
so it is not possible to access index.html
is there a simple way to remedy this? I'm working on a script to generate the production build.
how can I get message value to set on react page?, I really tried a lot things, without success
I would like to know your opinion about the possibility of creating a project generator for the boilerplate.
Something like
npx create-electron-ts-react my-app
need add typeRoots
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": [
"dom",
"es2015",
"es2016",
"es2017"
],
"allowJs": true,
"jsx": "react",
"jsxFactory": "React.createElement",
"sourceMap": true,
"outDir": "./dist",
"strict": true ,
"esModuleInterop": true,
"typeRoots": [
"node_modules/@types"
]
},
"exclude": [
"node_modules",
"dist"
]
}``
Oi Diego tudo bem?
Gostei muto do Projeto, Porém como eu faço para configurar o react-router-dom? outra sugestão..
adicionar outro rule para fotos no meu tive que fazer assim {
test: /.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
},
},
],
}
I didn't manage to include fast refresh keeping state through updates inside React yet.
Bom dia Diego, cara eu não sei integrar electron com react de forma simples e então achei esse repositório template que por sinal é massa, parabéns 👍
Porém quando eu penso em fazer um projeto simples sinto que ao usar este template eu estou matando uma formiga com uma bazuca, demora bastante para baixar e atualizar as dependências e não bem isso que eu desejo na maioria dos meus projetos. Quando tiver um tempinho, poderia se possível fazer um template lite APENAS com o necessário para FUNCIONAR, seria bem cansativo a cada projeto pequeno que eu iniciasse tivesse que remover manualmente todas as dependências extras como jest e eslint e todas as configurações relacionadas.
Hello!
I have this problem when I try to import a image:
import React from 'react';
import { FiMenu } from 'react-icons/fi';
import CircleButton from '../CircleButton';
import { Container } from './styles';
import logo from '../../assets/logo.png';
const Menu: React.FC = () => {
return (
<Container>
<header>
<CircleButton
color="#60c3ad"
backgroundColor="#fff"
icon={FiMenu}
type="button"
/>
<img src={logo} alt="" />
</header>
</Container>
);
};
export default Menu;
And it returns:
ERROR in ./src/assets/logo.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./src/components/Menu/index.tsx 6:0-41 15:9-13
@ ./src/App.tsx
i 「wdm」: Failed to compile.
Am I doing something wrong?
Remove eslint-plugin-standard
from package.json as it is deprecated.
Add eslint-plugin-react-hooks
to package.json to add linting support for React Hooks.
Hi,
I am trying to get aws-iot-device-sdk-v2
to work with electron. After I have added the package. Run my code. I get this error.
> [email protected] start:electron /Users/jake/Code/electron/electron-typescript-react
> electron .
App threw an error during load
Error: AWS CRT binary not present in any of the following locations:
/Users/jake/Code/electron/bin/native/aws-crt-nodejs
/Users/jake/Code/electron/bin/darwin-x64/aws-crt-nodejs
at Object../node_modules/aws-crt/dist/native/binding.js (/Users/jake/Code/electron/electron-typescript-react/dist/main.js:1498:11)
at __webpack_require__ (/Users/jake/Code/electron/electron-typescript-react/dist/main.js:20:30)
If I change the electron webpack config to
node: {
__dirname: true
},
App threw an error during load
Error: Cannot find module '/Users/jake/Code/electron/electron-typescript-react/node_modules/
aws-crt/dist/bin/darwin-x64/aws-crt-nodejs'
/Users/jake/Code/electron/electron-typescript-react/node_modules/ aws-crt/dist/bin/darwin-x64/aws-crt-nodejs.node
Is a valid path.
I guess it is something to do with .node
Any ideas?
I have added this to electron-typescript-react/webpack/electron.webpack.js
{
test: /\.node$/,
loader: "node-loader",
},
This makes no difference.
Can you do electron-umi3 version?
After running yarn package
the resulting app returns error renderer_init.js:93 Unable to load <path>/preload.js
However, in development the bridge.ts / preload file loads and can execute node commands without issue.
I poked around with the settings but I have not figured out a solution for this issue.
Link to my code.
https://github.com/dustatron/video-converter
what is the motivation to create this project instead of use electron-react-boilerplate that already has a very large and active community?
So I'm trying to write a test , but the window.Main.exampleMethod() is resulting in an error whereas it isn't for the Greetings component test. Do I need to set something up so that I can use new methods in the bridge file ? Sorry if this is a dumb question.
Thanks
I clone this repo
add two lines code to main.ts
then i run the subject
yarn install
yarn add ffi-napi
yarn start
I get a error
I started looking for a solution, I found some people using this method:
It runs well. but when a yarn package
,
I commit my code to this repo: https://github.com/nanchengjiumeng/justfun
I spent hours trying other things, but nothing worked
How to use SVG or any image file in boilerplate?
Could you add a build npm script?
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.