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

• 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/utils/injectSaga.js
  • app/utils/sagaInjectors.js
  • app/containers/HomeContainer/saga.js
  • app/containers/HomeContainer/index.js

Network requests using apisauce

• API calls using Api Sauce

  Take a look at the following files

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

Styling using styled-components

• Styling components using Styled Components

  Take a look at the following files

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

Using antd as the component library

• Reusing components from Ant design

  Take a look at the following files

  • app/containers/HomeContainer/index.js

Localization using react-intl

• Translations using React Intl

  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.

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

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

Gotchas

• For github pages to work on an arbitrary route we have used some workarounds. For production builds deployed directly on / you need to make the following changes
  1. publicPath: process.env.NODE_ENV === 'production' ? '/react-template/' : '/' should be: publicPath: '/'
  2. relativePaths: process.env.NODE_ENV === 'production' should be: relativePaths: false,
  3. const history = createBrowserHistory({ basename: baseUrl }); should be: const history = createBrowserHistory();