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.

---

We’re always looking for people who value their work, so come and join us. We are hiring!

Built using react-floki

API Calls

• 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

Side Effects

• 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

Global state management

• 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/selector.js

Design and Style

• Styling components using Styled Components

  Take a look at the following files

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

• Reusing components from Ant design

  Take a look at the following files

  • app/containers/HomeContainer/index.js

Translations

• Translations using React Intl

  Take a look at the following files

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

Routing

• Routing is done using React Router

  Take a look at the following files

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

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.prod.babel.js

Scaffolding components

Components, containers, tests and stories can be scaffolded using

yarn generate

For documentation take a look at: react-floki

Gotchas

• For github pages to work on an arbitrary route we have the 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();