Awesome Open Source
Awesome Open Source

react-webcomponent-poc

This repository demonstrates a simple way of setting up a SPA with React/Redux/RxJS/Typescript. Before adopting a different solution, we were using it to embed our React SPA into a Vue application.

Web Components API was used instead of iframes to re-use existing functionality in the Vue panel with sync calls. When built, this SPA can be used as <seller-store-editor /> inside your HTML page. See development/index.ejs for example.

Summary

Run npm start and go to the URL that is printed to the screen. You will see a page that prints your IP to the screen and refreshes it every 1 minute. This page demonstrates managing side effects with redux-observable. You can use the buttons on the page to change your locale. Or change to the other page where you will see a simple counter with redux implemented.

Features

  • Shadow DOM for CSS encapsulation
  • Redux routing with react-router
  • Exposed as Custom Elements
  • Hook/FormattedMessage based localization
  • Redux with redux-observable for managing side effects
  • Unit tests for side-effects/pure components
  • Environment based configuration
  • Automatic linting with TSLint and Prettier

Structure

.
├── config # environment based configuration files
├── development # webpack config and html file for local development
└── src
    ├── components       # pure components with html/css
    ├── containers       # components connected to redux
    ├── services         # API, Utility services
    ├── store            # redux store registration and root types
    ├── translations     # translation files for different languages
    ├── polyfill.ts      # polyfills for intl
    ├── webcomponent.tsx # rendering SPA to custom element in shadow DOM
    └── register.ts      # entrypoint to expose the webcomponent

Commands

  • npm start starts a local working environment with webpack-dev-server
  • npm run build builds and outputs JS files prepend with PROFILE=dev e.g. to build with different configs
  • npm run test runs all unit tests
  • npm run format formats project source code with tslint and prettier
Alternatives To React Webcomponent Poc
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (239,577
Reactjs (160,944
Redux (27,783
Webcomponents (3,700
Observable (3,548
Tslint (1,177
Shadow Dom (329
Redux Observable (152