robinfr/electron-react-typescript

Electron boilerplate with React, Redux, and TypeScript

electron-react-typescript

A Boilerplate for an Easy Start with TypeScript, React, and Electron.

Electron application boilerplate based on React, Redux, and Webpack for rapid application development using TypeScript.

Install

Clone the repository with Git:

git clone --depth=1 [email protected]:Robinfr/electron-react-typescript.git <your-project-name>

And then install the dependencies:

cd <your-project-name>
npm install

Usage

Both processes have to be started simultaneously in different console tabs:

npm run start-renderer-dev
npm run start-main-dev

This will start the application with hot-reload so you can instantly start developing your application.

You can also run do the following to start both in a single process:

npm run start-dev

Packaging

We use Electron builder to build and package the application. By default you can run the following to package for your current platform:

npm run dist

This will create a installer for your platform in the releases folder.

You can make builds for specific platforms (or multiple platforms) by using the options found here. E.g. building for all platforms (Windows, Mac, Linux):

npm run dist -- -mwl

Husky and Prettier

This project comes with both Husky and Prettier setup to ensure a consistent code style.

To change the code style, you can change the configuration in .prettierrc.

In case you want to get rid of this, you can removing the following from package.json:

1. Remove precommit from the scripts section
2. Remove the lint-staged section
3. Remove lint-staged, prettier, eslint-config-prettier, and husky from the devDependencies

Also remove all mentions of Prettier from the extends section in .eslintrc.json.

About this project

This project was set up from scratch but is heavily influenced by the Electron React Boilerplate project and React Redux TypeScript guide.

License

MIT © R. Franken

electron-react-typescript's Issues

I can't open developer tools

I'm on mac.

F12 / Cmd + Option + J neither works.

Make it a template repository

You can enable the flag to set this repository as a template repo. 😃

Error: Exited with code 9

show this Error after the main process loaded when run dev, but everything seem ok

Error: Exited with code 9
at ChildProcess. (/Users/fwk/Documents/_为之/_Electron/_project/yotime_react/dist/main.js:10889:21)
at ChildProcess.emit (events.js:200:13)
at Process.ChildProcess.handle.onexit (internal/child_process.js:272:12)
20:30:36.882 +3s
20:30:36.885 1610195439885 +0ms
20:30:36.887 3000 +2ms
20:30:36.888 +0ms
20:30:36.888 checkDate 1610181220151 timeNow 1610195436885 checkTime 3000 +1ms
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/init.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/common/reset-search-paths.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/common/init.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/common/atom-binding-setup.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/ipc-renderer-internal.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/web-frame-init.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/api/exports/electron.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/common/api/exports/electron.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/common/api/module-list.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/api/module-list.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/ipc-renderer-internal-utils.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/common/error-utils.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/window-setup.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/content-scripts-injector.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/web-view/web-view-init.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/security-warnings.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/api/web-frame.js.map because the client did not send an HTTP accept header.
Not rewriting GET /Users/fwk/Documents/%E4%B8%BA%E4%B9%8B/_Electron/_project/yotime_react/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/common/api/deprecate.js.map because the client did not send an HTTP accept header.
20:30:39.891 +3s

Can't run debugging on VSCode

clone the repository, install all npm packages and run debug with VSCode but received error:
Debugger listening on ws://127.0.0.1:5355/13148d06-242e-470e-9f38-a1eedfa27bde
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Waiting for the debugger to disconnect...
TypeError: Cannot read property 'on' of undefined
at Module../src/main/main.ts (e:\electron-react-typescript\src\main\main.ts:49:5)
at webpack_require (e:\electron-react-typescript\dist\main.js:20:30)
at e:\electron-react-typescript\dist\main.js:84:18
at Object. (e:\electron-react-typescript\dist\main.js:87:10)
at Module._compile (internal/modules/cjs/loader.js:1155:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
at internal/main/run_main_module.js:18:47

Do I need to start-renderer-dev before runnning e2e tests?

If the renderer-dev had not started before the e2e tests, the window wouldn't be rendered.

I'm not sure whether it's related to this part.

electron-react-typescript/src/main/main.ts

Lines 24 to 35 in 6e0012e

	if (process.env.NODE_ENV !== 'production') {
	process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = '1';
	win.loadURL(`http://localhost:2003`);
	} else {
	win.loadURL(
	url.format({
	pathname: path.join(__dirname, 'index.html'),
	protocol: 'file:',
	slashes: true
	})
	);
	}

wait-on for single startup command

npm wait-on library can be used to consolidate startup to one command.

How to debug in VSCode?

The provided launch.json file in .vscode does not seem to actually do anything - just fails quickly at

TypeError: Cannot read property 'on' of undefined

I don't even need to debug the main process, just the renderer, but I can't seem to figure out how to do that, either.

Is there a recommended way, given the webpack configuration, etc. to debug at least the renderer process?

seeing error when running npm run start-main-dev

On Windows 10, I was able to run the app successfully. However, I am seeing the following in the log for the npm run start-main-dev command. Here is the output:

{ Error: spawn C:\Users........\dist\7zip-lite\7z.exe ENOENT
at exports._errnoException (util.js:1050:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:367:16)
at _combinedTickCallback (internal/process/next_tick.js:80:11)
at process._tickCallback (internal/process/next_tick.js:104:9)
code: 'ENOENT',
errno: 'ENOENT',
syscall: 'spawn C:\Users\..........\dist\7zip-lite\7z.exe',
path: 'C:\Users\.............\dist\7zip-lite\7z.exe',
spawnargs:
[ 'x',
'C:\Users\.......\AppData\Roaming\Electron\extensions\lmhkpmbekcpmknklioeibfkpmmfibljd.crx',
'-y',
'-oC:\Users\......\AppData\Roaming\Electron\extensions\lmhkpmbekcpmknklioeibfkpmmfibljd' ] }

Any idea what this is about?

Error: spawn hdiutil ENOENT when building Mac version

npm run dist -- -mwl
Error: spawn hdiutil ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
at onErrorNT (internal/child_process.js:415:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
From previous event:
at _createStageDmg (/home/.../dmg-builder/out/dmg.js:363:26)
at createStageDmg (/home/.../node_modules/dmg-builder/out/dmg.js:351:26)
at /home/.../node_modules/dmg-builder/src/dmg.ts:35:27
at Generator.next (
...

Assets

Whats the best way to use assets in this Template?

Accessing index.html

Is it possible to access the index.html and say, for example, add additional headers or CSS imports directly in the index.html?

node api fails after pack

i am creating a directory within the electron app, which works fine during dev mode. But after packing and trying to mkdir, i'm getting

 Error: EACCES: permission denied, mkdir 

Is it due to webpack config?

Update TypeScript

TypeScript 2.7 has been released so we should update the project to this new release.

White screen after build on Windows

Hello!
I develop in developer mode using

yarn start-dev

but now i want to make .exe on my Windows. I run

yarn dist

open generated program, but it has only white empty screen. My code is here:
https://github.com/Vovamzur/shit-electron-metro-model
Thanks

Compilation error css-loader : Cannot find module 'node-sass'

Hi Robin,

First thank you for your project.

I has downloaded your project then use the commands : npm install then npm run start-dev

I have the follonwing error while compilling :
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/components/Counter.scss Module build failed: Error: Cannot find module 'node-sass' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15) at Function.Module._load (internal/modules/cjs/loader.js:520:25) at Module.require (internal/modules/cjs/loader.js:650:17) at require (internal/modules/cjs/helpers.js:20:18) at Object.<anonymous> (C:\Users\SilverStarPort2\source\repos\Teepa research\ReactTS_Electron_WebSite\node_modules\sass-loader\lib\loader.js:3:14) at Module._compile (internal/modules/cjs/loader.js:702:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10) at Module.load (internal/modules/cjs/loader.js:612:32) at tryModuleLoad (internal/modules/cjs/loader.js:551:12) at Function.Module._load (internal/modules/cjs/loader.js:543:3) at Module.require (internal/modules/cjs/loader.js:650:17) at require (internal/modules/cjs/helpers.js:20:18) at loadLoader (C:\Users\SilverStarPort2\source\repos\Teepa research\ReactTS_Electron_WebSite\node_modules\loader-runner\lib\loadLoader.js:13:17) at iteratePitchingLoaders (C:\Users\SilverStarPort2\source\repos\Teepa research\ReactTS_Electron_WebSite\node_modules\loader-runner\lib\LoaderRunner.js:169:2) at iteratePitchingLoaders (C:\Users\SilverStarPort2\source\repos\Teepa research\ReactTS_Electron_WebSite\node_modules\loader-runner\lib\LoaderRunner.js:165:10) at C:\Users\SilverStarPort2\source\repos\Teepa research\ReactTS_Electron_WebSite\node_modules\loader-runner\lib\LoaderRunner.js:173:18 @ ./src/components/Counter.scss 4:14-125 18:2-22:4 19:20-131 @ ./src/components/Counter.tsx @ ./src/containers/CounterContainer.ts @ ./src/components/Application.tsx @ ./src/app.tsx @ multi (webpack)-dev-server/client?http://localhost:2003 webpack/hot/dev-server react-hot-loader/patch ./src/app.tsx

Can you do something for a newbie like me ?
Your magic debugging spell will be appreciated !

electron-webpack

Take a look at electron-webpack to see what lessons can be learned from that and can be integrated into this project.

HMR not working on "main"?

Is there any easy way to set HMR also on "main" side? because currently it's working only in "renderer" side

libpng

First of all, great project! Saved me lots of time, and seems much better so far than other similar projects I've looked at.

I did, however, run into one minor issue. When running npm run start-dev I received an error that libpng was missing. I fixed it easily with brew install libpng, but you should probably note in the README or something that it is required.

Error: spawn etc\\dist\7zip-lite\7z.exe ENOENT

This boilerplate is really nice and works well but I get this error on starting. Any idea how to fix it?

{ Error: spawn D:\Dev\Programs\manny-the-mod-man\dist\7zip-lite\7z.exe ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:229:19)
    at onErrorNT (internal/child_process.js:406:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)
  errno: 'ENOENT',
  code: 'ENOENT',
  syscall:
   'spawn D:\\Dev\\Programs\\manny-the-mod-man\\dist\\7zip-lite\\7z.exe',
  path:
   'D:\\Dev\\Programs\\manny-the-mod-man\\dist\\7zip-lite\\7z.exe',
  spawnargs:
   [ 'x',
     'C:\\Users\\sparta\\AppData\\Roaming\\Electron\\extensions\\fmkadmapgofadopljbjfkapdkoienihi.crx',
     '-y',
     '-oC:\\Users\\sparta\\AppData\\Roaming\\Electron\\extensions\\fmkadmapgofadopljbjfkapdkoienihi' ] }

HMR not working (for anything)

I cloned this, installed and ran npm run start-dev.

The app fired up, but after making changes it's not Hot Reloading.

Cannot able to import css modules.

I was importing css file in my components. there I am getting this error shown below.

Error
Cannot find module 'renderer/App.module.css' or its corresponding type declarations.ts(2307)

I get the following errors when I run the project after I cloned it

Error: Exited with code 2
at ChildProcess. (C:\Users...\dist\main.js:477:21)
at ChildProcess.emit (events.js:182:13)
at Process.ChildProcess._handle.onexit (internal/child_process.js:237:12)

Cannot able to find index.html. Need to add script tag in it.

I wanted to add one of my math library script in my electron app, for that i need to add the library in script tag, can you guide me how to resolve that issue ?

Using pre-compiled .node modules

Hi,

I'm trying to use iohook with this repository and I'm running into issues. I'm not sure if I should post here or in the iohook repository, or somewhere else. This is the error message I receive:

Error: Cannot find module '/absolute_path_to_project/dist/builds/electron-v64-darwin-x64/build/Release/iohook.node'

I believe my current issue is related to how webpack is set up in this project? However, I'm a novice node developer with this being my first project so I could be wrong.

It seems that for OS X users (I'm on OS X 10.15) iohook comes with pre-built .node modules that will be referenced whenever you import and attempt to use iohook. When using iohook with this project, it will attempt to reference the module here: /absolute_path_to_project/dist/builds/electron-v75-darwin-x64/build/Release/iohook.node.

However, when I check the dist folder, there is no corresponding builds folder. My guess is that something is wrong with webpack and it doesn't properly copy this .node module?

I do see an iohook.node exists at this location: ./node_modules/iohook/builds/electron-v75-darwin-x64/build/Release/iohook.node.

Another theory I have is that somehow, because of how web pack is set up, the app is attempting to look for iohook in an incorrect location? Someone else ran into the same issue I have at the bottom of this issue (wilix-team/iohook#55), however, it is looking for iohook.node at a different location: ./node_modules/iohook/builds/electron-v75-darwin-x64/build/Release/iohook.node

If anyone could provide some guidance on this issue (even if it's just to let me know that this is an incorrect diagnosis) that would be greatly appreciated.

Possibly relevant threads:

• wilix-team/iohook#55
• webpack-contrib/node-loader#12
  • I included this because I added node-loader to my project so it might be related to that

Electron 8 compitable for 'require' no found

Hi, RobinFr:
Great thanks for your boilerplate!
When i update the electron to 8.0.0, i found the render app will report error with "request not found" in webpack-dev-server\client. I google and found there should be a 'nodeIntegration' enabled at createWindow() function:
const createWindow = async () => {
....
win = new BrowserWindow({
width: 800, height: 600,

    // webpack-dev-server\client compatible with 'require'
    webPreferences: {
        nodeIntegration: true
  } 
});

....
}

Best Regards.

Multiple hot-loader recompilation events

On a newly cloned copy, with npm 6.3.0 running npm i && npm run start-dev I get the following behavior:

After a bit the events stop and hot reloading works as normal.

After npm i there are several modifications done to package-lock.json:

Trying to use react-dnd

I've been trying to use react-dnd with this boilerplate and am not having a lot of luck -- I can't get the provider to work

https://react-dnd.github.io/react-dnd/docs/api/dnd-provider

I'm wondering if it has to do with HMR -- I guess I'll try turning that off to reduce the number of moving parts...

my wrap (includes are above)

// this is in app.tsx
// Render components
const render = (Component: () => JSX.Element) => {
    ReactDOM.render(
        <DndProvider backend={HTML5Backend}>
            <AppContainer>
                <ThemeProvider theme={theme}>
                    <Component />
                </ThemeProvider>
            </AppContainer>
        </DndProvider>,
        mainElement
    );
};

their example:

import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

export default class YourApp {
  render() {
    return (
      <DndProvider backend={HTML5Backend}>
        /* Your Drag-and-Drop Application */
      </DndProvider>
    )
  }
}

the error (on a reload)

[HMR] Waiting for update signal from WDS...
DndProvider.js:54 Uncaught TypeError: Object(...) is not a function
    at DndProvider (DndProvider.js:54)
    at renderWithHooks (react-dom.development.js:16240)
    at updateFunctionComponent (react-dom.development.js:18327)
    at updateSimpleMemoComponent (react-dom.development.js:18265)
    at updateMemoComponent (react-dom.development.js:18168)
    at beginWork$1 (react-dom.development.js:20222)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:441)
    at beginWork$$1 (react-dom.development.js:25737)

DndProvider @ DndProvider.js:54
renderWithHooks @ react-dom.development.js:16240
updateFunctionComponent @ react-dom.development.js:18327
updateSimpleMemoComponent @ react-dom.development.js:18265
updateMemoComponent @ react-dom.development.js:18168
beginWork$1 @ react-dom.development.js:20222
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:441
beginWork$$1 @ react-dom.development.js:25737
performUnitOfWork @ react-dom.development.js:24661
workLoopSync @ react-dom.development.js:24637
performSyncWorkOnRoot @ react-dom.development.js:24236
scheduleUpdateOnFiber @ react-dom.development.js:23664
updateContainer @ react-dom.development.js:27060
(anonymous) @ react-dom.development.js:27484
unbatchedUpdates @ react-dom.development.js:24399
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27483
render @ react-dom.development.js:27620
render @ app.tsx:29
./src/renderer/app.tsx @ app.tsx:41
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ app.js:128179
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793

react-dom.development.js:21809 The above error occurred in the <DndProvider> component:
    in DndProvider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.