- By reusing your own components you can save development time, keep your UI consistent across applications and let your whole team build together.
- No need to create a UI library for reusable components across apps.
- Create Shared UI App to create UI components. Deploy Shared UI App and Dynamically load a React Component from that URL using remote-component.
- You can also add shared styles and common files in Shared App which you want to reuse.
- The RemoteComponent React Component takes a URL as a prop. The URL is loaded and processed. This file must be a valid CommonJS Module that exports the component as default.
- While the URL is loading, the fallback will be rendered. This is a similar pattern to React.Suspense. If no fallback is provided, then nothing will be rendered while loading.
- Once loaded, there will either be an error a Component. The rendering will first be handled by the render callback function. If there is no render callback and err exists, a generic message will be shown.
- The Component will be rendered either to the render callback if one exists, otherwise, it will be rendered as a standard component.
- To use UI Components in all the apps you have to follow this for all the apps.
- Install remote-component
$ npm install @paciolan/remote-component --save- Remote Components will require some dependencies to be injected into them. At the minimum, we'll be injecting the React dependency.
- The web application can include dependencies and inject them into the RemoteComponent. At a minimum, you will probably need the react dependency.
- Create a file remote-component.config.js in the root of the web application.
- If you are using any library or package that the Ui component is using then you have to add that dependency in this file.
- ex: If you are using Material-UI to create a UI component then you have to add material-ui as a dependency in this file like this:
["@material-ui/core"]: require("@material-ui/core")
/**
* remote-component.config.js
* Dependencies for Remote Components
*/
module.exports = {
resolve: {
react: require("react")
}
};- Create a file named RemoteComponent.js in the src folder.
- Export RemoteComponent with the requires from remote-component.config.js. This will inject the dependencies into the RemoteComponent.
/*
* src/components/RemoteComponent.js
*/
import {
createRemoteComponent,
createRequires
} from "@paciolan/remote-component";
import { resolve } from "../remote-component.config.js";
const requires = createRequires(resolve);
export const RemoteComponent = createRemoteComponent({ requires });- Usage:
- Create a file that exports al UI components.
import { RemoteComponent } from "./RemoteComponent";
const element = document.getElementById("app");
const url = "https://raw.githubusercontent.com/Paciolan/remote-component/master/examples/remote-components/HelloWorld.js";
const HelloWorld = props =>
<RemoteComponent
url={url}
render={({ err, Component }) =>
err ? <div>{err.toString()}</div> : <Component {...props} />
}
/>
);
export default HelloWorld;
- Now you can import HelloWorld component in your app like this:
import { HelloWorld } from "./index"; - To use UI components in all the apps you have to add this configuration in all the apps.
- To Create a Shared UI app follow this configuration.
- Create a Folder named Shared.
- Create a folder named src/UI(Or name you want).
- Create Components in the UI folder.
- Ex: To create a Label component in src folder create a file Label.js
import React from 'react';
import Typography from '@material-ui/core/Typography';
export default function Title(props) {
return (
<Typography component="h2" variant="h6" color="primary" gutterBottom>
{props.children}
</Typography>
);
}
- UI Component Label is created.
- Create package.json at the root of the app.
- Add all dependencies in the package.json which is required to create UI component.
- Ex: Title Component is required material-ui, So Install material-ui first.
- If you want common CSS across all the apps or any common file that is used by all the apps then you can add it in the src folder.
- This file must be a valid CommonJS Module that exports the component as default, So we have to convert es6 files to commonjs.
- Create .babelrc in the root folder.
{
"presets": [
"minify",
"@babel/preset-react",
"@babel/env"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread"
]
}
- Install "@babel/preset-react", "@babel/env", "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-object-rest-spread".
- Add scripts in package.json to convert es6 files to commonJs module using babel.
"scripts": {
"build": "babel ./src --out-dir build --extensions '.ts,.tsx,.js,.jsx' && cp ./src/index.css build/",
"start": "serve --port 5000 --cors build"
},
- When you run npm run build, It will convert all files from src directory and add it in build directory and copy index.css file in the build folder.
- Now to use shared components and styles you have to serve build folder.
- You can get components js file from http://localhost:5001/UI/Label.js
- There are 2 apps created in this repo app1 and app2 which are using the shared app for reusable components.
- Created Remore-Component.jsx and remote-component-config.js files and are the same for both apps.
/**
* remote-component.config.js
*
* Dependencies for Remote Components
*/
module.exports = {
resolve: {
react: require("react"),
["@material-ui/core"]: require("@material-ui/core"),
["@material-ui/icons"]: require("@material-ui/icons"),
["@material-ui/core/Link"]: require("@material-ui/core/Link"),
["@material-ui/core/styles"]: require("@material-ui/core/styles"),
["@material-ui/core/Typography"]: require("@material-ui/core/Typography"),
["recharts"]: require("recharts")
}
};
import { createRemoteComponent } from "@paciolan/remote-component/dist/lib/createRemoteComponent";
import { createRequires } from "@paciolan/remote-component/dist/lib/createRequires";
import { resolve } from "./remote-component.config.js";
const requires = createRequires(resolve);
export const RemoteComponent = createRemoteComponent({ requires });
- Created indexShared.js file for add all UI components.
import React from "react";
import { RemoteComponent } from "./RemoteComponent";
const Title = (props) => {
const url1 = "http://localhost:5000/ui/Title.js";
return (
<RemoteComponent
url={url1}
render={({ err, Component }) =>
err ? <div>{err.toString()}</div> : <Component {...props} />
}
/>
);
};
export { Title };
const Deposits = (props) => {
const url = "http://localhost:5000/ui/Deposits.js";
return (
<RemoteComponent
url={url}
render={({ err, Component }) =>
err ? <div>{err.toString()}</div> : <Component {...props} />
}
/>
);
};
export { Deposits };
const Chart = (props) => {
const url = "http://localhost:5000/ui/Chart.js";
return (
<RemoteComponent
url={url}
render={({ err, Component }) =>
err ? <div>{err.toString()}</div> : <Component {...props} />
}
/>
);
};
export { Chart };
const Orders = (props) => {
const url = "http://localhost:5000/ui/Orders.js";
return (
<RemoteComponent
url={url}
render={({ err, Component }) =>
err ? <div>{err.toString()}</div> : <Component {...props} />
}
/>
);
};
export { Orders };
const listItems = (props) => {
const url = "http://localhost:5000/ui/listItems.js";
return (
<RemoteComponent
url={url}
render={({ err, Component }) =>
err ? <div>{err.toString()}</div> : <Component {...props} />
}
/>
);
};
export { listItems };
- imported all UI components in Dashboard.js file
import { Title, Deposits, Chart, Orders } from "./indexShared";
- Created a Shared folder for reusable components.
- Created the Common/ui folder and added all reusable components in ui folder.
- Created index.css file in the Common folder to reuse the same style in all the apps.
- Clone the repo
- Open each app and run npm install.
- Open Shared app and run npm run build
- Run all the apps by npm start
app1: http://localhost:3001
app2: http://localhost:3002
shared: http://localhost:5000
- UI components Chart, Deposits, Orders, and Title are shared with both the apps.