The boilerplate typescript template to get started creating Cross-platform Desktop Apps with Electron and React.
Click Use this template to create a new repo and start coding.
Before starting this tutorial, make sure you have the following tools installed on your system:
- Node.js (version 12 or newer)
- npm or yarn (npm is bundled with Node.js, and yarn can be installed separately)
- A code editor (e.g., Visual Studio Code)
Create a new directory for your project and navigate to it in your terminal:
mkdir react-electron-app
cd react-electron-appNext, create the following directories and files to set up the project structure:
mkdir -p src electron public
touch src/App.tsx src/index.tsx electron/main.ts
touch public/index.htmlYour project should now have the following structure:
react-electron-app
├── electron
│ └── main.ts
├── public
│ └── index.html
└── src
├── App.tsx
└── index.tsx
Run the following command in the terminal to initialize the project with a package.json file:
npm init -yInstall the necessary dependencies for the project:
npm install --save react react-dom typescript electron
npm install --save-dev concurrently electron-builder electron-is-dev wait-on cross-envCreate a tsconfig.json file in the root of the project:
touch tsconfig.jsonAdd the following content to the tsconfig.json file:
{
"compilerOptions": {
"target": "ES2023",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}Replace the contents of src/App.tsx with the following code:
function App() {
return (
<div className='App'>
<p>
Hello World!
</p>
</div>
);
}
export default App;Replace the contents of src/index.tsx with the following code:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);Replace the contents of public/index.html with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React-Electron App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>Replace the contents of electron/main.ts with the following code:
import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as isDev from 'electron-is-dev';
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../build/index.html')}`
);
win.webContents.openDevTools();
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});Open your package.json file and update the scripts section to include the following:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"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",
"electron:dist": "yarn build && tsc -p electron && electron-builder --mac --dir"
}These scripts will allow you to run the React app in development mode, build the app for production, and package the Electron app for distribution.
You're now ready to run your React-Electron application in development mode. In the terminal, run:
npm run electron:dev
This command will start the React development server, compile the Electron main process, and launch the Electron app. You should see a new window with your "Hello World!" message displayed.