# 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)