Webpack and npm for Simple Java 8 Web Apps

Java doesn't have the best reputation when it comes to web development. Let's face it, it's a verbose language littered with large frameworks (they have their place, but not all tasks require a framework) that can be quite daunting to learn. It would be tough to argue against using a dynamic language such as Ruby or Javascript when deciding to build a web application. They have great tooling and dynamic languages tend to speed up web development productivity.

How large is the gap though? If an experienced Java dev wants to build a web site / application should they learn a new language or possibly have a single page app with a Java backed REST service? Or should they pick one of the many frameworks GWT, Vaadin, JSF, PrimeFaces, one of many MVC frameworks? After exploring both single page application frameworks and Java frameworks there seems to be quite a large learning curve, one that there isn't time for. Why can't we build a very quick server side rendered website for a quick MVP or even a full size project?

Building a server side rendered website in javascript is pretty straightforward and has minimal barrier to entry. Pick up node.js, express and a HTML templating engine (handlebars, mustache, jade, ...). How close can we get to this with Java?

Lightweight Java HTTP Server

Undertow is a great lower level web server and we can compare it to node.js in our example. Undertow has been covered fairly extensively on this site so we will jump right into the code. For a refresher or intro to Undertow take a look at Embedded Java HTTP Server.

HTTP Handlers

We will be creating four routes for this example. A simple static homepage, a hello {name} page which uses a query parameter, a not found 404 page and finally a default 500 internal server error page. These should all be fairly straight forward.

Middleware and Routes

Now that we have our HttpHandlers we need to tie them to specific routes using our RoutingHandler. While we are at it let's add some useful middleware such as logging, metrics, exception handling, and gzip.

HTML Templating

Handlebars is widely used and simple to learn let's start with that. We can create a layout to share our common page formatting as well as many re-useable widgets. We will only list some files here but all of the front end of StubbornJava can be found here.

Handling Assets

Now that we have a web server that can handle requests how do we manage all of our assets? We need CSS (sass / less), images, javascript libraries. Luckily javascript already has some pretty good tools for the job.

npm

We can use npm to handle all of our javascript dependencies and most of our css ones as well. It doesn't do anything fancy other than put files in the node_modules directory. Disclaimer: This is mostly copy pasted feel free to open a PR if something can be improved.

Webpack

Now that we have many of our assets we don't want to go back in time too far and have our webpage make 40+ requests just to load javascript and css. Webpack exists, it's cool, let's try that out. With Webpack we can now minify / uglify our js / css and also control how many output files we have (Plus many many more features). Disclaimer: This is mostly copy pasted feel free to open a PR if something can be improved.

Workflow

How exactly do Webpack and npm hook into Java now? Simple, it's just input and output files. In our Webpack config we are outputting everything into an assets directory. All we need to do is add this directory to our class path and Java can now read the files. While developing simply run webpack --progress --watch and you can quickly develop locally. Sometimes you need to restart when adding a brand new hbs template open a PR if you know how to fix that please. When building an executable jar you just need to remember to run webpack before you build the Jar and you are good to go.

Demo Site

You should be able to clone the repo and run the WebpackServer example. As long as you run webpack --progress --watch everything should work locally. If there are issues loading assets try changing the assets.root property found here. This is a hack to make files load faster in the IDE, for some reason even with native hooks turned on the IDE's are slow to pick up file changes. Here are screen shots of the four pages. If you are not a strong HTML / CSS developer consider using a site template to make your website stand out.