145 lines
No EOL
3.7 KiB
Markdown
145 lines
No EOL
3.7 KiB
Markdown
# Creating react app to exe file
|
||
|
||
[https://medium.com/@duytq94/bundling-your-react-web-to-a-desktop-app-with-electron-1b19ebcf8933](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://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](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
|
||
|
||
```bash
|
||
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
|
||
|
||
```json
|
||
"name": "chat-desktop-app-demo",
|
||
"version": "1.0.0",
|
||
"author": "duytq94",
|
||
"description": "Chat web app",
|
||
"main": "public/electron.js",
|
||
"homepage": "./",
|
||
```
|
||
|
||
and this too
|
||
|
||
```json
|
||
"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:
|
||
|
||
```json
|
||
"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
|
||
|
||
```jsx
|
||
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*.](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
|
||
|
||
```jsx
|
||
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
|
||
|
||
```json
|
||
"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](https://www.npmjs.com/package/electron-context-menu)
|
||
|
||
use old version like this old
|
||
`npm i electron-context-menu@3.4.0`
|
||
```jsx
|
||
const contextMenu = require("electron-context-menu");
|
||
|
||
contextMenu({
|
||
showSaveImageAs: true,
|
||
});
|
||
```
|
||
|
||
- Tauri
|
||
|
||
[https://www.youtube.com/watch?v=l4Dy5m3MnWk](https://www.youtube.com/watch?v=l4Dy5m3MnWk) |