Liferay 7.3.5 Multiple react widgets that uses one core of the React Components

Question

I have eg. 3 React widgets but for each of them I need to have separate components and node_modules. Is there a chance that in liferay 7.3.5 those 3 widgets can share the components, node modules, etc.?

Eg. React Widget 1(and 2,3) can share the 'ReusablePart' component

import React from 'react';
import ReusablePart from '../components/ReusablePart'

function ReactWidget1() {
  return (
    <div className="App">
      <header className="App-header">
       <ReusablePart />
      </header>
    </div>
  );
}

something like

ReactSuperWidget
- components
--ReusablePart
-ReactWidgets
--ReactWidget1
--ReactWidget2
--ReactWidget3

and build them with 3 separate liferay jars (react-widget1.jar, react-widget2.jar, react-widget3.jar)

Answer 1

You have multiple options to include common JS code on each page, e.g.:

• embed the common components in your theme (if you have a custom theme) and just rely on them being present
• implement a ThemeContributor
• You also have the option to include all react widgets in a single jar, that contains the shared resources once
• Or serve the shared resources from a separate plugin or well known URL
• With Liferay 7.4, you'll also have Client Extensions that can add resources to your theme without changing the theme itself.

Which route you take likely depends on the structure of your code and preferences of control/deployment.