Skip to content

Latest commit

 

History

History
291 lines (187 loc) · 9.24 KB

README.md

File metadata and controls

291 lines (187 loc) · 9.24 KB

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

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

TypeScript Configuration

Global state management using @redux/toolkit

Implementing a Redux middleware using redux-sagas

Network requests using apisauce

GraphQL requests using Apollo Boost

Styling using styled-components

Using antd as the component library

Localization using react-intl

Routing using react-router

Creating and showcasing components individually and in isolation using Storybooks

Bundling your application using Webpack

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

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

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

Testing using @testing-library/react

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

Chunkify and Lazy loading

Take a look at the following files

App entry point

PWA

Take a look at the following files

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.