Skip to content

An enterprise react graphql template application showcasing - Testing strategy, Global state management, middleware support, a network layer, component library integration, localization, PWA support, route configuration, lazy loading and CI/CD

License

Notifications You must be signed in to change notification settings

anasnadeemws/react-graphql-ts-template

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React GraphQL TypeScript Template

An enterprise react 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.


React GraphQL TS Template CD

Getting Started

  • Install dependencies using yarn install

  • Start the dev server using yarn start

  • Go through the other scripts in package.json

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

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.

Auto release

About

An enterprise react graphql template application showcasing - Testing strategy, Global state management, middleware support, a network layer, component library integration, localization, PWA support, route configuration, lazy loading and CI/CD

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 70.4%
  • JavaScript 28.6%
  • Other 1.0%