diego3g/electron-typescript-react

:electron: An Electron boilerplate including TypeScript, React, Jest and ESLint.

Diego Fernandes

CTO @Rocketseat.

Enthusiast of the best web & mobile development technologies.

Passionate about education and changing people's lives through programming. More than 200,000 people have already undergone one of my trainings.

"Nothing in this world beats good old persistence. Talent does not surpass. Nothing more common than talented failures. Genius does not overcome. Unrecognized geniuses is practically a cliche. Education does not exceed. The world is full of educated fools. Persistence and determination alone are powerful."

electron-typescript-react's Issues

how to add source in head tag?

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"
    />

template-lite

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.

Remove eslint-plugin-standard, add eslint-plugin-react-hooks

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.

problem of tsconfig

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"
  ]
}``

sugestão,no Readme deixar disponível as dependências

` ## Electron + TypeScript + React
Boilerplate for a project using Electron, React and Typescript

Installation

Use a package manager of your choice (npm, yarn, etc.) in order to install all dependencies

npm install

yarn install

Usage

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

Packaging

To generate a project package run package

npm run package

Contributing

Pull requests are always welcome 😃.

License

MIT `

doubts - usability and roadmap

what is the motivation to create this project instead of use electron-react-boilerplate that already has a very large and active community?

• is ready to use in production?
• the roadmap is public?

Create a project generator for the boilerplate

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

can't use package "ffi-napi"

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

testing set up

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

Cannot use tesseract from both main process and renderer

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.

child_process issue in packaged output

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 ?

How can i make the application's build

Include assets folder to webpack ?

It seems we must add an assets folder to the webpack ?
It is trying to find it inside dist folder.

Error

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(.

Is it possible to disable the node Integration option to use this boilerplate?

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?

react-router-dom

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,
},
},
],
}

npm run package

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

Use SVG

How to use SVG or any image file in boilerplate?

Static images

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.

rs does not restart the main process

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?

unable to make distribution for windows and linux

current i am using mac os how to build windows and linux apps

There is no build command?

Could you add a build npm script?

How to change widow to title?

even after changing in index.html , window title is not changing, it is showing as webpack App ?

Image import error

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?

Cannot find module './build/release/robotjs.node' election

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)

get message value

how can I get message value to set on react page?, I really tried a lot things, without success

How to reference image?

Tried to add file to assets and public but it doesn't find it.

Error: Cannot find module 'lodash.camelcase'

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)

Routing Configuration problems

When configuring the routing, can not switch very well, who has the routing configuration, grateful

import 'style.css' doesnt work

__dirname in electron/main.ts references the root of the operating system

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.

Dependency typing

Using @unform/web and @unform/core with the boilerplate is not working

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 ?

Issues with Webpack

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.

Sqlite and knex usage

How can I configure and use knex and sqlite in this boilerplate?

a suggestion for "require is not defind"

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

A sample:

1. download the package

2. yarn add exceljs

3. use exceljs in App.tsx like

+ import Excel from 'exceljs'

export function App() {
+  const workbook = new Excel.Workbook()

4. yarn start, then it's broken
5. change your rules.webpack.js and restart, back to normal.

Packaged app can't find preload.js

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

Serious vulnerability with nodeIntegration: true in main.ts

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

Add fast refresh (hot reload)

I didn't manage to include fast refresh keeping state through updates inside React yet.

getting white screen after opening app.exe.

everything is working fine in development mode.
but when I try to open the installer, I m getting a white screen,

I did yarn run package for generating app installer,

Error: AWS CRT binary not present in any of the following locations

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?

Can you do electron-umi3 version?

Add docs

• Better docs structure;
• How to add icons;
• CI;
• Tray;
• Shortcuts;