3.7 KiB
Creating react app to exe file
https://medium.com/@duytq94/bundling-your-react-web-to-a-desktop-app-with-electron-1b19ebcf8933
https://stackoverflow.com/questions/57531216/can-i-create-a-windows-exe-from-a-react-project
https://livebook.manning.com/book/cross-platform-desktop-applications/chapter-7/25
In a react project
npm i electron-is-dev
electron-is-dev let you know which environment is running.
Second, run this command to install these packages at devDependencies
npm i -D concurrently electron electron-builder wait-on cross-env
concurrently and wait-on: force waiting until server started then open Electron window.
electron-builder: distributing Electron app.
Add these
"name": "chat-desktop-app-demo",
"version": "1.0.0",
"author": "duytq94",
"description": "Chat web app",
"main": "public/electron.js",
"homepage": "./",
and this too
"build": {
"appId": "com.loyno-mathcs.harsh.weatherstation.wotdevice",
"files": [
"build/**/*",
"node_modules/**/*"
],
"win": {
"icon": "./public/icon.png"
},
"directories": {
"buildResources": "assets"
}
},
Also add these under scripts:
"electron-dev": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "electron-builder -c.extraMetadata.main=build/electron.js",
"preelectron-pack": "react-scripts build"
3. Config Electron
Create a file name electron.js and put into public folder
const electron = require('electron');
const { app, BrowserWindow } = electron;
const path = require('path');
const isDev = require('electron-is-dev');
let mainWindow = null;
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
});
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
});
function createWindow() {
mainWindow = new BrowserWindow({
width: 1024,
height: 1024,
title: "Chat desktop app demo"
});
mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
mainWindow.on('closed', function () {
mainWindow = null
})
mainWindow.on('page-title-updated', function (e) {
e.preventDefault()
});
}
In development mode, the code quite simple, it creates a window and load the content from *http://localhost:3000*. That’s it.
title will be same as in title tag
name of app is configured with value of name key in package.json.
for configuring icon in development mode
mainWindow = new BrowserWindow({
width: 1024,
height: 1024,
title: "Chat desktop app demo", //to override title tag
icon: './public/icon.ico',
});
For icon in production mode(exe form)
add this under build
"win": {
"icon": "./public/icon.png"
},
and this icon must be greater or equal to 256x256.
For adding menu when right clicked
https://www.npmjs.com/package/electron-context-menu
use old version like this old
npm i electron-context-menu@3.4.0
const contextMenu = require("electron-context-menu");
contextMenu({
showSaveImageAs: true,
});