https://github.com/wednesday-solutions/electron-react-ts-template

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.
https://github.com/wednesday-solutions/electron-react-ts-template

desktop electron electron-boilerplate electron-starter electron-template linux macos react typescript windows

Last synced: 17 days ago
JSON representation

Host: GitHub
URL: https://github.com/wednesday-solutions/electron-react-ts-template
Owner: wednesday-solutions
License: mit
Created: 2023-02-21T05:19:32.000Z (about 2 years ago)
Default Branch: master
Last Pushed: 2024-07-10T07:08:17.000Z (10 months ago)
Last Synced: 2025-04-13T21:13:02.348Z (17 days ago)
Topics: desktop, electron, electron-boilerplate, electron-starter, electron-template, linux, macos, react, typescript, windows
Language: TypeScript
Homepage: https://wednesday.is/building-products/?utm_source=github&utm_medium=electron-react-ts-template
Size: 4.89 MB
Stars: 4
Watchers: 4
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        



  

    

  

  

    

Electron React GraphQL TypeScript Template

  

  


An 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 & deployment.

  


---

  


    



      Expert teams of digital product strategists, developers, and designers.

    

  

  


    

      

    

    

      

    

  


---



![ELECTRON REACT TS Template CD](https://github.com/wednesday-solutions/react-graphql-ts-template/workflows/React%20GraphQL%20TypeScript%20Template%20CD/badge.svg)

















## Getting Started

- Install dependencies using `yarn install`

- Start the electron dev server using `yarn run electron:start`

- Package the app for production using `yarn run electron:package`

- Go through the other scripts in `package.json`

## Electron Configuration

- Electron configuration using [main.js](https://www.electronjs.org/docs/latest/tutorial/examples)

  Take a look at the following files

  - [main/main.js](main/main.js)

## TypeScript Configuration

- Typescript Configuration using [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)

  Take a look at the following files

  - [app/tsconfig.json](app/tsconfig.json)

## Global state management using @redux/toolkit

- Global state management using [Redux Toolkit](https://github.com/reduxjs/redux-toolkit)

  Take a look at the following files

  - [app/containers/HomeContainer/reducer.ts](app/containers/HomeContainer/reducer.ts)

  - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)

- Computing and getting state from the redux store using [Reselect](https://github.com/reduxjs/reselect)

  Take a look at the following files

  - [app/containers/HomeContainer/selectors.ts](app/containers/HomeContainer/selectors.ts)

## Implementing a Redux middleware using redux-sagas

- Side effects using [Redux Saga](https://github.com/redux-saga/redux-saga)

  Take a look at the following files

  - [app/containers/HomeContainer/saga.ts](app/containers/HomeContainer/saga.ts)

  - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)

## Network requests using apisauce

- API calls using [Api Sauce](https://github.com/infinitered/apisauce/)

  Take a look at the following files

  - [app/utils/apiUtils.ts](app/utils/apiUtils.ts)

## GraphQL requests using Apollo Boost

- GraphQL queries using [Apollo Boost](https://www.npmjs.com/package/apollo-boost)

  Take a look at the following files

  - [app/utils/graphqlUtils.ts](app/utils/graphqlUtils.ts)

  - [app/containers/HomeContainer/saga.ts](app/containers/HomeContainer/saga.ts)

## Styling using styled-components

- Styling components using [Styled Components](https://styled-components.com)

  Take a look at the following files

  - [app/components/T/index.tsx](app/components/T/index.tsx)

  - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)

## Using antd as the component library

- Reusing components from [Ant design](https://ant.design)

  Take a look at the following files

  - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)

## Localization using react-intl

- Translations using [React Intl](https://github.com/formatjs/react-intl)

  Take a look at the following files

  - [app/translations/en.json](app/translations/en.json)

  - [app/containers/LanguageProvider/](app/containers/LanguageProvider/)

  - [app/i18n](app/i18n.ts)

## Routing using react-router

- Routing is done using [React Router](https://github.com/ReactTraining/react-router)

  Take a look at the following files

  - [app/routeConfig.ts](app/routeConfig.ts)

  - [app/containers/App/index.tsx](app/containers/App/index.tsx)

## Creating and showcasing components individually and in isolation using Storybooks

- 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.

  Take a look at the following files

  - [.storybook/webpack.config.js](.storybook/webpack.config.js)

  - [.storybook/config.js](.storybook/config.js)

  - [.storybook/addons.js](.storybook/addons.js)

  - [app/components/Clickable/stories/Clickable.stories.js](app/components/Clickable/stories/Clickable.stories.js)

## Bundling your application using Webpack

- We're using and configuring webpack to bundle our React application.

  Take a look at the following files

  - [internals/webpack/webpack.config.base.js](internals/webpack/webpack.config.base.js)

  - [internals/webpack/webpack.config.dev.js](internals/webpack/webpack.config.dev.js)

  - [internals/webpack/webpack.config.prod.js](internals/webpack/webpack.config.prod.js)

## Analyzing the bundle size using webpack-bundle-analyzer

- The size of the bundle is analyzed using the webpack-bundle-analyzer to make sure that the bundle is lean and optimized.

  Take a look at the following files

  - [internals/webpack/webpack.config.dev.js](internals/webpack/webpack.config.dev.js)

## Implementing CI/CD pipelines using Github Actions

- CI/CD using Github Actions.

  The CI pipeline has the following phases

  - Checkout

  - Install dependencies

  - Lint

  - Test

  - Build

  The CD pipeline has the following phases

  - Checkout

  - Install dependencies

  - Build

  - Deploy

  Take a look at the following files

  - [.github/workflows/ci.yml](.github/workflows/ci.yml)

  - [.github/workflows/cd.yml](.github/workflows/cd.yml)

## Auto release

- Each push into `dev` branch will produce a alpha release

- Each push into `staging` branch will produce a beta release

- Each push into `master` branch will produce a prod release

These releases will also have the respective packaged electron app in it assets.

Take a look at the following files

- [.github/workflows/cd-alpha-release.yml](.github/workflows/cd-alpha-release.yml)

- [.github/workflows/cd-beta-release.yml](.github/workflows/cd-beta-release.yml)

- [.github/workflows/cd-latest-release.yml](.github/workflows/cd-latest-release.yml)

## Testing using @testing-library/react

- Testing is done using the @testing-library/react.

  Take a look at the following files

  - [jest.config.json](jest.config.json)

  - [jest.setup.js](jest.setup.js)

  - [app/containers/HomeContainer/tests](app/containers/HomeContainer/tests)

  - [app/services/tests/repoApi.test.ts](app/services/tests/repoApi.test.ts)

  - [app/components/T/tests/index.test.tsx](app/components/T/tests/index.test.tsx)

## Misc

### Aliasing

- @app -> app/

- @containers -> app/containers/

- @components -> app/components/

- @services -> app/services/

- @utils -> app/utils/

- @themes -> app/themes

- @images -> app/images

Take a look at the following files

- [internals/webpack/webpack.config.base.js](internals/webpack/webpack.config.base.js)

- [app/tsconfig.json](app/tsconfig.json)

- [jest.config.json](jest.config.json)

### Chunkify and Lazy loading

Take a look at the following files

- [app/containers/HomeContainer/Loadable.ts](app/containers/HomeContainer/Loadable.ts)

- [app/utils/loadable.ts](app/utils/loadable.ts)

### App entry point

- [app/app.ts](app/app.ts)

### PWA

- [Offline Plugin](https://github.com/NekR/offline-plugin)

- [Webpack PWA Manifest](https://github.com/arthurbergmz/webpack-pwa-manifest)

Take a look at the following files

- [app/app.tsx](app/app.ts)

- [internals/webpack/webpack.config.prod.js](internals/webpack/webpack.config.prod.js)

## Syntax for adding commit messages

Your commit messages have to be in this format:

```

type(category): description [flags]

```

Where `type` is one of the following:

- `build`

- `docs`

- `feat`

- `fix`

- `others`

- `perf`

- `refactor`

- `style`

- `test`

- `chore`

- `ci`

- `temp`

  Where `flags` is an optional comma-separated list of one or more of the following (must be surrounded in square brackets):

- `breaking`: alters `type` to be a breaking change

  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`.