{"id":25615211,"url":"https://github.com/wednesday-solutions/electron-react-ts-template","last_synced_at":"2025-07-29T05:02:12.895Z","repository":{"id":225958457,"uuid":"604459477","full_name":"wednesday-solutions/electron-react-ts-template","owner":"wednesday-solutions","description":"An enterprise-grade Electron template written using the React. Includes testing strategies, global state management, middleware support, a network layer, a component library and CI/CD pipelines to release apps across various operating systems. A faster development process without compromising quality, giving you a competitive edge.","archived":false,"fork":false,"pushed_at":"2024-07-10T07:08:17.000Z","size":5123,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-27T18:51:26.070Z","etag":null,"topics":["desktop","electron","electron-boilerplate","electron-starter","electron-template","linux","macos","react","typescript","windows"],"latest_commit_sha":null,"homepage":"https://wednesday.is/building-products/?utm_source=github\u0026utm_medium=electron-react-ts-template","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/wednesday-solutions.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2023-02-21T05:19:32.000Z","updated_at":"2024-12-12T09:31:03.000Z","dependencies_parsed_at":"2024-03-05T07:30:57.549Z","dependency_job_id":"2cbb4c17-ac26-4546-92b7-fd8db59a8d8c","html_url":"https://github.com/wednesday-solutions/electron-react-ts-template","commit_stats":null,"previous_names":["wednesday-solutions/electron-react-ts-template"],"tags_count":26,"template":true,"template_full_name":null,"purl":"pkg:github/wednesday-solutions/electron-react-ts-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Felectron-react-ts-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Felectron-react-ts-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Felectron-react-ts-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Felectron-react-ts-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wednesday-solutions","download_url":"https://codeload.github.com/wednesday-solutions/electron-react-ts-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Felectron-react-ts-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267632693,"owners_count":24118745,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["desktop","electron","electron-boilerplate","electron-starter","electron-template","linux","macos","react","typescript","windows"],"created_at":"2025-02-22T03:18:55.622Z","updated_at":"2025-07-29T05:02:12.823Z","avatar_url":"https://github.com/wednesday-solutions.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg align=\"left\" src=\"https://github.com/wednesday-solutions/electron-react-ts-template/assets/108000259/c01c3e46-72c3-4438-acee-cca274b9c295\" width=\"420\" /\u003e\n\n\u003cdiv\u003e\n  \u003ca href=\"https://www.wednesday.is/?utm_source=github\u0026utm_medium=electron-react-ts-template\" align=\"left\" style=\"margin-left: 0;\"\u003e\n    \u003cimg src=\"https://uploads-ssl.webflow.com/5ee36ce1473112550f1e1739/5f5879492fafecdb3e5b0e75_wednesday_logo.svg\"\u003e\n  \u003c/a\u003e\n  \u003cp\u003e\n    \u003ch3 align=\"left\"\u003eElectron React GraphQL TypeScript Template\u003c/h3\u003e\n  \u003c/p\u003e\n\n  \u003cp\u003e\nAn enterprise electron template application showcasing - Testing strategies, Global state management, middleware support, a network layer, component library integration, localization, PWA support, route configuration, lazy loading, and Continuous integration \u0026 deployment.\n  \u003c/p\u003e\n\n---\n\n  \u003cp\u003e\n    \u003ch4\u003e\n      Expert teams of digital product strategists, developers, and designers.\n    \u003c/h4\u003e\n  \u003c/p\u003e\n\n  \u003cdiv\u003e\n    \u003ca href=\"https://www.wednesday.is/contact-us/?utm_source=github\u0026utm_medium=electron-react-ts-template\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://uploads-ssl.webflow.com/5ee36ce1473112550f1e1739/5f6ae88b9005f9ed382fb2a5_button_get_in_touch.svg\" width=\"121\" height=\"34\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/wednesday-solutions/\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://uploads-ssl.webflow.com/5ee36ce1473112550f1e1739/5f6ae88bb1958c3253756c39_button_follow_on_github.svg\" width=\"168\" height=\"34\"\u003e\n    \u003c/a\u003e\n  \u003c/div\u003e\n\n---\n\n\u003c/div\u003e\n\n![ELECTRON REACT TS Template CD](https://github.com/wednesday-solutions/react-graphql-ts-template/workflows/React%20GraphQL%20TypeScript%20Template%20CD/badge.svg)\n\n\u003cdiv\u003e\n\u003cimg src='./badges/badge-statements.svg' height=\"20\"/\u003e\n\u003cimg src='./badges/badge-branches.svg' height=\"20\"/\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n\u003cimg src='./badges/badge-lines.svg'  height=\"20\"/\u003e\n\u003cimg src='./badges/badge-functions.svg' height=\"20\"/\u003e\n\u003c/div\u003e\n\n## Getting Started\n\n- Install dependencies using `yarn install`\n\n- Start the electron dev server using `yarn run electron:start`\n\n- Package the app for production using `yarn run electron:package`\n\n- Go through the other scripts in `package.json`\n\n## Electron Configuration\n\n- Electron configuration using [main.js](https://www.electronjs.org/docs/latest/tutorial/examples)\n\n  Take a look at the following files\n\n  - [main/main.js](main/main.js)\n\n## TypeScript Configuration\n\n- Typescript Configuration using [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)\n\n  Take a look at the following files\n\n  - [app/tsconfig.json](app/tsconfig.json)\n\n## Global state management using @redux/toolkit\n\n- Global state management using [Redux Toolkit](https://github.com/reduxjs/redux-toolkit)\n\n  Take a look at the following files\n\n  - [app/containers/HomeContainer/reducer.ts](app/containers/HomeContainer/reducer.ts)\n  - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)\n\n- Computing and getting state from the redux store using [Reselect](https://github.com/reduxjs/reselect)\n\n  Take a look at the following files\n\n  - [app/containers/HomeContainer/selectors.ts](app/containers/HomeContainer/selectors.ts)\n\n## Implementing a Redux middleware using redux-sagas\n\n- Side effects using [Redux Saga](https://github.com/redux-saga/redux-saga)\n\n  Take a look at the following files\n\n  - [app/containers/HomeContainer/saga.ts](app/containers/HomeContainer/saga.ts)\n  - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)\n\n## Network requests using apisauce\n\n- API calls using [Api Sauce](https://github.com/infinitered/apisauce/)\n\n  Take a look at the following files\n\n  - [app/utils/apiUtils.ts](app/utils/apiUtils.ts)\n\n## GraphQL requests using Apollo Boost\n\n- GraphQL queries using [Apollo Boost](https://www.npmjs.com/package/apollo-boost)\n\n  Take a look at the following files\n\n  - [app/utils/graphqlUtils.ts](app/utils/graphqlUtils.ts)\n  - [app/containers/HomeContainer/saga.ts](app/containers/HomeContainer/saga.ts)\n\n## Styling using styled-components\n\n- Styling components using [Styled Components](https://styled-components.com)\n\n  Take a look at the following files\n\n  - [app/components/T/index.tsx](app/components/T/index.tsx)\n  - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)\n\n## Using antd as the component library\n\n- Reusing components from [Ant design](https://ant.design)\n\n  Take a look at the following files\n\n  - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)\n\n## Localization using react-intl\n\n- Translations using [React Intl](https://github.com/formatjs/react-intl)\n\n  Take a look at the following files\n\n  - [app/translations/en.json](app/translations/en.json)\n  - [app/containers/LanguageProvider/](app/containers/LanguageProvider/)\n  - [app/i18n](app/i18n.ts)\n\n## Routing using react-router\n\n- Routing is done using [React Router](https://github.com/ReactTraining/react-router)\n\n  Take a look at the following files\n\n  - [app/routeConfig.ts](app/routeConfig.ts)\n  - [app/containers/App/index.tsx](app/containers/App/index.tsx)\n\n## Creating and showcasing components individually and in isolation using Storybooks\n\n- Storybooks allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.\n\n  Take a look at the following files\n\n  - [.storybook/webpack.config.js](.storybook/webpack.config.js)\n  - [.storybook/config.js](.storybook/config.js)\n  - [.storybook/addons.js](.storybook/addons.js)\n  - [app/components/Clickable/stories/Clickable.stories.js](app/components/Clickable/stories/Clickable.stories.js)\n\n## Bundling your application using Webpack\n\n- We're using and configuring webpack to bundle our React application.\n\n  Take a look at the following files\n\n  - [internals/webpack/webpack.config.base.js](internals/webpack/webpack.config.base.js)\n  - [internals/webpack/webpack.config.dev.js](internals/webpack/webpack.config.dev.js)\n  - [internals/webpack/webpack.config.prod.js](internals/webpack/webpack.config.prod.js)\n\n## Analyzing the bundle size using webpack-bundle-analyzer\n\n- The size of the bundle is analyzed using the webpack-bundle-analyzer to make sure that the bundle is lean and optimized.\n\n  Take a look at the following files\n\n  - [internals/webpack/webpack.config.dev.js](internals/webpack/webpack.config.dev.js)\n\n## Implementing CI/CD pipelines using Github Actions\n\n- CI/CD using Github Actions.\n  The CI pipeline has the following phases\n\n  - Checkout\n  - Install dependencies\n  - Lint\n  - Test\n  - Build\n\n  The CD pipeline has the following phases\n\n  - Checkout\n  - Install dependencies\n  - Build\n  - Deploy\n\n  Take a look at the following files\n\n  - [.github/workflows/ci.yml](.github/workflows/ci.yml)\n  - [.github/workflows/cd.yml](.github/workflows/cd.yml)\n\n## Auto release\n\n- Each push into `dev` branch will produce a alpha release\n- Each push into `staging` branch will produce a beta release\n- Each push into `master` branch will produce a prod release\n\nThese releases will also have the respective packaged electron app in it assets.\n\nTake a look at the following files\n\n- [.github/workflows/cd-alpha-release.yml](.github/workflows/cd-alpha-release.yml)\n- [.github/workflows/cd-beta-release.yml](.github/workflows/cd-beta-release.yml)\n- [.github/workflows/cd-latest-release.yml](.github/workflows/cd-latest-release.yml)\n\n## Testing using @testing-library/react\n\n- Testing is done using the @testing-library/react.\n\n  Take a look at the following files\n\n  - [jest.config.json](jest.config.json)\n  - [jest.setup.js](jest.setup.js)\n  - [app/containers/HomeContainer/tests](app/containers/HomeContainer/tests)\n  - [app/services/tests/repoApi.test.ts](app/services/tests/repoApi.test.ts)\n  - [app/components/T/tests/index.test.tsx](app/components/T/tests/index.test.tsx)\n\n## Misc\n\n### Aliasing\n\n- @app -\u003e app/\n- @containers -\u003e app/containers/\n- @components -\u003e app/components/\n- @services -\u003e app/services/\n- @utils -\u003e app/utils/\n- @themes -\u003e app/themes\n- @images -\u003e app/images\n\nTake a look at the following files\n\n- [internals/webpack/webpack.config.base.js](internals/webpack/webpack.config.base.js)\n- [app/tsconfig.json](app/tsconfig.json)\n- [jest.config.json](jest.config.json)\n\n### Chunkify and Lazy loading\n\nTake a look at the following files\n\n- [app/containers/HomeContainer/Loadable.ts](app/containers/HomeContainer/Loadable.ts)\n- [app/utils/loadable.ts](app/utils/loadable.ts)\n\n### App entry point\n\n- [app/app.ts](app/app.ts)\n\n### PWA\n\n- [Offline Plugin](https://github.com/NekR/offline-plugin)\n- [Webpack PWA Manifest](https://github.com/arthurbergmz/webpack-pwa-manifest)\n\nTake a look at the following files\n\n- [app/app.tsx](app/app.ts)\n- [internals/webpack/webpack.config.prod.js](internals/webpack/webpack.config.prod.js)\n\n## Syntax for adding commit messages\n\nYour commit messages have to be in this format:\n\n```\ntype(category): description [flags]\n```\n\nWhere `type` is one of the following:\n\n- `build`\n- `docs`\n- `feat`\n- `fix`\n- `others`\n- `perf`\n- `refactor`\n- `style`\n- `test`\n- `chore`\n- `ci`\n- `temp`\n  Where `flags` is an optional comma-separated list of one or more of the following (must be surrounded in square brackets):\n- `breaking`: alters `type` to be a breaking change\n  And `category` can be anything of your choice. If you use a type not found in the list (but it still follows the same format of the message), it'll be grouped under `other`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwednesday-solutions%2Felectron-react-ts-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwednesday-solutions%2Felectron-react-ts-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwednesday-solutions%2Felectron-react-ts-template/lists"}