wednesday-solutions / react-graphql-ts-template Goto Github PK

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.

---

• Install dependencies using yarn install

• Start the dev server using yarn start

• Go through the other scripts in package.json

• Typescript Configuration using tsconfig.json

  Take a look at the following files

  • app/tsconfig.json

• 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

• Side effects using Redux Saga

  Take a look at the following files

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

• API calls using Api Sauce

  Take a look at the following files

  • app/utils/apiUtils.ts

• GraphQL queries using Apollo Boost

  Take a look at the following files

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

• Styling components using Styled Components

  Take a look at the following files

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

• Reusing components from Ant design

  Take a look at the following files

  • app/containers/HomeContainer/index.tsx

• Translations using React Intl

  Take a look at the following files

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

• Routing is done using React Router

  Take a look at the following files

  • app/routeConfig.ts
  • app/containers/App/index.tsx

• 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

• 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

• 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

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

• @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

Take a look at the following files

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

• app/app.ts

• Offline Plugin
• Webpack PWA Manifest

Take a look at the following files

• app/app.tsx
• internals/webpack/webpack.config.prod.js

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.

• 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