Blogs

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):

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

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

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

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:

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

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

     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:

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

• 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: 

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