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.

---

Getting Started

• Install dependencies using yarn install

• Start the dev server using yarn start

• Go through the other scripts in package.json

TypeScript Configuration

• Typescript Configuration using tsconfig.json

  Take a look at the following files

  • app/tsconfig.json

Global state management using @redux/toolkit

• Global state management using Redux Toolkit

  Take a look at the following files

  • app/containers/HomeContainer/reducer.ts
  • app/containers/HomeContainer/index.tsx

• Computing and getting state from the redux store using Reselect

  Take a look at the following files

  • app/containers/HomeContainer/selectors.ts

Implementing a Redux middleware using redux-sagas

• Side effects using Redux Saga

  Take a look at the following files

  • app/containers/HomeContainer/saga.ts
  • app/containers/HomeContainer/index.tsx

Network requests using apisauce

• API calls using Api Sauce

  Take a look at the following files

  • app/utils/apiUtils.ts

GraphQL requests using Apollo Boost

• GraphQL queries using Apollo Boost

  Take a look at the following files

  • app/utils/graphqlUtils.ts
  • app/containers/HomeContainer/saga.ts

Styling using styled-components

• Styling components using Styled Components

  Take a look at the following files

  • app/components/T/index.tsx
  • app/containers/HomeContainer/index.tsx

Using antd as the component library

• Reusing components from Ant design

  Take a look at the following files

  • app/containers/HomeContainer/index.tsx

Localization using Lingui

• Translations using Lingui

  Take a look at the following files

  • app/translations/en.json
  • app/containers/LanguageProvider/
  • app/i18n

Routing using react-router

• Routing is done using React Router

  Take a look at the following files

  • app/routeConfig.ts
  • 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/config.js
  • .storybook/addons.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.dev.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

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/cd.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.setup.js
  • app/containers/HomeContainer/tests
  • app/services/tests/repoApi.test.ts
  • 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
• app/tsconfig.json
• jest.config.json

Chunkify and Lazy loading

Take a look at the following files

• app/containers/HomeContainer/Loadable.ts
• app/utils/loadable.ts

App entry point

• app/app.ts

PWA

• Offline Plugin
• Webpack PWA Manifest

Take a look at the following files

• app/app.tsx
• 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.

Auto release

• Each push into qa branch will produce a beta release

• Each push into master branch will produce a prod release

  Take a look at the following files

• .github/workflows/beta-release.yml

• .github/workflows/prod-release.yml