m2e integration trigger rerun of npx

[garretwilson]

I'm using v1.12.1 of the plugin on Windows 10.

I'm running Babel to manually transpile React JSX files from the source to the target. It works very nicely! I'm overjoyed!

<execution>
  <id>transpile-jsx</id>
  <goals>
   <goal>npx</goal>
  </goals>
  <phase>process-resources</phase>
  <configuration>
    <arguments>babel ${project.basedir}/src/main/resources/static --out-dir ${project.build.outputDirectory}/static</arguments>
  </configuration>
</execution>

I updated my POM resources declaration to exclude **/.jsx files.

<resources>
  <resource>
    <directory>${project.basedir}/src/main/resources</directory>
    <excludes>
      <exclude>**/*.jsx</exclude>
    </excludes>
  </resource>
</resources>

Then Babel (via this plugin) comes along in the same process-resources phase and transpiles the JSX files to .js files in the target tree.

The problem is that when I run a Spring Boot application directly within Eclipse, if I modify a .jsx file, Eclipse never notices it, so I'm left with an out-of-date .js file in the target tree.

Is there any way with m2e integration to indicate that my transpile-jsx npx execution above should be re-run when any .jsx files are modified in the src/tree?

This is not a huge issue. Currently I can manually run npx babel … --watch from a terminal and have it continually monitor the src tree for changes and transpile the JSX files, even while Eclipse is running. But it would be nice if there were some way to do that automatically from within Eclipse.

Eclipse is already monitoring the src tree, because other static files are automatically copied to target when they are modified. But I guess that adding <exclude>**/*.jsx</exclude> above tells Eclipse not to touch them at all. It would be nice if someone it woudl know to rerun the <id>transpile-jsx</id> execution.

Any ideas?

[eirslett]

I use Vite nowadays. I set it up to run a dev server on port 3000, which serves all my static assets. If a request get a 404/a frontend asset is not found, Vite will instead proxy the request to port 8080, where my Java app runs.

It's a bit more inconvenient to run two processes (the vite server + your actual app) during development, but it has some good productivity gains. For example you get HMR/Hot Module Replacement. And it's not tied to a particular IDE, you can use Eclipse, IDEA, VS Code, Notepad, you name it.

Another upside is that Vite is much, much faster than babel. We're not talking 20-30 % faster, we're talking 10-20 times faster. It's based on esbuild (written in Golang) and/or SWC (written in Rust). Babel is implemented in JavaScript, which (even with the optimizations of JS engines like V8, limits how fast it can go. I'm sure by the end of 2023, we will have something Rust-based that is even faster than Vite. Until then, give it a try!

[garretwilson]

I'm just now getting ready to publish a blog post on integrating your Frontend Maven Plugin using Babel for transpiling JSX in e.g. Spring Boot. I saw that other platforms were using Babel. You're saying Vite does JSX transpiling without using Babel? Can I call it from my Maven build? Is there any documentation on this?

[garretwilson]

I went ahead and published the blog post I was working on. It discussed in-depth how to use your Frontend Maven Plugin to integrate Babel transparently into a Maven build.

No-Fuss React and JSX with Spring Boot

… You can invoke mvn clean package exactly the same as you did before you added React to the project. The only difference from a normal Maven Spring Boot development setup is that, for live re-transpilation during development, you'll need the added step of running Babel CLI in --watch mode in a separate terminal window when running the application in the IDE.

I'll have to learn more about Vite. I'll be curious to know if it can be integrated into a Maven build as cleanly as this.

Thanks again for a really great and useful plugin.