Deploying your frontend as webJar
In an API driven world back-end and front-end are clearly separated and might live on different servers alltogether. However for smaller applications serving static files happens from the same place as your backend lives
So many choices
The web server that proxies your application server could have a rule for static files, your firewall could so that, you use a static directory on your application server or pack, that's the story here, your front-end into a jar. I'm not discussing the merits of the different approaches here, that's a story for another time, but describe the workflow and tools for the JAR approach.
vert.x static routes
In Vertx a static route can be declared with a few lines of code:
Router router = Router.router(vertx);
router.route("/ui/*")
.handler(StaticHandler.create("uitarget"));
Vertx will then look for the folder uitarget
in its current working directory or on the classpath. So you will need to put your jar on the classpath
The swagger-ui example
There are lots of prepackaged UI jars available and easy to integrate into vert.x. For example the Swagger UI. Define a dependency in your pom.xml
and a one liner to access the code:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>swagger-ui</artifactId>
<version>4.1.3</version>
</dependency>
Router router = Router.router(vertx);
router.route("/assets/lib/*").handler(StaticHandler.create("META-INF/resources/webjars"));
Packing your own front-end
Most modern build front-ends owe their executable form to an npm build
command. If you are not sure check the documentation for React, Angular, Lightning, Vue, Ionic or whatever framework you fancy.
There are two plugins for maven that can process front-end work:
- The Frontend Maven Plugin: Specialized module that handles download of NodeJS and running your NodeJS based build tools. Great when you don't have NodeJS installed anyway
- The Exec Maven Plugin: Generic plugin to run stuff. Doesn't download NodeJS for you. More work to setup (that's what I picked)
The steps you will need to perform, actually not you, but your mvn package
run:
- run
npm install
- run
npm build
- move files into the target directory structure
- build the Jar
All of this can be wrapped into your pom.xml
. I usually add the front-end as a module to the whole project, so a build is always complete
Read more
Posted by Stephan H Wissel on 27 December 2021 | Comments (0) | categories: Java JavaScript vert.x