4. The easy way to create a project

- You can create the project more easy than before by using boillerplate.

<Electron app>

npx create-electron-app project-name

<React app>

npx create-react-app project-name

 

 

- This method involves adding Electron to a React project

1. Type command

npx create-react-app project-name

npm start

npm add --dev electron

 

2.Modifying the package.json file

<package.json>

{
  "name": "project-name",
  "version": "0.1.0",
  "private": true,
  "main": "src/main.js",
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "electron": "^28.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron": "electron ."
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

 

3. make the main.js file (through visual code)

code src/main.js

 

<main.js>

const { app, BrowserWindow } = require('electron') 
// include the Node.js 'path' module at the top of your file 
const path = require('path') 
// modify your existing createWindow() function 
function createWindow () { 
  const win = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    webPreferences: { 
      preload: path.join(__dirname, 'preload.js') 
    } 
  }) 
  win.loadURL('http://localhost:3000')
} 
app.whenReady().then(() => { 
  createWindow() 
}) 
app.on('window-all-closed', function () { 
  if (process.platform !== 'darwin') app.quit() 
})

 

4. execute the electron app (On the second Terminal)

npm run electron

Result of executing

5. Finally, compare it with your root directory