Menu
▾
▴
Posted by
2021-04-15
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.
- 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](https://github.com/liferay/liferay-frontend-projects/blob/master/maintenance/projects/js-toolkit/docs/.npmbundlerrc-file-reference.md#exclude) 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
2021-04-15
