Repository files navigation

React 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 usingyarn install

• Run the initialize script usingyarn run initialize

• Start the dev server usingyarn start

• Go through the other scripts inpackage.json

• Global state management usingRedux Sauce

  Take a look at the following files

  • app/containers/HomeContainer/reducer.js
  • app/containers/HomeContainer/index.js

• Computing and getting state from the redux store usingReselect

  Take a look at the following files

  • app/containers/HomeContainer/selectors.js

• Side effects usingRedux Saga

  Take a look at the following files

  • app/containers/HomeContainer/saga.js
  • app/containers/HomeContainer/index.js

• API calls usingWretch

  Take a look at the following files

  • app/utils/apiUtils.js
  • app/services/repoApi.js
  • app/containers/HomeContainer/saga.js

• Styling components usingEmotion

  Take a look at the following files

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

• Reusing components fromMaterial UI

  Take a look at the following files

  • app/containers/HomeContainer/index.js

• Translations usingLingui

  Take a look at the following files

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

• Routing is done usingReact Router

  Take a look at the following files

  • app/routeConfig.js
  • app/containers/App/index.js

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

  • run storybookyarn storybook

• Take a look at the following files

  • .storybook/webpack.config.js
  • .storybook/main.js
  • .storybook/preview.js
  • .storybook/reactIntl.js
  • app/components/Clickable/stories/Clickable.stories.js

• Accessbility testing is done usinga11y addon.

  Take a look at the following files

  • .storybook/main.js
  • .storybook/test-runner.js

• Run all the accessbility tests using

  yarn test-storybook

• Run single test file by specifying path

  yarn test-storybook <path to file>

For the documentation take a look at:Accessbility test

• 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.dev.babel.js

• CI/CD using Github Actions.The CI pipeline has the following phases

  • Checkout
  • Install dependencies
  • Lint
  • Test
  • Accessbility 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.js
  • jest.setup.js
  • app/containers/HomeContainer/tests
  • app/services/tests/repoApi.test.js
  • app/components/T/tests/index.test.js

• End to End testing is done usingplaywright.

  Take a look at the following files

  • playwright.config.js
  • __tests__/example.spec.js

• Run all End to End tests using

  yarn test:e2e

• Run single test file by specifying path

  yarn test:e2e <path to file>

For the documentation take a look at:playwright

• Components, containers, tests and stories can be scaffolded using

  yarn generate

  For the documentation take a look at:react-floki

• @app -> app/
• @containers -> app/containers/
• @components -> app/components/
• @services -> app/services/
• @utils -> app/utils/

Take a look at the following files

• internals/webpack/webpack.base.babel.js

Take a look at the following files

• app/containers/HomeContainer/loadable.js
• app/utils/loadable.js

• app/app.js

• Offline Plugin
• Webpack PWA Manifest

Take a look at the following files

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