2

I'm creating a web application with Spring backend and a React frontend. Its configuration is based on this minimal Spring Boot/React project.

Now I want to use the react-checkbox-tree component in this project.

How can I do it?

I tried two different things.

Attempt 1

In the pom.xml file the React module is included using the following declaration:

<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react</artifactId>
    <version>15.6.1</version>
</dependency>

I tried to find such artifact for the tree component, but couldn't.

Attemp 2

I tried to install the tree component as a global module (npm install -g react-checkbox-tree).

It didn't help. I get the error

[INFO] ERROR in ./src/main/js/app.js
[INFO] Module not found: Error: Cannot resolve module 'react-checkbox-tree' in C:\myproject\src\main\js
[INFO]  @ ./src/main/js/app.js 5:25-55

during build.

Update 1 (13.08.2017 23:57):

On the WebJars homepage I found a tutorial on how to package a Node module as a WebJar (so that it can be integrated into Spring Boot project like a normal Maven dependency). I started to create the WebJar project for react-checkbox-tree.

You can find the source code here.

Currently the problem is the UPSTREAM_ZIP_URL mentioned in the pom.xml in the tutorial:

<properties>
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  <upstream.url>UPSTREAM_ZIP_URL</upstream.url>

I looked at the code of the React WebJar and came to the conclusion that for react-checkbox-tree, v. 0.6.4, UPSTREAM_ZIP_URL must be https://unpkg.com/react-checkbox-tree@0.6.4/dist. However, I don't find anything at this location. But there are some files at https://unpkg.com/react-checkbox-tree@0.6.4/.

I would appreciate, if someone answered the following questions:

  1. Can I assume that in this case, UPSTREAM_ZIP_URL is equal to https://unpkg.com/react-checkbox-tree@0.6.4/lib/?
  2. How can I build this web JAR project or submit it to WebJars.org?
Glory to Russia
  • 17,289
  • 56
  • 182
  • 325
  • 2
    I suggest, you split the application in two projects. One is genuine javascript , npm you name it based. You can configure webpack as you like it and generate a distribution that you version with maven. In your webapplication, you reference your frontend as a dependency and place it at the right position using wagon or dependency plugin. This will help: https://stackoverflow.com/questions/38532210/how-to-integrate-angular-2-java-maven-web-application – thst Aug 13 '17 at 20:25
  • Thanks, but this solution sounds like last resort to me. I'm wondering how much effort it would be to package the tree package like the dependency from attempt 1 (i. e. make it possible to add the tree dependency via POM file). – Glory to Russia Aug 13 '17 at 20:30
  • 1
    There is another approach, they configure additional war resources from an angular project https://stackoverflow.com/questions/42593975/make-front-and-backend-angular-2-and-spring-maven-multimodule-project But they use a two project approach, too. – thst Aug 13 '17 at 20:31
  • 1
    That "last resort" is the recommended approach. Separate backend from frontend, and only roll the frontend resources up into a dependency zip (jar). – chrylis -cautiouslyoptimistic- Aug 13 '17 at 20:44
  • If we compare the multi-project approach with packaging the dependency as a web JAR, why exactly is the multi-project approach better? – Glory to Russia Aug 13 '17 at 20:59
  • If you look at what happens with the webjar at https://github.com/dpisarenko/webjar-react-checkbox-tree/blob/master/pom.xml#L90-L105 you'll see that it actually unzips the jar. This is effectively the same as copying it from a sibling project, only without downloading from an external url. A multi-project in the same VCS has the advantage of keeping a change across frontend/backend in a single commit. I would also recommend the "last resort" :-) – gesellix Aug 13 '17 at 21:37

0 Answers0