{"id":21476116,"url":"https://github.com/mehditeymorian/electron-react-template","last_synced_at":"2025-07-15T10:32:02.571Z","repository":{"id":45660892,"uuid":"463516796","full_name":"mehditeymorian/electron-react-template","owner":"mehditeymorian","description":"Electron Integration with React","archived":false,"fork":false,"pushed_at":"2022-02-25T12:23:05.000Z","size":312,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-03-05T16:26:11.370Z","etag":null,"topics":["electron","js","react","sample"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mehditeymorian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-25T12:02:26.000Z","updated_at":"2022-07-15T06:14:44.000Z","dependencies_parsed_at":"2022-07-16T16:30:31.378Z","dependency_job_id":null,"html_url":"https://github.com/mehditeymorian/electron-react-template","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mehditeymorian%2Felectron-react-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mehditeymorian%2Felectron-react-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mehditeymorian%2Felectron-react-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mehditeymorian%2Felectron-react-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mehditeymorian","download_url":"https://codeload.github.com/mehditeymorian/electron-react-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226033272,"owners_count":17563125,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","js","react","sample"],"created_at":"2024-11-23T10:47:18.053Z","updated_at":"2024-11-23T10:47:18.931Z","avatar_url":"https://github.com/mehditeymorian.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Electron React Template\nThis project is the base template for developing Electron applications using React.\n\n# React Scripts\n- react-start\n- react-build\n- react-test\n- react-eject\n\n# Electron Scripts\n- electron-build\n- release\n- build: create an executable version of the application based on your OS.\n- start: use to run a demo\n\n# Reproducce the Template\nFollow steps below in order to reproduce the same template.\n\n1. Create a React App\n```shell\nnpx create-react-app \u003cyour_app_name\u003e --typescript\n```\nNote: Recent version of Electron builder has TS dependency. Hence, Typescript option is required.\n\n2. Installing Dependencies\n```shell\n# yarn\nyarn add cross-env electron-is-dev\nyarn add --dev concurrently electron electron-builder wait-on\n# npm\nnpm install --save cross-env electron-is-dev\nnpm install concurrently electron electron-builder wait-on\n```\n\n3. Create Electron App\nCreate a file named `electron.js` in public folder and paste code below inside the file.\n\n```js\nconst electron = require(\"electron\");\nconst app = electron.app;\nconst BrowserWindow = electron.BrowserWindow;\nconst path = require(\"path\");\nconst isDev = require(\"electron-is-dev\");\n\nlet mainWindow;\n\nfunction createWindow() {\nmainWindow = new BrowserWindow({ width: 900, height: 680 });\n    mainWindow.loadURL(isDev ? \"http://localhost:3000\": \n        `file://${path.join(__dirname, \"../build/index.html\")}`);\n\n    mainWindow.on(\"closed\", () =\u003e (mainWindow = null));\n}\n\napp.on(\"ready\", createWindow);\n\napp.on(\"window-all-closed\", () =\u003e {\n    if (process.platform !== \"darwin\") {\n        app.quit();\n    }\n});\n\napp.on(\"activate\", () =\u003e {\n    if (mainWindow === null) {\n        createWindow();\n    }\n});\n```\n\n4. Update package.json\nAdd following information to `package.json`\n\n```json\n{\n    \"description\": \"\u003cyour project description\u003e\",\n    \"author\": \"\u003cauthor of app\u003e\",\n    \"build\": {\n    \"appId\": \"\u003ccom.your_app\u003e\"\n    },\n    \"main\": \"public/electron.js\",\n    \"homepage\": \"./\",\n    \"scripts\": {\n        \"react-start\": \"react-scripts start\",\n        \"react-build\": \"react-scripts build\",\n        \"react-test\": \"react-scripts test --env=jsdom\",\n        \"react-eject\": \"react-scripts eject\",\n        \"electron-build\": \"electron-builder\",\n        \"release\": \"npm run build \u0026\u0026 electron-builder --linux --win --mac --x64 --ia32 --publish never\",\n        \"build\": \"npm run react-build \u0026\u0026 npm run electron-build\",\n        \"start\": \"concurrently \\\"cross-env BROWSER=none yarn react-start\\\" \\\"wait-on http://localhost:3000 \u0026\u0026 electron .\\\"\"\n  },\n}\n```\n\n5. Run the Project\n\n```shell\n#  ==== Runing ====\n# yarn\nyarn start\n#npm\nnpm run start\n\n# ==== Building ====\n# yarn\nyarn build\n# build\nnpm run build\n```\n\n\n# Acknowledgement\nThis template and the reproduction manual were taken from [Devesu](https://medium.com/@devesu) article on Medium. [Link to Article](https://medium.com/@devesu/how-to-build-a-react-based-electron-app-d0f27413f17f)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmehditeymorian%2Felectron-react-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmehditeymorian%2Felectron-react-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmehditeymorian%2Felectron-react-template/lists"}