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.

---

Built using react-floki

Getting Started

• Install dependencies using yarn install

• Run the initialize script using yarn run initialize

• Start the dev server using yarn start

• Go through the other scripts in package.json

Global state management using reduxSauce

• Global state management using Redux 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 using Reselect

  Take a look at the following files

  • app/containers/HomeContainer/selectors.js

Implementing a Redux middleware using redux-sagas

• Side effects using Redux Saga

  Take a look at the following files

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

Network requests using wretch

• API calls using Wretch

  Take a look at the following files

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

Styling using emotion

• Styling components using Emotion

  Take a look at the following files

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

Using Material UI as the component library

• Reusing components from Material UI

  Take a look at the following files

  • app/containers/HomeContainer/index.js

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.js
  • app/containers/App/index.js

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.

  • run storybook yarn 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

Accessibility testing using Storybooks a11y Addon

• Accessbility testing is done using a11y 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

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.dev.babel.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
  • 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 using @testing-library/react

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

• End to End testing is done using playwright.

  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

Scaffolding components/containers/tests using react-floki

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

  yarn generate
  

  For the documentation take a look at: react-floki

Misc

Aliasing

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

Chunkify and Lazy loading

Take a look at the following files

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

App entry point

• app/app.js

PWA

• Offline Plugin
• Webpack PWA Manifest

Take a look at the following files

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