JarCasting
JarCasting JarCasting

React Assets Plugin

This Maven plugin lets you process your server render view to link with react build assets.

License

License
Categories

Categories

Maven Build Tools React User Interface Web Frameworks
GroupId

GroupId

com.github.maasdi
ArtifactId

ArtifactId

react-assets-maven-plugin
Last Version

Last Version

1.0.1
Release Date

Release Date
Type

Type

maven-plugin
Description

Description

React Assets Plugin
This Maven plugin lets you process your server render view to link with react build assets.
Project URL

Project URL

https://github.com/maasdi/react-assets-maven-plugin
Source Code Management

Source Code Management

https://github.com/maasdi/react-assets-maven-plugin

Download react-assets-maven-plugin

Filename Size
react-assets-maven-plugin-1.0.1.pom
react-assets-maven-plugin-1.0.1.jar 16 KB
react-assets-maven-plugin-1.0.1-sources.jar 9 KB
react-assets-maven-plugin-1.0.1-javadoc.jar 78 KB
Browse

How to add to project

<plugin>
    <groupId>com.github.maasdi</groupId>
    <artifactId>react-assets-maven-plugin</artifactId>
    <version>1.0.1</version>
</plugin>

Dependencies

compile (3)

Group / Artifact Type Version
org.apache.maven : maven-plugin-api jar 3.5.0
org.apache.maven.plugin-tools : maven-plugin-annotations jar 3.2
com.google.code.gson : gson jar 2.8.5

provided (1)

Group / Artifact Type Version
org.apache.maven : maven-core jar 3.1.0

test (1)

Group / Artifact Type Version
junit : junit jar 4.0

Project Modules

There are no modules declared in this project.

React Assets Maven Plugin

Build Status Maven Central

This Maven plugin help you sync view template (JSP, FreeMarker, Thymeleaf) and react build assets during build process.

Objectives

Build React + Spring application with server rendering view sometimes very messy, because npm run build generate files with hash, every time code change the hash will change.

Often we come up with workaround by renaming the files to static file name, but this can easily break code splitting and lose potential advantages for production read here.

This plugin will let you sync those assets and your server rendered view during maven process-resources phase.

Requirements

  • Maven 3 and Java 1.8

Usage

Given that you have template /src/main/resources/templates/app.ftlh

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="manifest" href="/manifest.json" />
    <title>Test Server Render HTML</title>
    <ReactAssetCss/> <!-- will replace by plugin -->
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <ReactAssetRuntime/> <!-- will replace by plugin -->
    <ReactAssetJs/> <!-- will replace by plugin -->
  </body>
</html>

Then

<plugin>
  <groupId>com.github.maasdi</groupId>
  <artifactId>react-assets-maven-plugin</artifactId>
  <version>1.0.1</version>
  <executions>
    <execution>
      <id>sync-assets-template</id>
      <phase>process-resources</phase>
      <configuration>
        <assetsDirectory>${project.basedir}/frontend/build</assetsDirectory>
        <resources>
          <resource>
            <file>${project.basedir}/src/main/resources/templates/app.ftlh</file>
            <outputDir>${project.basedir}/target/classes/templates</outputDir>
          </resource>
        </resources>
      </configuration>
      <goals>
        <goal>process-asset</goal>
      </goals>
    </execution>
  </executions>
</plugin>

Options

  • assetsDirectory - The react assets directory, this directory should be react build folder or folder with similar structure.
  • resources - The list of resource to process, possibly JSP, FreeMarker template or Thymeleaf file.
  • manifestName - The react manifest file name, default value is asset-manifest.json.
  • cssMarkup - The CSS markup that will be replace (case sensitive). default value is <ReactAssetCss/>.
  • jsMarkup - The Javascript markup that will be replace (case sensitive). default value is <ReactAssetJs/>.
  • runtimeMarkup - The main-runtime markup that will be replace (case sensitive). default value is <ReactAssetRuntime/>.
  • publicUrl - The react asset PUBLIC_URL, default value is /
  • inlineRuntimeChunk - By default runtime-asset will be embed, set this parameter to false which will load chunk instead of embedding it in your view.

Sample

There is sample of Spring Boot + React here

Licenses:

Versions

Version
1.0.1
1.0.0