Multiple React cras with aem-clientlib-generator | Community
Skip to main content
F
fionas76543059
Level 6
August 6, 2020
Solved

Multiple React cras with aem-clientlib-generator

  • August 6, 2020
  • 1 reply
  • 3012 views

Hi folks,

I am integrating a bunch of different React CRAs into an AEM Page template. I am not using the "SPA Editor". I'm just integrating them directly with custom components,  but I am using the very handy aem-clientlib-generator npm plugin to   create the clientlibs from "build/static" and copy them into my AEM codebase.

 

I looked at the JS for each CRA and I see that the default CRA webpack configuration has "chunked" the JS.  There is one file called "main.<hash>.chunk.js", one called "runtime-main.<hash>.js" and one called "2.<hash>.chunk.js".

From what I can see, "main.<hash>.chunk.js" is my colleagues' React code and "2.<hash>.chunk.js" is the React libraries, react and react-dom.  Now I would like to share the "2.<hash>.chunk.js"  files for all the CRAs rather than have these react libraries duplicated lots of times in lots of clientlibs in my AEM page. The problem is when I look into the JS file, there is some webpack configuration i.e. a webpack object called webpackJsonp<CRA name>  at the top of the file so I can't throw away all of these files except one which was my original hope.

 

I know that this is more of a Webpack/react question than an AEM question but I was hoping someone might have come across this before and know what to do.

 

I noticed a similar but not quite the same question whereby the OP had  multiple CRAs with the same name which didn't work. 

 

thx

Fiona 

 

 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-react-run-multiple-reactjs-apps-on-single-aem-page-without/m-p/367011#M26286

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by ChitraMadan

    Hi @fionas76543059 ,

     

    Please find below one of the approach to integrate multiple react projects in AEM without using SPA editor.

     

    Firstly, we are using these configurations to get rid of chunk files so that js which is included in the zip package through your build process is main.hash.js

    .rescriptsrc.js

    module.exports = config => {
    config.optimization.runtimeChunk = false;
    config.optimization.splitChunks = {
    cacheGroups: {
    default: false
    }
    };
    return config;
    };

    Now, through build process, different zip packages can be generated for different react applications (assuming different applications are in different repos) e.g react-application-1.zip , react-application-2.zip (these zip contains clientlibs to be installed in AEM)

     

    In AEM, there will be a template page for react app, which can have a component to accept application id.

    Depending on the configured application id, you can include client lib dynamically.

    So, you will have to make sure that your application id and installed client lib category in AEM should match.

    example application-id configured on the page - react-application-1 and your template will have this code

    <c:when test="${not empty application-id}">
    <cq:includeClientLib css="${application-id}" />
    <%-- Javascript Application render --%>
    <div id="${application-id}"></div>

    Above is in jsp, you can change to sightly.

     

    1 reply

    ChitraMadan
    Community Advisor
    ChitraMadanCommunity AdvisorAccepted solution
    Community Advisor
    August 6, 2020

    Hi @fionas76543059 ,

     

    Please find below one of the approach to integrate multiple react projects in AEM without using SPA editor.

     

    Firstly, we are using these configurations to get rid of chunk files so that js which is included in the zip package through your build process is main.hash.js

    .rescriptsrc.js

    module.exports = config => {
    config.optimization.runtimeChunk = false;
    config.optimization.splitChunks = {
    cacheGroups: {
    default: false
    }
    };
    return config;
    };

    Now, through build process, different zip packages can be generated for different react applications (assuming different applications are in different repos) e.g react-application-1.zip , react-application-2.zip (these zip contains clientlibs to be installed in AEM)

     

    In AEM, there will be a template page for react app, which can have a component to accept application id.

    Depending on the configured application id, you can include client lib dynamically.

    So, you will have to make sure that your application id and installed client lib category in AEM should match.

    example application-id configured on the page - react-application-1 and your template will have this code

    <c:when test="${not empty application-id}">
    <cq:includeClientLib css="${application-id}" />
    <%-- Javascript Application render --%>
    <div id="${application-id}"></div>

    Above is in jsp, you can change to sightly.

     

      F
      fionas76543059Author
      Level 6
      August 7, 2020
      hi Chitra,
      Terms & ConditionsAccessibility statement

      Loading footer...