Blogs

Blogs

How to use Shared Library Javascript with React

When we generate some NPM modules from generator-liferay-js, you should see that the generated (.jar) module is a "bit heavy".  In the case of the React Liferay module it is not as much as the Angular Liferay module (posted here). However, let's say we want to work with a few modules of this type and instance them on one page. This could cause some problems:

1. Loss of performance: JS files will be downloaded for each module (those of the dependency) which implies a longer loading time.

2. Possible version conflicts: If you use different versions of React, there might be conflicts.

3. Longer build time: By having to package the module with all its dependencies, the build time is considerably high.

So, we ask ourselves, how can we solve these problems? One possible solution is to use "Shared Bundle", that is, have a common javascript library in a container as a provider and consume it from the angular modules. To learn more keep reading the blog where we explain how to do it step by step.

Requirements: Node, Yeoman and NPM Installed

1. First, install generator-liferay-js by running this command (if not preinstalled):

npm install -g generator-liferay-js

 

2. Run the generator inside your “liferay-workspace/modules” or any project folder you are using

yo liferay-js

 

3. Choose the “Shared bundle” type and fill the rest of the information needed:


4. Open the “src/index.js” and add inside init() method

console.log('common-js-bundle is working as provider...'); 


5. Now create a React project, running the generator inside your “liferay-workspace/modules” or any project folder you are using 

yo liferay-js 

 

6. Choose the “React Widget” type and fill in the rest of the information necessary:


 

7. Open the package.json and copy everything inside “dependencies”. 


 

8. Paste as “dependencies” in your package.json file of your “Shared Library project” previously created.


 

9. Inside the “Shared JS library” project, run:

npm install


10. Back to React Project, open the .npmbundlerrc file (here is the setting)

     a. Excluding all dependencies declared inside our project, add the following

  "exclude":{
    "*":true
   },

   

     b. Importing all dependencies you need to pull from the “Shared JS library”. We can do through “config/imports” + the name of the provider. It should look like this:

 "config":{
  "imports":{
  "common-js-bundle":{
  "react": "16.8.6",
  "react-dom": "16.8.6"
 }
},
}

 

    c. Finally if you want to access the index.js from your provider, simply add the provider without namespace  inside the “imports”

    "":{
      "common-js-bundle" : "^1.0.0"
    }

 

  • The final code of .npmbundlerrc file should look like this:

11. Open the src/index.js and import your provider

    a. This import, loads the main file (index.js) from provider 

12. Back to your React Project, eliminate everything inside the build folder.

13. Now we will deploy both projects: the consumer and the provider.To do this, run inside each project: 

npm run deploy

 

Note: If you are using the Hybrid React Widget (React plus Java project) you can apply the same number 10 step to add the dependency and exclude the others, and the number 11 step if you want to access the index.js from the provider. The only difference is the “create-jar” properties isn’t inside the .npmbundlerrc file because it is not needed for hybrid widget. 

 

Here my Git repo with some samples:  https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/main/modules