I already read ups and downs of this question in everywhere you can find and my problem still persists.
I have no problem during development and my app runs fine with npm start command in VSCode. when I try to build the app the proccess of build is fine and finishes with no errors but when I try to run the app frim dist folder it runs with a blank white screen and no errors or warnings in console.
this is my package.json

{
  "productName": "SSP Price Checker",
  "description": "Utility app to calculate upgrade and price of holoo products by software codes, add or remove modules and maintenances. Developed by Omid Azad in SSP Co.",
  "homepage": "./",
  "author": "DevOm",
  "main": "src/start.js",
  "name": "frontend",
  "version": "2.0.0",
  "private": false,
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@majidh1/jalalidatepicker": "^0.9.4",
    "@mui/icons-material": "^5.15.16",
    "@mui/material": "^5.15.16",
    "@mui/styled-engine-sc": "^6.0.0-alpha.18",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.34.1",
    "foreman": "^3.0.1",
    "formik": "^2.4.6",
    "jalaali-react-date-picker": "^1.0.17",
    "moment": "^2.30.1",
    "moment-jalaali": "^0.10.0",
    "path-browserify": "^1.0.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "styled-components": "^6.1.9",
    "stylis": "^4.3.2",
    "stylis-plugin-rtl": "^2.1.1",
    "web-vitals": "^2.1.4",
    "yup": "^1.4.0"
  },
  "scripts": {
    "start": "nf start -p 3000",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "electron-start": "node src/start-react",
    "react-start": "set BROWSER=none && react-scripts start",
    "pack": "build --dir",
    "dist": "npm run build && build",
    "postinstall": "install-app-deps",
    "build-installer": "electron-builder"
  },
  "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"
    ]
  },
  "devDependencies": {
    "electron": "^30.0.1",
    "electron-builder": "^24.13.3",
    "electron-is-dev": "^3.0.1"
  },
  "files": ["build", "*.js", "node_modules", "package.json","index.html", "package-lock.json", "public/**/*"],
  "build": {
    "appId": "SSP Price Checker",
    "extends": null,
    "win": {
      "target": [
        "nsis"
      ],
      "icon":"./src/assets/icon/favicon.ico"
    },
    "nsis": {
      "uninstallDisplayName": "SSP Price Checker",
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  }
}

this is my start.js

const { app, BrowserWindow } = require('electron')
const { ipcMain } = require('electron')
const { protocol } = require('electron');

const path = require('path')
const url = require('url');


let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({
        // width: 1545,
        // height: 896,
        width: 1035,
        height: 900,
        webPreferences: {
            sandbox: false,
            nodeIntegration: true,
            enableRemoteModule: true,
            contextIsolation: false,
            webSecurity: false
        },
        resizable: false
    });

    mainWindow.setMenuBarVisibility(false)
    mainWindow.webContents.openDevTools()
    

    mainWindow.loadURL(
        process.env.ELECTRON_START_URL ||
        url.format({
            pathname: path.join(__dirname, "../public/index.html"),
            protocol: 'file:',
            slashes: true
        })
    )

    mainWindow.on('closed', () => {
        mainWindow = null
    })

}

app.on('ready', createWindow)

ipcMain.on('bye', () => {
    app.quit()
})

ipcMain.on('reset', () => {
    app.relaunch();
    app.quit();
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow()
    }
})

and this is my App.js (I didn’t use Router, so no HashRout suggestion)

import { Box, Button, CssBaseline, Stack, ThemeProvider, Typography } from '@mui/material';
import './App.css';
import EntrySection from './pages/EntrySection';
import DiscountSection from './pages/Discount';
import ButtonsSection from './pages/Buttons';
import Navbar from './pages/Navbar'
import theme from './theme';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import { prefixer } from 'stylis';
import rtlPlugin from 'stylis-plugin-rtl';
import MenuDrawer from './dialogs/MenuDrawer';
import { useState } from 'react';
import ResultsSection from './pages/result';

const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [prefixer, rtlPlugin],
});



function App() {

  return (
    <CacheProvider value={cacheRtl}>

      <ThemeProvider theme={theme}>
        <CssBaseline />

        <div className='App' >
          <Navbar />

          <Box sx={{ display: 'flex', flexDirection: 'row' }} >
            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
              <ResultsSection />
              <ButtonsSection />
            </Box>


            <Box sx={{ display: 'flex', flexDirection: 'row' }}>
              <DiscountSection />
              <EntrySection />
            </Box>




          </Box>

        </div>
      </ThemeProvider>
    </CacheProvider >
  )
}

export default App;

this is also start-react.js

const net = require('net')
const childProcess = require('child_process')

const port = process.env.PORT ? process.env.PORT - 100 : 3000

process.env.ELECTRON_START_URL = `http://localhost:${port}`

const client = new net.Socket()

let startedElectron = false
const tryConnection = () => {
    client.connect({ port }, () => {
        client.end()
        if (!startedElectron) {
            console.log('starting electron')
            startedElectron = true
            const exec = childProcess.exec
            exec('npm run electron')
        }
    })
}

tryConnection()

client.on('error', () => {
    setTimeout(tryConnection, 1000)
})

and here is a file I made it from toutorials from youtube(I don’t know why)

react: npm run react-start
electron: npm run electron-start

also here is my project structure

.
└── frontend/
    ├── node_modules
    ├── public/
    │   └── index.html
    ├── src/
    │   ├── assets
    │   ├── context
    │   ├── dialogs
    │   ├── help pages
    │   ├── pages
    │   ├── validation
    │   ├── App.css
    │   ├── App.js
    │   ├── App.test.js
    │   ├── index.css
    │   ├── index.js
    │   ├── logo.svg
    │   ├── setupTest.js
    │   ├── start-react.js
    │   ├── start.js
    │   └── theme.js
    ├── license.txt
    ├── package-lock.json
    ├── package.json
    ├── Procfile
    └── README.md

here is the sources and network tab I opened from devtool
enter image description here
enter image description here

as you can see there is no index.html in sources and there is also no request for it in network tab.

I also have another problem which would be great if anyone can help me for that and thats the license.txt file which is in persian that I saved it with UTF-8 and after build the nsis it doesn’t differ which I made the installation wizard with electron builder or inno setup. the text in license agreement section is scrambled and not readable.

I already struggled with loadURL methode in start.js path definition for index.html that I think it’s correct for now. I added webSecurity: false to new BrowserWindow method to solve the loading problem of local files which I had an eror in console for loading index.html.
I also added files option to build in package.json and also adde "extends": null
I deleted buildResources to see if it make any changes to built app which did not. and now I’m at this point.
every pages and answers refer to path of index.html in start.js. but its freaking right. what else should I do?