DEV Community

Vuong Dang
Vuong Dang

Posted on • Originally published at vuongdang.dev

Easy Full-Stack Development with Next.js and Dropwizard in Kotlin

#kotlin #nextjs #dropwizard

I recently needed to add a simple frontend page to a Dropwizard-based service.
In this blog, I'll outline the steps to integrate Next.js with Dropwizard, based on this experience.

Let's start by setting up our Dropwizard application, which forms the backbone of our backend services.

Create a dropwizard app

  • Open IntelliJ and create a new Maven project

  • Install the Maven Wrapper
    Navigate to the project directory: cd dropwizard-kotlin-nextjs

    mvn -N io.takari:maven:wrapper
    # verify the maven wrapper
    mvnw clean
Enter fullscreen mode Exit fullscreen mode
  • Add kotlin support and dropwizard dependencies. More info on Kotlin doc 
    <properties>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
        <kotlin.version>1.9.20</kotlin.version>
    </properties>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>io.dropwizard</groupId>
                <artifactId>dropwizard-bom</artifactId>
                <version>4.0.4</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies>
        <dependency>
            <groupId>org.jetbrains.kotlin</groupId>
            <artifactId>kotlin-stdlib</artifactId>
            <version>${kotlin.version}</version>
        </dependency>
        <dependency>
            <groupId>io.dropwizard</groupId>
            <artifactId>dropwizard-core</artifactId>
        </dependency>
    </dependencies>

    <build>
        <sourceDirectory>${project.basedir}/src/main/kotlin</sourceDirectory>
        <testSourceDirectory>${project.basedir}/src/test/kotlin</testSourceDirectory>
        <plugins>
            <plugin>
                <groupId>org.jetbrains.kotlin</groupId>
                <artifactId>kotlin-maven-plugin</artifactId>
                <version>${kotlin.version}</version>

                <executions>
                    <execution>
                        <id>compile</id>
                        <goals>
                            <goal>compile</goal>
                        </goals>
                    </execution>

                    <execution>
                        <id>test-compile</id>
                        <goals>
                            <goal>test-compile</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
Enter fullscreen mode Exit fullscreen mode

With our Dropwizard app set up, we're ready to integrate the Next.js frontend.

Add Next.js application using create-next-app

We'll create a Next.js app under src/main/webapp

cd src/main
npx create-next-app@latest
Enter fullscreen mode Exit fullscreen mode

After the prompts, create-next-app will create webapp folder under src/main

Checkout installation guide for more info.

Build Next.js webapp with maven plugin

We'll use maven plugin to build the Next.js webapp, and copy the static outputs under src/main/resources/assets

  • Build Next.js as a Single-Page Application (SPA) Details To enable a static export, change the output mode inside next.config.js: 
    /** @type {import('next').NextConfig} */
    const nextConfig = {
        output: 'export',
    }
    module.exports = nextConfig
Enter fullscreen mode Exit fullscreen mode
  • Build Next.js app using frontend-maven-plugin Update pom.xml, configure the plugin to run npm install and npm run build. After running next build, Next.js will produce an out folder under src/main/webapp which contains the HTML/CSS/JS assets. We wil then configure the maven-resources-plugin to copy src/main/webapp/out/* to target/classes/assets 
    <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.14.2</version>
        <configuration>
            <workingDirectory>src/main/webapp</workingDirectory>
        </configuration>
        <executions>
            <execution>
                <id>install node and npm</id>
                <goals>
                    <goal>install-node-and-npm</goal>
                </goals>
                <!-- optional: default phase is "generate-resources" -->
                <phase>generate-resources</phase>
                <configuration>
                    <nodeVersion>v21.1.0</nodeVersion>
                </configuration>
            </execution>
            <execution>
                <id>npm install</id>
                <goals>
                    <goal>npm</goal>
                </goals>
                <phase>generate-resources</phase>
                <configuration>
                    <arguments>install</arguments>
                </configuration>
            </execution>
            <execution>
                <id>build nextjs</id>
                <goals>
                    <goal>npm</goal>
                </goals>
                <phase>generate-resources</phase>
                <configuration>
                    <arguments>run build</arguments>
                </configuration>
            </execution>
        </executions>
    </plugin>
    <plugin>
        <artifactId>maven-resources-plugin</artifactId>
        <version>3.3.1</version>
        <executions>
            <execution>
                <phase>generate-resources</phase>
                <goals>
                    <goal>copy-resources</goal>
                </goals>
                <configuration>
                    <outputDirectory>${project.build.directory}/classes/assets</outputDirectory>
                    <resources>
                        <resource>
                            <directory>src/main/webapp/out</directory>
                            <filtering>false</filtering>
                        </resource>
                    </resources>
                </configuration>
            </execution>
        </executions>
    </plugin>
Enter fullscreen mode Exit fullscreen mode

In this setup, we use the <phase>generate-resources</phase> to build Next.js and copy resources.
This phase is part of the Maven (mvn) compile process, streamlining the development workflow.
However, if your goal is to build Next.js and copy resources as part of the packaging step,
you could use prepare-package instead.

Serve static assets from the root path

Configure dropwizard to serve static assets under /, and REST api under /api/

  • Update config.yml 
server:
  rootPath: /api/
Enter fullscreen mode Exit fullscreen mode
  • Update pom.xml, add dropwizard-assets dependency 
<dependency>
    <groupId>io.dropwizard</groupId>
    <artifactId>dropwizard-assets</artifactId>
</dependency>
Enter fullscreen mode Exit fullscreen mode
  • Add AssetsBundle to the app. With this config, src/main/resources/assets/ would be served up from /, default to /index.html 
 override fun initialize(bootstrap: Bootstrap<Config>?) {
        bootstrap!!.addBundle(AssetsBundle("/assets/", "/", "index.html"))
    }
Enter fullscreen mode Exit fullscreen mode

More info here

Fetch data from dropwizard rest api

Let's update page.tsx to get data from the '/api/hello' endpoint and display the fetched message

'use client'
import Image from 'next/image'
import { useEffect, useState } from 'react';

export default function Home() {

  const [message, setMessage] = useState(''); // State to store the message

  useEffect(() => {
    // Call dropwizard REST api
    const fetchData = async () => {
      try {
        const response = await fetch('/api/hello');
        const helloDto = await response.json();
        setMessage(helloDto.message);
      } catch (error) {
        console.error('Error fetching data:', error);
        setMessage('Failed to load message');
      }
    };

    fetchData();
  }, []);

  return (
    <main className="container flex items-center p-4 mx-auto min-h-screen justify-center">
        <p className="font-mono text-sm xl:text-xl code p-4 bg-gradient-to-r from-indigo-500 via-blue-500 to-blue-400 rounded text-transparent bg-clip-text">
          {message}
        </p>
    </main>
  )
}
Enter fullscreen mode Exit fullscreen mode

Summary

This blog post shows how to integrate Next.js with Dropwizard,
covering the setup of both frameworks and demonstrating how to serve and fetch data in a full-stack kotlin application.

It's important to note that using Next.js with static export comes with certain limitations, which are detailed in the Next.js documentation on static exports.

You can find the complete source code for this tutorial on GitHub

Top comments (0)

Read next

0xaa4eb profile image

Ulyp: Recording Java code execution for faster debugging (Part 1)

Andrey Cheboksarov -

codeitbro profile image

How to Create a Gamertag Generator App Using Next.js

CodeItBro -

jordanahaines profile image

NextJS + Drizzle -- 8 Things I Learned Spinning up a New Project

Jordan Haines -

programminginblood profile image

Why Set.has() is Faster Than Array.includes() for Finding Items

Programming In Blood -