• Stars
    star
    447
  • Rank 97,700 (Top 2 %)
  • Language
    TypeScript
  • Created about 5 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React-TypeScript-Electron sample with Create React App and Electron Builder

React-TypeScript-Electron sample with Create React App and Electron Builder

This project was bootstrapped with Create React App with --template typescriptoption.

On the top of it, the following features have been added with relatively small changes:

  • TypeScript supports for Electron main process source code
  • Hot-reload support for Electron app
  • Electron Builder support

Available Scripts in addition to the existing ones

npm run electron:dev

Runs the Electron app in the development mode.

The Electron app will reload if you make edits in the electron directory.
You will also see any lint errors in the console.

npm run electron:build

Builds the Electron app package for production to the dist folder.

Your Electron app is ready to be distributed!

Project directory structure

my-app/
β”œβ”€β”€ package.json
β”‚
## render process
β”œβ”€β”€ tsconfig.json
β”œβ”€β”€ public/
β”œβ”€β”€ src/
β”‚
## main process
β”œβ”€β”€ electron/
β”‚Β Β  β”œβ”€β”€ main.ts
β”‚Β Β  └── tsconfig.json
β”‚
## build output
β”œβ”€β”€ build/
β”‚Β Β  β”œβ”€β”€ index.html
β”‚Β Β  β”œβ”€β”€ static/
β”‚Β Β  β”‚   β”œβ”€β”€ css/
β”‚Β Β  β”‚   └── js/
β”‚Β Β  β”‚
β”‚Β Β  └── electron/
β”‚Β Β  Β Β  └── main.js
β”‚
## distribution packages
└── dist/
 Β Β  β”œβ”€β”€ mac/
 Β Β  β”‚Β Β  └── my-app.app
 Β Β  └── my-app-0.1.0.dmg

Do it yourself from scratch

Generate a React project and install npm dependencies

npx create-react-app my-app --template typescript
cd my-app
yarn add @types/electron-devtools-installer electron-devtools-installer electron-is-dev electron-reload
yarn add -D concurrently electron electron-builder wait-on cross-env

Make Electron main process source file

electron/tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "strict": true,
    "outDir": "../build", // Output transpiled files to build/electron/
    "rootDir": "../",
    "noEmitOnError": true,
    "typeRoots": [
      "node_modules/@types"
    ]
  }
}

electron/main.ts

import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as isDev from 'electron-is-dev';
import installExtension, { REACT_DEVELOPER_TOOLS } from "electron-devtools-installer";

let win: BrowserWindow | null = null;

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  if (isDev) {
    win.loadURL('http://localhost:3000/index.html');
  } else {
    // 'build/index.html'
    win.loadURL(`file://${__dirname}/../index.html`);
  }

  win.on('closed', () => win = null);

  // Hot Reloading
  if (isDev) {
    // 'node_modules/.bin/electronPath'
    require('electron-reload')(__dirname, {
      electron: path.join(__dirname, '..', '..', 'node_modules', '.bin', 'electron'),
      forceHardReset: true,
      hardResetMethod: 'exit'
    });
  }

  // DevTools
  installExtension(REACT_DEVELOPER_TOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));

  if (isDev) {
    win.webContents.openDevTools();
  }
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

Adjust package.json

Add properties for Electron

  "homepage": ".", # see https://create-react-app.dev/docs/deployment#serving-the-same-build-from-different-paths
  "main": "build/electron/main.js",

Add properties for Electron Builder

  "author": "Your Name",
  "description": "React-TypeScript-Electron sample with Create React App and Electron Builder",
  ...
  "build": {
    "extends": null, # see https://github.com/electron-userland/electron-builder/issues/2030#issuecomment-386720420
    "files": [
      "build/**/*"
    ],
    "directories": {
      "buildResources": "assets" # change the resource directory from 'build' to 'assets'
    }
  },

Add scripts

  "scripts": {
    "postinstall": "electron-builder install-app-deps",
    "electron:dev": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://127.0.0.1:3000 && tsc -p electron -w\" \"wait-on http://127.0.0.1:3000 && tsc -p electron && electron .\"",
    "electron:build": "yarn build && tsc -p electron && electron-builder",

Many thanks to the following articles!

More Repositories

1

cpp-httplib

A C++ header-only HTTP/HTTPS server and client library
C++
12,955
star
2

cpp-peglib

A single file C++ header-only PEG (Parsing Expression Grammars) library
C++
893
star
3

maxminddb

Pure Ruby GeoIP2 MaxMind DB reader.
Ruby
298
star
4

cpp-linenoise

A single file multi-platform (Unix, Windows) C++ header-only linenoise-based readline library.
C++
173
star
5

cpp-unicodelib

A C++17 header-only Unicode library. (Unicode 16.0.0)
C++
96
star
6

go-peg

Yet another PEG (Parsing Expression Grammars) parser generator for Go
Go
63
star
7

cpp-mmaplib

A single file C++11 header-only memory mapped file library.
C++
61
star
8

cpp-fstlib

A single file C++17 header-only Minimal Acyclic Subsequential Transducers, or Finite State Transducers
C++
54
star
9

cpp-sqlitelib

C++ SQLite wrapper library
C
51
star
10

cpp-searchlib

A C++17 full-text search engine library
C++
31
star
11

vscode-filtertext

Filter Text extension for VS Code
TypeScript
30
star
12

pl0-jit-compiler

A tiny PL/0 JIT compiler in less than 900 LOC with LLVM and PEG parser.
C++
27
star
13

monkey-cpp

An interpreter for the Monkey programming language written in C++
C++
25
star
14

cpp-zipper

A single file C++ header-only minizip wrapper library
C++
24
star
15

cpp-threadpool

C++11 header-only thread pool library
C++
18
star
16

fizzbuzzlang

A Programming Language just for writing Fizz Buzz program. :)
C++
6
star
17

mtlcpp

Utilities for Metal-cpp
C++
6
star
18

cpp-jsonlib

A C++17 single-file header-only library to wrap RapidJSON SAX interface
C++
6
star
19

culebra

Culebra Programming Language
C++
5
star
20

math-challenge

Mental math training app
Svelte
3
star
21

msl-dot-product-example

MSL Dot Product example
C++
2
star
22

yomi

Chinese Pinyin and Japanese Ruby generator using Kytea
C++
1
star
23

BibleReadingMenulet

Menulet for tracking daily Bible reading
Objective-C
1
star
24

gapi-ez

JavaScript library for easy accessing to the Google APIs Client Library for JavaScript
JavaScript
1
star
25

Undertone

Bible reading progress tracker
JavaScript
1
star
26

dds

PEGとC++11γ§δ½œγ‚‹θ¨€θͺžε‡¦η†η³»
C++
1
star
27

cpp-liblinear

A single file C++ header-only wrapper for LIBLINEAR library
C++
1
star
28

immersion

Distraction free pager on Terminal
C++
1
star