React-TypeScript-Electron sample with Create React App and Electron Builder
This project was bootstrapped with Create React App with --template typescript
option.
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",