{"id":17549175,"url":"https://github.com/yhirose/react-typescript-electron-sample-with-create-react-app-and-electron-builder","last_synced_at":"2025-05-15T16:08:53.254Z","repository":{"id":36617334,"uuid":"210184151","full_name":"yhirose/react-typescript-electron-sample-with-create-react-app-and-electron-builder","owner":"yhirose","description":"React-TypeScript-Electron sample with Create React App and Electron Builder","archived":false,"fork":false,"pushed_at":"2024-12-10T21:06:08.000Z","size":4677,"stargazers_count":467,"open_issues_count":2,"forks_count":96,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-31T21:45:59.472Z","etag":null,"topics":["create-react-app","electron","electron-builder","hot-reload","react","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/yhirose.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-22T17:06:33.000Z","updated_at":"2025-03-30T18:18:05.000Z","dependencies_parsed_at":"2024-06-17T13:52:28.713Z","dependency_job_id":"18804243-24ab-4c2f-bc01-92db8794f0b5","html_url":"https://github.com/yhirose/react-typescript-electron-sample-with-create-react-app-and-electron-builder","commit_stats":{"total_commits":91,"total_committers":8,"mean_commits":11.375,"dds":"0.41758241758241754","last_synced_commit":"d9f2135112de368f86ccf94157c1b5e34df91045"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhirose%2Freact-typescript-electron-sample-with-create-react-app-and-electron-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhirose%2Freact-typescript-electron-sample-with-create-react-app-and-electron-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhirose%2Freact-typescript-electron-sample-with-create-react-app-and-electron-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhirose%2Freact-typescript-electron-sample-with-create-react-app-and-electron-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yhirose","download_url":"https://codeload.github.com/yhirose/react-typescript-electron-sample-with-create-react-app-and-electron-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247737769,"owners_count":20987718,"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":["create-react-app","electron","electron-builder","hot-reload","react","typescript"],"created_at":"2024-10-21T02:50:03.526Z","updated_at":"2025-04-07T22:06:39.167Z","avatar_url":"https://github.com/yhirose.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"React-TypeScript-Electron sample with Create React App and Electron Builder\n===========================================================================\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) with `--template typescript`option.\n\nOn the top of it, the following features have been added with relatively small changes:\n\n* TypeScript supports for Electron main process source code\n* Hot-reload support for Electron app\n* Electron Builder support\n\n## Available Scripts in addition to the existing ones\n\n### `npm run electron:dev`\n\nRuns the Electron app in the development mode.\n\nThe Electron app will reload if you make edits in the `electron` directory.\u003cbr\u003e\nYou will also see any lint errors in the console.\n\n### `npm run electron:build`\n\nBuilds the Electron app package for production to the `dist` folder.\n\nYour Electron app is ready to be distributed!\n\n## Project directory structure\n\n```bash\nmy-app/\n├── package.json\n│\n## render process\n├── tsconfig.json\n├── public/\n├── src/\n│\n## main process\n├── electron/\n│   ├── main.ts\n│   └── tsconfig.json\n│\n## build output\n├── build/\n│   ├── index.html\n│   ├── static/\n│   │   ├── css/\n│   │   └── js/\n│   │\n│   └── electron/\n│      └── main.js\n│\n## distribution packages\n└── dist/\n    ├── mac/\n    │   └── my-app.app\n    └── my-app-0.1.0.dmg\n```\n\n## Do it yourself from scratch\n\n### Generate a React project and install npm dependencies\n\n```bash\nnpx create-react-app my-app --template typescript\ncd my-app\nyarn add @types/electron-devtools-installer electron-devtools-installer electron-is-dev electron-reload\nyarn add -D concurrently electron electron-builder wait-on cross-env\n```\n\n### Make Electron main process source file\n\n#### electron/tsconfig.json\n\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"module\": \"commonjs\",\n    \"sourceMap\": true,\n    \"strict\": true,\n    \"outDir\": \"../build\", // Output transpiled files to build/electron/\n    \"rootDir\": \"../\",\n    \"noEmitOnError\": true,\n    \"typeRoots\": [\n      \"node_modules/@types\"\n    ]\n  }\n}\n```\n\n#### electron/main.ts\n\n```ts\nimport { app, BrowserWindow } from 'electron';\nimport * as path from 'path';\nimport * as isDev from 'electron-is-dev';\nimport installExtension, { REACT_DEVELOPER_TOOLS } from \"electron-devtools-installer\";\n\nlet win: BrowserWindow | null = null;\n\nfunction createWindow() {\n  win = new BrowserWindow({\n    width: 800,\n    height: 600,\n    webPreferences: {\n      nodeIntegration: true\n    }\n  })\n\n  if (isDev) {\n    win.loadURL('http://localhost:3000/index.html');\n  } else {\n    // 'build/index.html'\n    win.loadURL(`file://${__dirname}/../index.html`);\n  }\n\n  win.on('closed', () =\u003e win = null);\n\n  // Hot Reloading\n  if (isDev) {\n    // 'node_modules/.bin/electronPath'\n    require('electron-reload')(__dirname, {\n      electron: path.join(__dirname, '..', '..', 'node_modules', '.bin', 'electron'),\n      forceHardReset: true,\n      hardResetMethod: 'exit'\n    });\n  }\n\n  // DevTools\n  installExtension(REACT_DEVELOPER_TOOLS)\n    .then((name) =\u003e console.log(`Added Extension:  ${name}`))\n    .catch((err) =\u003e console.log('An error occurred: ', err));\n\n  if (isDev) {\n    win.webContents.openDevTools();\n  }\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 (win === null) {\n    createWindow();\n  }\n});\n```\n\n### Adjust package.json\n\n#### Add properties for Electron\n\n```json\n  \"homepage\": \".\", # see https://create-react-app.dev/docs/deployment#serving-the-same-build-from-different-paths\n  \"main\": \"build/electron/main.js\",\n```\n\n#### Add properties for Electron Builder\n\n```json\n  \"author\": \"Your Name\",\n  \"description\": \"React-TypeScript-Electron sample with Create React App and Electron Builder\",\n  ...\n  \"build\": {\n    \"extends\": null, # see https://github.com/electron-userland/electron-builder/issues/2030#issuecomment-386720420\n    \"files\": [\n      \"build/**/*\"\n    ],\n    \"directories\": {\n      \"buildResources\": \"assets\" # change the resource directory from 'build' to 'assets'\n    }\n  },\n```\n\n#### Add scripts\n\n```json\n  \"scripts\": {\n    \"postinstall\": \"electron-builder install-app-deps\",\n    \"electron:dev\": \"concurrently \\\"cross-env BROWSER=none yarn start\\\" \\\"wait-on http://127.0.0.1:3000 \u0026\u0026 tsc -p electron -w\\\" \\\"wait-on http://127.0.0.1:3000 \u0026\u0026 tsc -p electron \u0026\u0026 electron .\\\"\",\n    \"electron:build\": \"yarn build \u0026\u0026 tsc -p electron \u0026\u0026 electron-builder\",\n```\n\n## Many thanks to the following articles!\n\n- [⚡️ From React to an Electron app ready for production](https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3)\n- [How to build an Electron app using Create React App and Electron Builder](https://www.codementor.io/randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer)\n- [Application entry file reset to default (react-cra detected and config changed incorrectly)](https://github.com/electron-userland/electron-builder/issues/2030)\n- [Serving the Same Build from Different Paths](https://create-react-app.dev/docs/deployment#serving-the-same-build-from-different-paths)\n\n## \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhirose%2Freact-typescript-electron-sample-with-create-react-app-and-electron-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyhirose%2Freact-typescript-electron-sample-with-create-react-app-and-electron-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhirose%2Freact-typescript-electron-sample-with-create-react-app-and-electron-builder/lists"}