مشكلة تطبيق الكترون مع رياكت

المشكلة بسبب أنك تحاول الوصول إلى ملف index.html في مجلد build الموجود بداخل مجلد manager من خلال electron.

وهذا الملف غير موجود حيث يجب تنفيذ أمر build لإنشاء ملفات build بعد تحزيمها في manager .

ولكن ستواجهك مشكلة أخرى بسبب المسارات حيث مشروع electron خارج المجلد manager ولهذا المسارات النسبية لن تعمل بشكل صحيح.

ولحل تلك المشكلة في ملف manager\package.json يرجى إضافة السطر التالي :

  "homepage":"./",

ليصبح الملف كالتالي :

{
  "name": "manager",
  "version": "0.1.0",
  "private": true,
  "homepage":"./",
  "dependencies": {
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.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"
  },
  "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"
    ]
  }
}

الآن يرجى تنفيذ أمر build في مجلد electron من خلال الأمر :

npm run build

الآن يمكنك تشغيل electron أو react أيهما تريد وسيعملان معك.

عند تشغيل التطبيق يظهر خطأ 

Not allowed to load local resource: file:///C:/Users/dido4/Desktop/manager-app/manager/build/index.html

وذلك بسبب الكود التالي في ملف main.js

  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:3000');
    win.webContents.openDevTools();
  } else {
    // في وضع الإنتاج، حمّل ملف index.html المبني من React
    win.loadFile(path.join(__dirname, 'manager', 'build', 'index.html'));
  }

تحتاج إلى إنشاء ملف  تعيين وضع development من خلال تعديل سكريبت التشغيل إلى التالي:

  "scripts": {
    "start-electron": "cross-env NODE_ENV=development electron .",
    "start": "concurrently -n \"REACT,ELECTRON\" \"npm run start-react\" \"npx wait-on http://localhost:3000 &&  npm run start-electron \"",
    "build": "cd manager && npm run build",
    "start-react": "cd manager && npm start"
  },

ثم تثبيت الحزم:

npm install --save-dev concurrently wait-on cross-env

ثم تشغيل المشروع من خلال npm start