# react-verdi

> react-verdi

Latest version **1.0.4** (published 2018-08-24) · 0 weekly downloads

## Install

```sh
npm install react-verdi
pnpm add react-verdi
yarn add react-verdi
bun add react-verdi
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-08-24 |
| First published | 2018-08-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 28.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | andrea.caldera@gmail.com |
| Maintainers | andrea.caldera |

## Links

- npm: https://www.npmjs.com/package/react-verdi
- Homepage: https://github.com/andreacaldera/react-verdi
- npm.io page: https://npm.io/package/react-verdi

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^16.4.1
- [history](https://npm.io/package/history.md) ^4.7.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.1
- [superagent](https://npm.io/package/superagent.md) ^3.8.3
- [url-pattern](https://npm.io/package/url-pattern.md) ^1.0.3
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1
- [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.24.1

## Recent versions

- 1.0.4 (latest) — 2018-08-24
- 1.0.3 — 2018-08-24
- 1.0.2 — 2018-08-10
- 1.0.1 — 2018-08-08
- 1.0.0 — 2018-08-07
- 0.2.1 — 2018-08-04
- 0.2.0 — 2018-08-04
- 0.0.2 — 2018-08-01
- 0.0.1 — 2018-08-01

## README

# react-verdi

Composer for React applications.

Enable composition of different React applications within the same page.

As for instruments in an orchestra, single applications can be played individually or play in an orchestra alongside the rest of the applications.

## Features

### Server side rendering

Applications can be rendered server side individually (standalone mode) and when aggregated within a portal. Each application is responsible for its own server side rendering whereas the portal is responsible for aggregating them.

In order to render an host app server side, the portal app should fetch the host app HTML server side and include the host app JS and CSS.

```
<!doctype html>
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="PORTAL_APP.css" />
        <link rel="stylesheet" type="text/css" href="CLIENT_APP.css" />
      <title>PORTAL APP</title>
      </head>
      <body>
        <div id="PORTAL_APP_CONTAINER_ID">
          This is the content of the portal app
        </div>
        <div id=HOST_APP_CONTAINER_ID">
            <script>window.__APP_HOST_INITIAL_STATE__ = {}</script>
        </div>
        <script>window.__PORTAL_APP_INITIAL_STATE__ = {}</script>
        <script src="PORTAL_APP.js"></script>
        <script src="HOST_APP.js"></script>
      </body>
    </html>
```

An example of this is available in [app-shop server](https://github.com/andreacaldera/react-verdi/blob/master/examples/app-shop/app-shop/src/server/server.js)

### Vanilla React 16

If your application is implemented in vanilla React 16, add the following to your client file.

In order to include a host app within a port app, the following is required in the host app client JS.
```
import { clientManager } from 'react-verdi';

import Footer from '../common/components/Footer';
import { APP_CONTAINER_ID, APP_PATTERN, APP_NAME } from '../common/constants';

const { register } = clientManager({
  appName: APP_NAME,
  pattern: APP_PATTERN,
  appContainerId: APP_CONTAINER_ID,
});

function getApp() {
  return Footer;
}

register({ getApp });
```

The parameters passed to __react-verdi__ are:
- _APP_PATTERN_ will be used by __react-verdi__ to know if the host app needs to mounted / unmounted for a particula URL.
- _APP_CONTAINER_ID_ will be used by __react-verdi__ to mount the host app to the its DOM element.

An example of this is available in [app-footer client](https://github.com/andreacaldera/react-verdi/blob/master/examples/app-shop/app-footer/src/client/index.js)

### React 16, Redux, and React Router

If your application is using React 16, Redux, and React Router, add the following to your client file.

[app-product client](https://github.com/andreacaldera/react-verdi/blob/master/examples/app-shop/app-product/src/client/index.js)

### React 15, Redux, and React Router

If your application is using React 15, Redux, and React Router, add the following to your client file.

[app-checkout client](https://github.com/andreacaldera/react-verdi/blob/master/examples/app-shop/app-checkout/src/client/index.js)

## Examples

### app-shop

An ecommerce application comprising of a portal app (**app-shop**) and four different host applications: **app-product**, **app-checkout**, **app-footer**, **app-header**.

[app-shop live demo](https://react-verdi-demo-app-shop.herokuapp.com/) (Hosted on free Heroku, subject to sleep time after inactivity)

[more information](https://github.com/andreacaldera/react-verdi/blob/master/examples/app-shop/README.md)

---
_Source: https://npm.io/package/react-verdi · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._