skellock / typescript-with-electron-react-kit

Don't just start your Electron app... TWERKit.

typescript-with-electron-react-kit

This is a TypeScript and React starter kit for building Electron apps.

Check out the docs for some of the choices and motivations.

Example

You have to bring your own awesome. But here's a picture* after npm i and npm start and npm storybook...

* What it looks like moments before you hit the delete button to nuke all the staged features..

Out of the Box

Electron Features 💫

• ability to build all 3 platforms on your mac
• auto-update your apps!
• a simple library for css styling
• fast & fluid animation engine
• fantastic keyboard support
• save window position between launches
• persist application data as JSON
• sane styling defaults on windows, mac, and linux

Devs Like Nice Things Too 🔨

• super-fast hot reloading 🔥
• lean production bundles
• integrated storybook support
• unit tests with mocking
• storybook snapshot testing
• code linting & formatting

Documentation & Samples 🖨

• how to quickly jettison parts you don't want
• why we chose the stack we did
• how to structure your electron app
• a simple & co-located approach to building your components

Not Included 💣

• lock in... keep what works for you, ditch the rest
• state management... mobx? / redux? ... both awesome. both excluded.
• a component toolkit

License 🎤

You down with MIT?

Contributors

@skellock

@rmevans9

@firede

typescript-with-electron-react-kit's Issues

Jest fails when running on Windows due to path separator difference

FAIL src\main-window\load-url.test.ts
  ● loads from electron

    expect(jest.fn()).toBeCalledWith(expected)

    Expected mock function to have been called with:
      "file:///a/out/index.html" as argument 1, but it was called with "file:///a\\out\\index.html".

      10 |   const loadStub = jest.fn()
      11 |   loadURL({ loadURL: loadStub } as any, "a", false)
    > 12 |   expect(loadStub).toBeCalledWith("file:///a/out/index.html")
      13 | })
      14 |

      at Object.<anonymous>.test (src/main-window/load-url.test.ts:12:20)

This is the error message. The difference between /s and \s is mostly an OS choice thing (and I cannot fathom why Windows ever decided to go with \s) but it does cause an error.

Look into fusebox TypeScriptCompiler option?

https://github.com/fuse-box/react-example/blob/master/fuse.js#L21

Wut? Should we look into this? Maybe it would help us in some way. ¯\_(ツ)_/¯

Links to our dependencies

On docs/stack.md, it'd be nice to have links to the github repos of those packages too.

NODE_ENV is not set in fusebox

This causes the production minified version of react to be bundled in dev mode which can make debugging hard.

.plugin(EnvPlugin({ NODE_ENV: isProduction ? 'production' : 'development' }))

Needs to be a thing.

Code coverage report

I'd like to use nyc in html-mode to get the code coverage reports.

Here is an example

Also need to add coverage and .nyc_output to the .gitignore.

Script keys aren’t defined for running in “watch” mode

Hi,

First, thank you for this. It’s so wonderful.

Second, how can I run my app in “watch” mode (where presumably the tool watches my files for changes and recompiles on the fly)?

The documentation says:

# in terminal 1:
npm run watch:compile

# in terminal 2:
npm run watch:tests

But those script keys aren’t defined in your example package.json:

typescript-with-electron-react-kit/package.json

Lines 50 to 69 in 0acff6b

	"scripts": {
	"build-storybook": "build-storybook",
	"clean": "rm -rf .fusebox out dist coverage",
	"compile": "NODE_ENV=production ts-node fuse",
	"coverage:upload": "cat ./coverage/lcov.info | coveralls",
	"coverage": "yarn test --coverage --no-cache",
	"dist": "electron-builder --mac --win --linux --ia32 --x64",
	"draft": "electron-builder -p always --draft --mac --win --linux --ia32 --x64",
	"format": "prettier --write **/*.ts && tslint -p . --fix",
	"lint": "tslint --project .",
	"pack": "electron-builder --dir",
	"postinstall": "electron-builder install-app-deps",
	"precommit": "lint-staged",
	"prepush": "npm-run-all typecheck lint",
	"sanity": "npm-run-all clean typecheck lint test clean compile clean",
	"start": "ts-node fuse",
	"storybook": "start-storybook -p 6006",
	"test": "jest",
	"typecheck": "tsc -p . --noEmit --pretty"
	},

Write tests in TS

#22 brought us tests, but they're in JS.

I'd like them to be in TS, but not at the cost of complexity.

Script "clean" fails on windows

The rm command line utility does not exist on Windows, so all scripts that require "clean" fail on Windows.

Log file isn't created

This is strange. The ~/.config/electron-starter/log.log file isn't created on linux. But the other files are.

Hrm...

CodeCov

Let's get hooked up on CodeCov.

Run tests thru babel when babel 7 arrives

When babel 7 arrives, we'll be able to switch over to that toolchain and use ava a little nicer.

Currently we're compiling all ts to js and running ava from there. babel 7 will have support for typescript. 🎉

Dev Port not being released?

Each time I close the application window, I cannot relaunch (using npm start), as I get this error:

Error: listen EADDRINUSE 0.0.0.0:4925
at Object.exports._errnoException (util.js:1020:11)
at exports._exceptionWithHostPort (util.js:1043:20)
at Server._listen2 (net.js:1262:14)
at listen (net.js:1298:10)
at net.js:1408:9
at _combinedTickCallback (internal/process/next_tick.js:83:11)
at process._tickDomainCallback (internal/process/next_tick.js:128:9)

I can launch again by changing the port number in fuse.ts, but it's not convenient to change this every time I need to close and re-open the window while testing.

I also notice that everything you build is VERY mac-exclusive (I am developing on a Windows 10 machine), including the scripts in the package.json file - perhaps this error I'm getting is somehow caused by some unix command instead of a win32 command?

Any clues?

Add storybook to the documentation

We should add another entry in docs/stack.md for the libraries we just brought in for storybook.

And some helpful details about running in storybook mode in docs/usage.md.

Multiple drafts

When running npm run draft, multiple drafts are being created. This happened for 0.7 and 0.8, and I'm not sure why.

Make a real example

Something we can point people to that uses this.

Something real.

And super small. Like tic-tac-toe or a small little remote API viewer.

I have a few projects under way, but nothing close.

Add bullet points of features on the README

Example not working on MacOS Sierra

Hi,

I cloned the repo as instructed than ran npm install and npm start, the app starts, but is doesn't render anything.

No errors are logged on console, I don't know where to start to debug this, any hint appreciated.

Window dragging doesn't work on linux & windows

This may be working as intended, but the WebkitAppRegion: 'drag' css class doesn't seem to work on linux and windows.

Would be nice to know why or how to fix?

electron-updater marked as deprecated

@rmevans9 was mentioning that electron-updater is now deprecated. This is coming in from electron-builder.

Let's find out the scoop before shipping 1.0.

Debug the main process using VSCode

Hi,

Can you please help me setup VSCode to be able to debug the main electron process?
I'm pretty new to electron/node applications.

I noticed that fusebox is doing some magic there, and it's starting the electron app.

Thank you.

Fix source maps in tests

They don't seem to be picking up the ts code. just the js code. Which is really distracting when seeing the async-based callstacks.

HMR tries to connect & React errors in production build

Hi,

When opening the dev console in the production build:
Connecting to fusebox HMR at ws://localhost:7992

This subsequently refuses to connect, and keeps trying again ad infinitum, filling up the developer console.

I also get all the Recat errors and warnings in the console.

Within the main process (using electron-is-dev) returns the correct boolean value.

The only change I've made to thefuse.ts file are:

const isProduction = !!(process.env.NODE_ENV === 'production'); // sometimes was 'undefined'
...
const rendererBundle = fuse
    .bundle('renderer')
    .instructions('> [renderer/index.tsx] +fuse-box-css')
    .plugin(CSSPlugin())
    .plugin(CopyPlugin({ useDefault: false, files: ASSETS, dest: 'assets', resolve: 'assets/' }))
    .plugin(EnvPlugin({ NODE_ENV: isProduction ? "production" : "development" }));

I normally use Webpack, not Fuse, so I'm not as familiar with how things are done in fuse. Any ideas on why this is happening?

Ejection script

We don't need to have this read for 1.0... but

npm run eject?

It'll prompt you to replace parts of the app.

• package.json (author, build.appId, build.productName, build.publish, description, name, repository, version)
• readme.md
• docs sub-directory
• the irrelevant app parts like src/renderer/app/example-using-tabs and src/shared/models

For now, maybe we can just reference more of these things in here:

https://github.com/skellock/electron-starter/blob/master/docs/using.md#start-your-own-project

node-modules CSS files

Im tring to use react-select component. This component uses its own css
recommended way to use this component is

import Select from 'react-select';                   
import "react-select/dist/react-select.css";         

Bu I got error

XXX/node_modules\react-select\dist\react-select.css:8 Uncaught SyntaxError: Unexpected token .
    at createScript (vm.js:53)
    at Object.runInThisContext (vm.js:95)
    at Module._compile (module.js:543)
    at Object.Module._extensions..js (module.js:580)
    at Module.load (module.js:488)
    at tryModuleLoad (module.js:447)
    at Function.Module._load (module.js:439)
    at Module.require (module.js:498)
    at require (internal/module.js:20)
    at u (app.tsx:26)

I believe it is caused by .instructions('> [index.tsx] + fuse-box-css')
So external css files missed to CSSPlugin and imported as Javascript files
May be we have to create css-bundle for such files?

Add storybook support

Give it a quick shot, and run it by @rmevans9. He's knows his shit.

OMG! I am writing one of these sort of

Hey!

Just fired up my first real electron project a couple of days ago, isn't it cool? I'm making an admin app to replace a poc that I wrote in rails some time back.

I based my app on create-react-app plus some other stuff that I happen to be using right now. I'm hoping to be able to extract what I am using into some sort of ignite-related-boilerplate thing

Wanna talk?

Take out state management

Oddly a polarizing decision... but for 1.0. Let's ship without mobx and any other state management.

Add storyshots

I took a run at getting this integrated, but I failed.

@rmevans9 does anything obvious pop out here on the storyshots branch?

What's happening is it doesn't seem to be loading webpack.config.js when running in jest mode.

When i run the test it gives me:

Unexpected character '�' (1:0)
      > 1 | ����JFIFHH��@ExifMM�i�,����8Photoshop 3.08BIM8BIM%��ُ��	���B~��,"��
          | ^
        2 |
            ���}!1AQa"q2��#B��R��$3br�
        3 | %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������
        4 |
            ���w!1AQaq"2B����	#3R�br�

It looks like it's tripping up on the const dogImage = require('./fun-dog.jpg') line. That strikes me as a webpack loader not loading the image.

I tried to bring in url-loader and file-loader to fix it, but didn't seem to work. It only broke storybook as it currently works in the app.

I then realized that, in jest mode, it's not even loading that webpack config. You can verify by putting a syntax error in that file.

I went looking in @storybook/addon-storyshots, but there's literally no files to debug in there. ha!

We're using fuse-box to bundle, but that doesn't seem to bother storybook?

I'm probably doing something stupid, but I've burned more hours than I'm prepared to admit.

=)

Any insights?

Update README.md graphic

Let's show the gif that has storybook inline. That's pretty neat.

Show error message when unable to switch to storybook

In dev mode, when you try to switch to storybook inside the electron app, the screen just goes blank if npm run storybook isn't running.

It'd be nicer to say that instead.

Spin up CI

To run automated tests. Circle CI? I've only used Semaphore before. I like it good enough.

I don't really have a strong opinion either way.

Unexpected token import

when calling npm test i got this error:

 FAIL  test\storyshots.test.ts
  ● Test suite failed to run

    C:\projects\easy-runner\node_modules\lodash-es\flattenDeep.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import baseFlatten from './_baseFlatten.js';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (node_modules/@storybook/react/dist/client/preview/element_check.js:16:20)
      at Object.<anonymous> (node_modules/@storybook/react/dist/client/preview/render.js:31:22)

any idea why is this happening?

PS: also got test fail for "loads from electron" in "src\main\main-window\load-url.test.ts" but that can be fixed by using posix version of path.join

PS>check-node-version --print
node: 9.3.0
npm: 5.6.0
yarn: 1.3.2

PS> systeminfo | findstr /C:"OS"
OS Name:                   Microsoft Windows 10 Home
OS Version:                10.0.15063 N/A Build 15063
OS Manufacturer:           Microsoft Corporation
OS Configuration:          Standalone Workstation
OS Build Type:             Multiprocessor Free
BIOS Version:              American Megatrends Inc. 1708, 10.04.2013

Confirm about platform independent builds

I know that on a mac, you can cut production builds for linux & windows.

@rmevans9 wants to know... can you do the same on Windows & Linux too?