react-verdi v1.0.4
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
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
React 16, Redux, and React Router
If your application is using React 16, Redux, and React Router, add the following to your client file.
React 15, Redux, and React Router
If your application is using React 15, Redux, and React Router, add the following to your client file.
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 (Hosted on free Heroku, subject to sleep time after inactivity)