{"id":19580937,"url":"https://github.com/sprout2000/electron-react-ts","last_synced_at":"2025-04-09T09:11:31.418Z","repository":{"id":41371242,"uuid":"381246689","full_name":"sprout2000/electron-react-ts","owner":"sprout2000","description":"An Electron boilerplate with hot reloading for React and TypeScript.","archived":false,"fork":false,"pushed_at":"2025-03-08T01:20:11.000Z","size":10819,"stargazers_count":74,"open_issues_count":0,"forks_count":12,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T08:08:41.666Z","etag":null,"topics":["boilerplate","electron","hot-reload","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sprout2000.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":"2021-06-29T05:13:52.000Z","updated_at":"2025-03-21T09:15:40.000Z","dependencies_parsed_at":"2023-02-18T12:45:58.255Z","dependency_job_id":"a5f847e6-4e0f-42e6-bbd6-4975079322bb","html_url":"https://github.com/sprout2000/electron-react-ts","commit_stats":null,"previous_names":[],"tags_count":68,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sprout2000%2Felectron-react-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sprout2000%2Felectron-react-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sprout2000%2Felectron-react-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sprout2000%2Felectron-react-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sprout2000","download_url":"https://codeload.github.com/sprout2000/electron-react-ts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008630,"owners_count":21032556,"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":["boilerplate","electron","hot-reload","react","typescript"],"created_at":"2024-11-11T07:31:16.544Z","updated_at":"2025-04-09T09:11:31.384Z","avatar_url":"https://github.com/sprout2000.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# electron-react-ts\n\n\u003cimg src=\"https://user-images.githubusercontent.com/52094761/226554131-16510c26-7faf-4bf0-b271-a00abf66d9b5.svg#gh-light-mode-only\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/52094761/226554362-4a04fbd0-6918-47cd-abee-83c6c82a6877.svg#gh-dark-mode-only\"\u003e\n\nAn [Electron](https://www.electronjs.org/) boilerplate with hot reloading for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/).\n\n![GitHub last commit](https://img.shields.io/github/last-commit/sprout2000/electron-react-ts)\n![GitHub package.json dependency version (dev dep on branch)](https://img.shields.io/github/package-json/dependency-version/sprout2000/electron-react-ts/dev/electron)\n![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/sprout2000/electron-react-ts/react)\n![GitHub package.json dependency version (dev dep on branch)](https://img.shields.io/github/package-json/dependency-version/sprout2000/electron-react-ts/dev/typescript)\n\n## :green_book: Usage\n\n```sh\n$ git clone https://github.com/sprout2000/electron-react-ts.git\n$ cd electron-react-ts\n$ npm install\n\n# on development\n$ npm run dev\n\n# on production\n$ npm run build\n```\n\n_NOTE: You will need to have [Node.js](https://nodejs.org/) and [Git](https://git-scm.com/) installed._\n\n## :thumbsup: Features\n\n- Supports hot reloading in both the main and renderer processes.\n- No complicated pre-made settings.\n\nThe template provided by this scaffold is _NOT_ an all-in-one. It provides only the necessary and sufficient settings so that you can customize it as you like. In other words, it has no _\"eject\"_.\n\n## :camera_flash: Screen shots\n\n### Hot reload in renderer process\n\n\u003cimg width=\"800\" src=\"https://user-images.githubusercontent.com/52094761/235551732-a69ba9d5-db95-4101-9b79-e2741f8050dc.gif\" /\u003e\n\n### Hot reload in main process\n\n\u003cimg width=\"800\" src=\"https://user-images.githubusercontent.com/52094761/235551746-490c7b46-8d34-45a8-bd96-9afb0d37cb61.gif\" /\u003e\n\n## :package: How to package your app to publish?\n\nIt is recommended to use [electron-builder](https://www.electron.build/).\n\n```sh\nnpm install --save-dev electron-builder\n```\n\nHere's a sample script `builder.ts` for electron-builder:\n\n```typescript\nimport { build } from \"electron-builder\";\n\nbuild({\n  config: {\n    appId: \"com.example.MyApp\",\n    productName: \"My App\",\n    artifactName: \"${productName}-${version}-${platform}-${arch}.${ext}\",\n    files: [\"dist/**/*\"],\n    directories: {\n      output: \"release\",\n    },\n  },\n});\n```\n\nAnd then run the script above...\n\n```sh\nnpx ts-node ./builder.ts\n```\n\nSee [Common Configuration](https://www.electron.build/configuration) for more details.\n\n## :art: How to use sass (`*.scss`) in your project?\n\nYou will need to add [sass](https://www.npmjs.com/package/sass) and [sass-loader](https://www.npmjs.com/package/sass-loader):\n\n```sh\nnpm install --save-dev sass sass-loader\n```\n\nAnd then, update your `webpack.config.ts`:\n\n```typescript\n  module: {\n    rules: [\n      {\n        test: /\\.s?css$/,\n        use: [MiniCssExtractPlugin.loader, \"css-loader\", \"sass-loader\"],\n      },\n    ],\n  },\n```\n\n## :copyright: Copyright\n\nCopyright (c) 2022 sprout2000\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsprout2000%2Felectron-react-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsprout2000%2Felectron-react-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsprout2000%2Felectron-react-ts/lists"}