React Template

React Template is an enterprise-grade React boilerplate from Wednesday Solutions that ships with testing strategies, global state management, Redux middleware, a network layer, component library integration, localization, PWA support, route-level lazy loading, and CI/CD pipelines out of the box.

What is React Template?

React Template is an open-source React application boilerplate created by Wednesday Solutions (wednesday.is) that packages the production concerns of a modern web app into a single starter: testing, state management, i18n, theming, routing, PWA, and deployment. It is built on React 17 and bundled with Webpack, and it consumes a standard Node.js/yarn workflow (yarn install, yarn start) to produce a deployable React application.

Key Features

• Redux Sauce state management — Global state is built on Redux Sauce to reduce action/reducer boilerplate, with Reselect selectors for derived data; see app/containers/HomeContainer/reducer.js.
• Redux Saga middleware — Side effects and async flows are handled by Redux Saga in app/containers/HomeContainer/saga.js, demonstrating API-driven workflows.
• Wretch network layer — API utilities are centralized in app/utils/apiUtils.js and app/services/repoApi.js, using Wretch as the fetch wrapper.
• Emotion + Material UI — Components are styled with Emotion and reuse Material UI components, with examples in app/components/T/index.js and the HomeContainer.
• Lingui localization — Translation catalogs live in app/translations/en.json, and a LanguageProvider container wires Lingui into the app root.
• React Router with lazy loading — Routes are defined in app/routeConfig.js, and each container can be code-split via its loadable.js using the app's app/utils/loadable.js helper.
• Testing strategy — Unit tests run with Jest and @testing-library/react; accessibility tests run via Storybook's a11y addon (yarn test-storybook); E2E tests run with Playwright (yarn test:e2e).
• CI/CD and PWA — GitHub Actions workflows (ci.yml, cd.yml) automate lint, test, a11y, build, and deploy; the production Webpack config adds Offline Plugin and Webpack PWA Manifest for offline support.

Who is it for?

Enterprise teams who want a preconfigured React stack with testing and deployment covered, and developers who need a reference architecture for Redux, Redux Saga, Wretch, Lingui, and Emotion. It is also suited for teams moving from a simpler tool like Create React App to a structured, opinionated codebase.

What can you do with React Template?

• Enterprise teams: scaffold a new product frontend with an opinionated folder structure, alias mapping (@app, @components), and Storybook ready for component-driven development.
• DevOps engineers: use the included GitHub Actions workflows to set up CI and CD in minutes, with lint, test, a11y, build, and deploy phases.
• Localization specialists: add or edit language files in app/translations and use the Lingui-based LanguageProvider to switch locales.
• Test engineers: run unit tests with Jest and @testing-library/react, accessibility checks with yarn test-storybook, and end-to-end suites with Playwright.

How does React Template work?

Clone the repository, run yarn install, then yarn run initialize, and start developing with yarn start. The initialize script sets up the app, and additional scripts such as yarn generate scaffold new components, containers, and tests via react-floki.

Pricing

React Template is free and open source, published on GitHub. There is no paid tier or license purchase mentioned on the page.

Alternatives

Create React App, which provides a simpler, less opinionated starting point for React applications.

FAQ

Is React Template free?

Yes, the template is publicly available as a GitHub repository with no licensing fee or payment required to use its source code.

What version of React does React Template use?

Based on the repository's topic tags, it targets React 17. The bundled Webpack configuration and package scripts are set up for a modern React 17 application.

How do I create new components or containers?

Run yarn generate in the project. This uses react-floki, the in-house scaffolding tool, to generate components, containers, tests, and Storybook stories according to the template's folder conventions.

Does React Template include end-to-end testing?

Yes, Playwright is configured with playwright.config.js and example specs in __tests__. Run all E2E tests with yarn test:e2e, or a single test file by passing its path.

Can I make the app a PWA?

Yes. The production Webpack configuration includes Offline Plugin and Webpack PWA Manifest, so the built app gets offline caching and a web app manifest. The service worker integration is set up in app/app.js.