Adding React JS as an OSGi module

Fórum

Krzysztof Gołębiowski, modificado 6 Anos atrás.

Adding React JS as an OSGi module

Liferay Master Postagens: 549 Data de Entrada: 25/06/11 Postagens Recentes

Hello Everybody,
A long time has passed since I've been here last time, so I'm going to start my comeback with a question! I'm recently going deeper and deeper into OSGi/BNDTools/Blade and thousands other technologies introduced by Liferay 7 - this is hard but I'm trying to keep calm and go on emoticon

So, I want to add a React support to my portal, but not as it is done in many examples available on the internet - just as an include in the Theme/Portlet, or bundled together within a webpack-build bundle. I want to add it as a module, in a similar way as it is done with Senna JS or other JS libraries. There is the article JAVASCRIPT MODULE LOADERS, but from what I understand it's more about importing some specific features build on top of Liferay JS stack rather than importing a whole new framework, so I've gone deeper into LR code and found frontend-js-web module. There is a set of JS Libraries added to the portal via this module (including jQuery) so I wanted to do something similar with React. From what I understand, what happens there is:

The libraries are downloaded by Gradle via org.webjars.npm
Some processing happens (I don't want to get very deep into it) which is done by some node scripts
Gradle then executes some custom tasks and copies the libraries (configured in build.gradle)
Then they is picked up by embedded BNDTools (?) because of -includeresource: META-INF/resources=tmp/META-INF/resources and zipped in a jar file (bnd.bnd)
To be finally included in portal's HTML header as stated in Liferay-Top-Head-JS-Resources or Liferay-Top-Head-Authenticated-JS-Resources directives (also in bnd.bnd)

First question is where is the documentation about -includeresource (I guess it is a BND Tools thing) and Liferay-Top-Head-Authenticated-JS-Resources (this is Liferay one).

And second issue is that I cannot make it running, the build fails all the time either with [Input file does not exist: react.js, Input file does not exist: react-dom.js] or strange error Could not copy MANIFEST.MF to '/Users/kgolebiowski/someproject-src/modules/reactjs-web/build/tmp/jar/MANIFEST.MF'.

Can any of you explain to me what is actually the flow here, which tool is responsible for what action, where can I find some other examples of this and what could be wrong with my plugin?

My build.gradle:

task buildReact(type: Copy)

buildReact {
    from "${projectDir}/node_modules/react/dist/react.js", "${projectDir}/node_modules/react-dom/dist/react-dom.js"
    into "${buildDir}/"
}

classes {
    dependsOn buildReact
}

dependencies {
	compile group: "com.liferay.portal", name: "com.liferay.portal.kernel", version: "2.0.0"
	compile group: "javax.servlet", name: "javax.servlet-api", version: "3.0.1"
	compile group: "org.osgi", name: "org.osgi.service.component.annotations", version: "1.3.0"
}

My bnd.bnd:

Bundle-Name: React JS Liferay Plugin
Bundle-SymbolicName: org.something.frontend-js-react
Bundle-Version: 1.0.0
Liferay-Releng-Module-Group-Description:
Liferay-Releng-Module-Group-Title: Frontend Infrastructure
Web-ContextPath: /frontend-js-react-web

Liferay-Top-Head-JS-Resources:\
	/react.js\
	/react-dom.js

-includeresource:\
    react.js,\
    react-dom.js

Regards,
KG

Christoph Rabel, modificado 6 Anos atrás.

Fórum

Adding React JS as an OSGi module

RE: Adding React JS as an OSGi module (Resposta)