https://github.com/wednesday-solutions/react-template

An enterprise react template application showcasing - Testing strategy, Global state management, middleware support, a network layer, component library integration, localization, PWA support, route configuration, lazy loading and CI/CD
https://github.com/wednesday-solutions/react-template

antd apisauce pwa react react-boilerplate react-floki react-intl react-router react-starter react-starter-kit react-starter-project react-starterkit react-template react17 redux saga storybook styled-components translations webpack

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/wednesday-solutions/react-template
Owner: wednesday-solutions
License: mit
Created: 2019-09-01T10:26:57.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2024-08-09T10:10:46.000Z (9 months ago)
Last Synced: 2025-03-02T14:19:08.829Z (about 2 months ago)
Topics: antd, apisauce, pwa, react, react-boilerplate, react-floki, react-intl, react-router, react-starter, react-starter-kit, react-starter-project, react-starterkit, react-template, react17, redux, saga, storybook, styled-components, translations, webpack
Language: JavaScript
Homepage: https://wednesday.is/building-products/?utm_source=github&utm_medium=react_template
Size: 48.1 MB
Stars: 101
Watchers: 8
Forks: 92
Open Issues: 12
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        



  

    

  

  

    

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](https://github.com/wednesday-solutions/react-floki)

![React Template CD](https://github.com/wednesday-solutions/react-template/workflows/React%20Template%20CD/badge.svg)

















## 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](https://github.com/infinitered/reduxsauce)

  Take a look at the following files

  - [app/containers/HomeContainer/reducer.js](app/containers/HomeContainer/reducer.js)

  - [app/containers/HomeContainer/index.js](app/containers/HomeContainer/index.js)

- Computing and getting state from the redux store using [Reselect](https://github.com/reduxjs/reselect)

  Take a look at the following files

  - [app/containers/HomeContainer/selectors.js](app/containers/HomeContainer/selectors.js)

## Implementing a Redux middleware using redux-sagas

- Side effects using [Redux Saga](https://github.com/redux-saga/redux-saga)

  Take a look at the following files

  - [app/containers/HomeContainer/saga.js](app/containers/HomeContainer/saga.js)

  - [app/containers/HomeContainer/index.js](app/containers/HomeContainer/index.js)

## Network requests using wretch

- API calls using [Wretch](https://github.com/elbywan/wretch)

  Take a look at the following files

  - [app/utils/apiUtils.js](app/utils/apiUtils.js)

  - [app/services/repoApi.js](app/services/repoApi.js)

  - [app/containers/HomeContainer/saga.js](app/containers/HomeContainer/saga.js)

## Styling using emotion

- Styling components using [Emotion](https://emotion.sh/)

  Take a look at the following files

  - [app/components/T/index.js](app/components/T/index.js)

  - [app/containers/HomeContainer/index.js](app/containers/HomeContainer/index.js)

## Using Material UI as the component library

- Reusing components from [Material UI](https://mui.com)

  Take a look at the following files

  - [app/containers/HomeContainer/index.js](app/containers/HomeContainer/index.js)

## Localization using Lingui

- Translations using [Lingui](https://github.com/lingui/js-lingui)

  Take a look at the following files

  - [app/translations/en.json](app/translations/en.json)

  - [app/containers/LanguageProvider/](app/containers/LanguageProvider/)

  - [app/i18n](app/i18n.js)

## Routing using react-router

- Routing is done using [React Router](https://github.com/ReactTraining/react-router)

  Take a look at the following files

  - [app/routeConfig.js](app/routeConfig.js)

  - [app/containers/App/index.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/webpack.config.js)

  - [.storybook/main.js](.storybook/main.js)

  - [.storybook/preview.js](.storybook/preview.js)

  - [.storybook/reactIntl.js](.storybook/react-Intl.js)

  - [app/components/Clickable/stories/Clickable.stories.js](app/components/Clickable/stories/Clickable.stories.js)

## Accessibility testing using Storybooks a11y Addon

- Accessbility testing is done using [a11y addon](https://storybook.js.org/addons/@storybook/addon-a11y).

  Take a look at the following files

  - [.storybook/main.js](.storybook/main.js)

  - [.storybook/test-runner.js](.storybook/test-runner.js)

- Run all the accessbility tests using

  ```

  yarn test-storybook

  ```

- Run single test file by specifying path

  ```

  yarn test-storybook 

  ```

For the documentation take a look at: [Accessbility test](https://storybook.js.org/docs/react/writing-tests/accessibility-testing)

## 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.base.js)

  - [internals/webpack/webpack.config.dev.js](internals/webpack/webpack.config.dev.js)

  - [internals/webpack/webpack.config.prod.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](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/ci.yml)

  - [.github/workflows/cd.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.config.js)

  - [jest.setup.js](jest.setup.js)

  - [app/containers/HomeContainer/tests](app/containers/HomeContainer/tests)

  - [app/services/tests/repoApi.test.js](app/services/tests/repoApi.test.js)

  - [app/components/T/tests/index.test.js](app/components/T/tests/index.test.js)

## End to End testing using playwright

- End to End testing is done using [playwright](https://github.com/microsoft/playwright).

  Take a look at the following files

  - [playwright.config.js](playwright.config.js)

  - [\_\_tests\_\_/example.spec.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 

  ```

For the documentation take a look at: [playwright](https://playwright.dev/docs/intro)

## 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](https://github.com/wednesday-solutions/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](internals/webpack/webpack.base.babel.js)

### Chunkify and Lazy loading

Take a look at the following files

- [app/containers/HomeContainer/loadable.js](app/containers/HomeContainer/loadable.js)

- [app/utils/loadable.js](app/utils/loadable.js)

### App entry point

- [app/app.js](app/app.js)

### PWA

- [Offline Plugin](https://github.com/NekR/offline-plugin)

- [Webpack PWA Manifest](https://github.com/arthurbergmz/webpack-pwa-manifest)

Take a look at the following files

- [app/app.js](app/app.js)

- [internals/webpack/webpack.config.prod.js](internals/webpack/webpack.config.prod.js)