Forem: Vuong Dang

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

Vuong Dang — Thu, 16 Nov 2023 21:56:27 +0000

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

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>

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

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

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>

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/

Update pom.xml, add dropwizard-assets dependency

<dependency>
    <groupId>io.dropwizard</groupId>
    <artifactId>dropwizard-assets</artifactId>
</dependency>

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"))
    }

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>
  )
}

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

Database Testing with Testcontainers and Kotlin Exposed ORM

Vuong Dang — Thu, 29 Jun 2023 02:01:45 +0000

In this article, we will explore how to use Testcontainers
and Exposed, a lightweight ORM framework for Kotlin, to create a controlled environment for testing MySQL Database operations.

Setup a Kotlin project with gradle

First we install the latest gradle version using SDKMAN

sdk install gradle 8.1.1

Then create a new Gradle project using gradle init with Kotlin support

mkdir kotlin-project
cd kotlin-project
gradle init --type kotlin-application --dsl kotlin

Add dependencies to gradle (build.gradle.kts)

  // Exposed
  implementation("org.jetbrains.exposed", "exposed-core", "0.40.1")
  implementation("org.jetbrains.exposed", "exposed-dao", "0.40.1")
  implementation("org.jetbrains.exposed", "exposed-jdbc", "0.40.1")
  // MySQL JDBC Driver
  implementation("mysql:mysql-connector-java:8.0.19")

  // Connection pool
  implementation("com.zaxxer:HikariCP:5.0.1")

  // Test containers
  testImplementation("org.testcontainers:mysql:1.18.3")

Define the entity using Exposed DAO flavor

Exposed supports DSL (Domain Specific Language) and DAO (Data Access Object).
The DAO flavor in Exposed is a lightweight ORM for performing CRUD operations on entities 1.

object Users: LongIdTable() {
    val name = varchar("name", 50)
}

class User(id: EntityID<Long>) : LongEntity(id) {
    companion object : LongEntityClass<User>(Users)

    var name by Users.name
}

LongIdTable uses an auto-incrementing Long primary key

Use Testcontainers to start MySQL container, and perform CRUD operations on User entity

We use a single test container to improve test speed by avoiding repetitive container startup and shutdown for every test or test-class

object TestDatabase {

    private val mySQLContainer: MySQLContainer<Nothing> = MySQLContainer<Nothing>("mysql:8.0.26").apply {
        withDatabaseName("test-db")
        withUsername("test-user")
        withPassword("test-password")
        start() // Start the container
    }

    init {
        val config = HikariConfig().apply {
            jdbcUrl = mySQLContainer.jdbcUrl
            username = mySQLContainer.username
            password = mySQLContainer.password
            driverClassName = "com.mysql.cj.jdbc.Driver"
            maximumPoolSize = 10
        }
        val dataSource = HikariDataSource(config)

        // This doesn't connect to the database but provides a descriptor for future use
        // In the main app, we would do this on system start up
        // https://github.com/JetBrains/Exposed/wiki/Database-and-DataSource
        Database.connect(dataSource)

        // Create the schema
        transaction {
            SchemaUtils.create(Users)
        }
    }
}

We create a simple test to test the crud operations.

Note: To run the tests on your local machine, you must have Docker installed and running.
If you're using a Mac, you can use Docker Desktop for Mac.

@TestInstance(TestInstance.Lifecycle.PER_CLASS)
class UserRepositoryTest {

    @BeforeAll
    fun setUp() {
        // Use the TestDatabase singleton to initialize the database
        TestDatabase
    }

    @Test
    fun crudUser() {
        transaction {
            // Create
            val newUser = User.new {
                name = "Alice"
            }

            // Read
            val retrievedUser = User.findById(newUser.id)
            assertEquals("Alice", retrievedUser?.name)

            // Update
            retrievedUser?.apply {
                name = "Bob"
            }

            val updatedUser = User.findById(newUser.id)
            assertEquals("Bob", updatedUser?.name)

            // Delete
            updatedUser?.delete()
            val deletedUser = User.findById(newUser.id)
            assertNull(deletedUser)
        }
    }
}

Summary

We've explored how to efficiently set up and automate Kotlin database testing using Testcontainers and the Exposed framework.

Testcontainers allow us to run isolated database instance in Docker containers
Exposed, with its lightweight DAO, make it easy to perform CRUD operations.
Using a single test container throughout our test suit significantly improves performance.

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

Getting Started with Spring Data Elasticsearch

Vuong Dang — Tue, 03 Nov 2020 17:02:38 +0000

In this article, I'd like to cover some basic steps on how to get an Elasticsearch node up and running and how to connect, index, and search data in Elasticsearch from a Java application using the Spring Data Elasticsearch library.

I also describe some common tasks e.g How to index a field so that we can do search and order on the same field. How to build the query to search and filter on multiple fields.

Create a new Springboot Project

Whenever I need a new Springboot project, I go to start.spring.io to generate it. Here's my setup:

After choosing the desired project name, and dependencies, click Generate, then extract the downloaded zip file. In this example, the project directory is spring-data-elasticsearch-example

Ensure Elasticsearch is up and running

To get started, I need to have Elasticsearch running so that my application can connect.

One simple option is to start a single Elasticsearch node with docker-compose
Since I already have docker and docker-compose installed on my mac (Docker Desktop). I create a elasticsearch.yml file and start the Elasticsearch container with docker-compose:

Create elasticsearch.yml in src/main/docker

cd spring-data-elasticsearch-example

mkdir -p src/main/docker && touch src/main/docker/elasticsearch.yml

With the following content:

version: '2'
services:
  my-elasticsearch:
    image: docker.elastic.co/elasticsearch/elasticsearch:7.9.2
    container_name: my-elasticsearch
    # volumes:
    #     - ~/data/my-elasticsearch/:/usr/share/elasticsearch/data/
    ports:
      - 9200:9200
    environment:
      - 'ES_JAVA_OPTS=-Xms1024m -Xmx1024m'
      - 'discovery.type=single-node'

Then start Elasticsearch container

docker-compose -f src/main/docker/elasticsearch.yml up -d

Elasticsearch is now up and running at http://localhost:9200/

More information can be found on the Elasticsearch documentation

Index data in ElasticSearch

Given that I have the following sample Entities: Book and Author. I would like to index all the Books and authors in an index called 'books'.

Create entities and define how we want to index

@Getter
@Setter
@Accessors(chain = true)
@EqualsAndHashCode
@ToString
@Document(indexName="books")
public class Book {
    @Id
    private String id;

    @MultiField(
        mainField = @Field(type = FieldType.Text, fielddata = true),
        otherFields = {
                @InnerField(suffix = "raw", type = FieldType.Keyword)
        }
    )
    private String name;

    @Field(type = FieldType.Text)
    private String summary;

    @Field(type = FieldType.Double)
    private Double price;

    @Field(type = FieldType.Object)
    private List<Author> authors;
}

In Book entity, I use different annotations like @Document, @id, @Field, @MultiField to instruct Elasticsearch how I want that Entity, and Properties to be indexed.

@Document(indexName="books") indicates that I want to store the books in an index called books. By default, the index mapping will be created I start the Java application. The @Document annotation has many attributes. More details can be found in the official documentation
- shards: the number of shards for the index.
- replicas: the number of replicas for the index.
- createIndex: Configuration whether to create an index on repository bootstrapping. The default value is true.
@Id: used for identity purpose, this helps query the book by id or update an existing book in Elasticsearch.
@Field: used for specifying the kind of data the field contains, such as strings or boolean values, and its intended use. The list of data types can be found in mapping-types documentation.

Additionally, analyzer, searchAnalyzer, and normalizer can be customized. In Elasticsearch, the standard analyzer is the default analyzer.

Here're how Book's properties are indexed using the above annotations:

summary has the Text type, and the price has the Double type.
name is indexed to both Text and Keyword fields using @MultiField annotation. The main Text field is analyzed for full-text search meanwhile the @InnerField raw is Keyword which will be left as-is in Elasticsearch and can be used for sorting (or filtering in case of Author's name below). Since raw is an inner field, we can access it as name.raw.
authors is indexed as a nested JSON object.

The Author entity

@Getter
@Setter
@Accessors(chain = true)
@EqualsAndHashCode
@ToString
public class Author {
    @Id
    private String id;

    @MultiField(
        mainField = @Field(type = FieldType.Text, fielddata = true),
        otherFields = {
                @InnerField(suffix = "raw", type = FieldType.Keyword)
        }
    )
    private String name;
}

The Author entity can contain other nested objects e.g Contacts but for this blog post, I keep it simple as is.

Similar to Book's name, Author's name is also indexed as Text (mainField) and Keyword (innerField raw) so that we can search on author.name field, and Filter and Sort on author.name.raw field.

Configure the High Level REST Client

The next step is configuring the connection to my running Elasticserach and creating the repository so that I can index and search for books.

@Configuration
@EnableElasticsearchRepositories(
        basePackages = "dev.vuongdang.springdataelasticsearchexample.repository"
)
public class ElasticSearchConfig extends AbstractElasticsearchConfiguration {

    @Override
    @Bean
    public RestHighLevelClient elasticsearchClient() {

        final ClientConfiguration clientConfiguration = ClientConfiguration.builder()
                .connectedTo("localhost:9200")
                .build();

        return RestClients.create(clientConfiguration).rest();
    }
}

It is required to configure the ClientConfiguration, however, the higher-level abstractions Elasticsearch Repositories are normally used in the application.

@EnableElasticsearchRepositories activates the Repository support for all repositories interfaces defined in the dev.vuongdang.springdataelasticsearchexample.repository package. Thanks to Spring Data Elasticsearch, I can define the interface, and the implementation will be handled automatically.

The ClienConfiguration above can be set options for SSL, connect and socket timeouts, headers, and other parameters. For example:

ClientConfiguration clientConfiguration = ClientConfiguration.builder()
  .connectedTo("localhost:9200")                      
  .useSsl()                                                             
  .withConnectTimeout(Duration.ofSeconds(5))                            
  .withSocketTimeout(Duration.ofSeconds(3))                             
  .withBasicAuth(username, password);

The above ClientConfiguration connects to localhost:9200. In case you use app.bonsai.io the configuration may look like this:

final ClientConfiguration clientConfiguration = ClientConfiguration.builder()
                .connectedTo("sass-testing-1537538524.eu-central-1.bonsaisearch.net:443")
                .usingSsl()
                .withBasicAuth("<username>", "<password>")
                .build();

Create the Repository

/**
 * Define the repository interface. The implementation is done by Spring Data Elasticsearch
 */
public interface BookSearchRepository extends ElasticsearchRepository<Book, String> {

    List<Book> findByAuthorsNameContaining(String name);
}

Let's create a Test to illustrate how to use the Repository. I created 3 books, and then ensure these operations run properly: save, find by Id, and find by author's name.

@SpringBootTest
class BookServiceTest {
    @Autowired
    private BookService bookService;

    @Autowired
    private BookSearchRepository bookSearchRepository;

    @Autowired
    private ElasticsearchOperations elasticsearchOperations;

    public static final String BOOK_ID_1 = "1";
    public static final String BOOK_ID_2 = "2";
    public static final String BOOK_ID_3 = "3";

    private Book book1;
    private Book book2;
    private Book book3;

    @BeforeEach
    public void beforeEach() {
        // Delete and recreate index
        IndexOperations indexOperations = elasticsearchOperations.indexOps(Book.class);
        indexOperations.delete();
        indexOperations.create();
        indexOperations.putMapping(indexOperations.createMapping());

        // add 2 books to elasticsearch
        Author markTwain = new Author().setId("1").setName("Mark Twain");
        book1 = bookSearchRepository
                .save(new Book().setId(BOOK_ID_1).setName("The Mysterious Stranger")
                        .setAuthors(singletonList(markTwain))
                        .setSummary("This is a fiction book"));

        book2 = bookSearchRepository
                .save(new Book().setId(BOOK_ID_2).setName("The Innocents Abroad")
                        .setAuthors(singletonList(markTwain))
                        .setSummary("This is a special book")
                );

        book3 = bookSearchRepository
                .save(new Book().setId(BOOK_ID_3).setName("The Other Side of the Sky").setAuthors(
                        Arrays.asList(new Author().setId("2").setName("Amie Kaufman"),
                                new Author().setId("3").setName("Meagan Spooner"))));
    }

    /**
     * Read books by id and ensure data are saved properly
     */
    @Test
    void findById() {
        assertEquals(book1, bookSearchRepository.findById(BOOK_ID_1).orElse(null));
        assertEquals(book2, bookSearchRepository.findById(BOOK_ID_2).orElse(null));
        assertEquals(book3, bookSearchRepository.findById(BOOK_ID_3).orElse(null));
    }

    @Test
    public void query() {
        List<Book> books = bookSearchRepository.findByAuthorsNameContaining("Mark");

        assertEquals(2, books.size());
        assertEquals(book1, books.get(0));
        assertEquals(book2, books.get(1));
    }
}

In the beforeEach method, I recreate the index and insert 3 books to ensure that every test I have fresh new data.

You can go to localhost:9200/books/_search to see all the indexed books.

Or go to localhost:9200/books/_mapping to see the detailed mapping of each field.

Search and Filter

In BookSearchRepository, I can name a method and it will be resolved to Elasticsearch JSON query automatically. Another way is to define the JSON query using @Query annotation. For example:

 @Query("{\"match\": {\"name\": {\"query\": \"?0\"}}}")
    Page<Book> findByName(String name, Pageable pageable);

These are awesome for simple queries, but in practice, we usually provide the end user with a search field, some filters, and sorting. To achieve this I prefer using the built-in query builder because of its flexibility.

Let's create a BookService to illustrate how to use query builder to form a complex query for searching on multi fields, filtering and sorting

@Service
public class BookService {

    @Getter
    @Setter
    @Accessors(chain = true)
    @ToString
    public static class BookSearchInput {
        private String searchText;
        private BookFilter filter;
    }

    @Getter
    @Setter
    @Accessors(chain = true)
    @ToString
    public static class BookFilter {
        private String authorName;
    }

    @Autowired
    private ElasticsearchOperations operations;

    public SearchPage<Book> searchBooks(BookSearchInput searchInput, Pageable pageable) {

        // query
        QueryBuilder queryBuilder;
        if(searchInput == null || isEmpty(searchInput.getSearchText())) {
            // search text is empty, match all results
            queryBuilder = QueryBuilders.matchAllQuery();
        } else {
            // search text is available, match the search text in name, summary, and authors.name
            queryBuilder = QueryBuilders.multiMatchQuery(searchInput.getSearchText())
                    .field("name", 3)
                    .field("summary")
                    .field("authors.name")
                    .fuzziness(Fuzziness.ONE) //fuzziness means the edit distance: the number of one-character changes that need to be made to one string to make it the same as another string
                    .prefixLength(2);//The prefix_length parameter is used to improve performance. In this case, we require that the first three characters should match exactly, which reduces the number of possible combinations.;
        }

        // filter by author name
        BoolQueryBuilder filterBuilder = boolQuery();
        if(searchInput.getFilter() != null && isNotEmpty(searchInput.getFilter().getAuthorName())){
            filterBuilder.must(termQuery("authors.name.raw", searchInput.getFilter().getAuthorName()));
        }

        NativeSearchQuery query = new NativeSearchQueryBuilder().withQuery(queryBuilder)
                .withFilter(filterBuilder)
                .withPageable(pageable)
                .build();

        SearchHits<Book> hits = operations.search(query, Book.class);

        return SearchHitSupport.searchPageFor(hits, query.getPageable());
    }
}

To test this BookService#searchBook, I add one more test method to BookServiceTest above

@Test
    void searchBook() {

        // Define page request: return the first 10 results. Sort by book's name ASC
        Pageable pageable = PageRequest.of(0, 10, Direction.ASC, "name.raw");

        // Case 1: search all books: should return 3 books
        assertEquals(3, bookService.searchBooks(new BookSearchInput(), pageable)
                .getTotalElements());

        // Case 2: filter books by author Mark Twain: Should return [book2, book1]
        SearchPage<Book> booksByAuthor = bookService.searchBooks(
                new BookSearchInput().setFilter(new BookFilter().setAuthorName("Mark Twain")),
                pageable); // sort by book name asc
        assertEquals(2, booksByAuthor.getTotalElements());

        Iterator<SearchHit<Book>> iterator = booksByAuthor.iterator();
        assertEquals(book2, iterator.next().getContent()); // The Innocents Abroad
        assertEquals(book1, iterator.next().getContent()); // The Mysterious Stranger


        // Case 3: search by text 'special': Should return book 2 because it has summary containing 'special'
        // one typo in the search text: (specila) is accepted thanks to `fuziness`
        SearchPage<Book> specialBook = bookService
                .searchBooks(new BookSearchInput().setSearchText("specila"), pageable);// book 2
        assertEquals(1, specialBook.getTotalElements());

        assertEquals(book2, specialBook.getContent().iterator().next().getContent()); // The Innocents Abroad
    }

Please notice in Case 3 above, the search text has one typo it is specila instead of special. But it works as expected because I set .fuzziness(Fuzziness.ONE) in the query builder.

Logging

I find it useful to log the JSON query on the development environment to ensure that we produce proper queries. This log can be enabled in the application.properties

logging.level.org.springframework.data.elasticsearch.client.WIRE=trace

Now when I run the searchBook test method, I can see the Elasticsearch query in the log file as below:

{
    "from": 0,
    "size": 10,
    "query": {
        "multi_match": {
            "query": "special",
            "fields": [
                "authors.name^1.0",
                "name^3.0",
                "summary^1.0"
            ],
            "type": "best_fields",
            "operator": "OR",
            "slop": 0,
            "fuzziness": "1",
            "prefix_length": 2,
            "max_expansions": 50,
            "zero_terms_query": "NONE",
            "auto_generate_synonyms_phrase_query": true,
            "fuzzy_transpositions": true,
            "boost": 1.0
        }
    },
    "post_filter": {
        "bool": {
            "adjust_pure_negative": true,
            "boost": 1.0
        }
    },
    "version": true,
    "sort": [
        {
            "name.raw": {
                "order": "asc"
            }
        }
    ]
}

Conclusion

In this blog post, I cover the following topics:

Get ElasticSearch up and running
Configure a Springboot project to work with Elasticsearch
Index a POJO object
Create index and mapping in Elasticsaerch
Search, Filter and Sort using Spring Data Elasticsearch

The example source code can be found here in Github

How to use Fontawesome in Next.js

Vuong Dang — Wed, 19 Aug 2020 02:55:01 +0000

Overview

This article discusses how to use Fontawesome 5 - free version in a Next.js project. The code example is written in TypeScript.

1. Install dependencies

npm i --save @fortawesome/fontawesome-svg-core \
             @fortawesome/free-solid-svg-icons \
             @fortawesome/free-brands-svg-icons \
             @fortawesome/react-fontawesome

2. Use it like a pro

This is the easiest way to get started, you import individual icons and use it directly in your component.

import { ReactElement } from 'react'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function MyComponent(): ReactElement {
  return <FontAwesomeIcon icon={faCoffee} />
}

3. A little more complex way

Imagine you use the same icon in multiple components but you don't want to import it in every component.

This can be done by defining a library in your pages/_app.tsx.

In the code below, You add all brand icons fab, and a single coffee icon faCoffee into the library.

import { AppProps } from 'next/app'
import '../styles/index.css'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { ReactElement } from 'react'

library.add(fab, faCoffee)

export default function MyApp({ Component, pageProps }: AppProps): ReactElement {
  return <Component {...pageProps} />
}

In your component, you can refer to the icon in the library.

In your library, you added all brand icons fab. Therefore you will refer to a particular icon (e.g twitter) in the set by specifying ['fab', 'twitter']. On the other hand, you imported a single faCoffee so you refer to the icon name coffee directly.

import { ReactElement } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function IconFromLibrary(): ReactElement {
  return (
    <>
      <FontAwesomeIcon icon={['fab', 'twitter']} />
      <FontAwesomeIcon icon="coffee" />
    </>
  )
}

Conclusion

This article covered the configuration and two ways you can use Fontawesome in your next.js project.

More information can be found in the
react-fontawesome documentation.

I hope that you like this post!
Thanks for reading!

Generate Typescript from Java

Vuong Dang — Wed, 22 Jul 2020 17:27:24 +0000

If you develop the backend with Java and the frontend with TypeScript, chances are you might need to have the same DTO classes/interfaces on both ends.

In this case, wouldn't it be great if we can define the DTO classes on the backend, and generate Typescript classes automatically.

Thanks to typescript-generator, we just have to configure the maven plugin or create a Gradle task.

For Maven

Add the following plugin to your pom file

<plugin>
    <groupId>cz.habarta.typescript-generator</groupId>
    <artifactId>typescript-generator-maven-plugin</artifactId>
    <version>2.24.612</version>
    <executions>
        <execution>
            <id>generate</id>
            <goals>
                <goal>generate</goal>
            </goals>
            <phase>process-classes</phase>
        </execution>
    </executions>
    <configuration>
        <jsonLibrary>jackson2</jsonLibrary>
        <classes>
            <class>com.example.demo.dto.CompanyDto</class>
        </classes>
        <outputFile>target/company.ts</outputFile>
        <outputKind>module</outputKind>
        <outputFileType>implementationFile</outputFileType>
        <mapClasses>asClasses</mapClasses>
        <mapEnum>asEnum</mapEnum>
        <nonConstEnums>true</nonConstEnums>
        <optionalProperties>useLibraryDefinition</optionalProperties>
    </configuration>
</plugin>

When you run ./mvnw clean install, the generated TypeScript file will be available under target/company.ts

For Gradle

Configure the plugin and Create a task

apply plugin: 'cz.habarta.typescript-generator'
buildscript {
    repositories {
        mavenCentral()
        jcenter()
    }
    dependencies {
        classpath group: 'cz.habarta.typescript-generator', name: 'typescript-generator-gradle-plugin', version: '2.24.612'
    }
}

generateTypeScript {
    jsonLibrary = 'jackson2'
    classes = [
            'com.example.demo.dto.CompanyDto'
              ]
    outputFile = 'build/company.ts'
    outputKind = 'module'
    outputFileType = 'implementationFile'
    mapClasses = 'asClasses'
    mapEnum = 'asEnum'
    nonConstEnums = true
    optionalProperties = 'useLibraryDefinition'
}

You can run the Gradle task manually: ./gradlew generateTypeScript or make another task in your build chain depends on it. [1]

In the above example, I added the following configurations to override the default behavior.

outputFile: Path and name of generated TypeScript file.
outputFileType: Output file format, can be:
- declarationFile (.d.ts)
- implementationFile (.ts)
mapClasses: Specifies whether Java classes will be mapped to TypeScript classes or interfaces. Supported values are:
- asInterfaces
- asClasses
mapEnum: Specifies how enums will be mapped. Supported values are:
- asUnion - creates type alias to union of string enum values
- asInlineUnion - creates union of enum values on places where the enum is used
- asEnum - creates string enum. Requires TypeScript 2.4
- asNumberBasedEnum - creates enum of named number values
nonConstEnums: If true generated enums will not have const keyword. This can be used only in implementation files
optionalProperties: Specifies how properties are defined to be optional. Supported values are:
- useSpecifiedAnnotations - annotations specified using optionalAnnotations or requiredAnnotations parameter
- useLibraryDefinition - examples: @JsonProperty(required = false) when using jackson2 library or @XmlElement(required = false) when using jaxb library
- all - all properties are optional

Learn more about configuring typescript-generator-maven-plugin plugin in the Configuration Documentation

The example with maven can be found here on GitHub.

Nextjs TailwindCSS Typescript Starter

Vuong Dang — Tue, 21 Jul 2020 05:50:37 +0000

Updated to v3.0: TailwindCSS 3.0 integrated JIT engine that generates the styles you need for your project on-demand. Therefore Tailwind no longer uses PurgeCSS.

I had a chance to integrate TailwindCSS into our existing AngularJS (Bootstrap) app and use it for developing new features. Even though it is hard for the migration, It is incredibly rewarding (Also for migrating Gulp to Webpack and start using TypeScript 😌)

Today I'm checking out Next.js by setting up a starter template with Nextjs, TailwindCSS and Typescript.

Source code for the template can be found here Github.

Create new next.js app

Run the following command in your Terminal and follow the wizard. As a result, a new directory containing the app will be created for you.

npx create-next-app

Start the app

Run the development server and Open http://localhost:3000 with your browser to see the result.

npm run dev

Create src directory and move pages into src (Optional)

The src directory is very common in many apps and Next.js supports it by default.

cd <your-app-directory>
mkdir src
mv pages src

Support TypeScript

Next.js supports TypeScript out of the box. More info here

touch tsconfig.json
npm i -D typescript @types/react @types/node

Restart development server by running npm run dev, you will see this in the console:
We detected TypeScript in your project and created a tsconfig.json file for you.

Test TypeScript support by renaming index.js to index.tsx and restart development server

mv src/pages/index.js src/pages/index.tsx

Integrate TailwindCSS

Install TailwindCSS, postcss. More information can be found in the official TailwindCSS documentation. Installation, Optimizing for Production

npm i -D tailwindcss postcss-import autoprefixer

Configure PostCSS

Create postcss.config.js

touch postcss.config.js

module.exports = {
  plugins: [
    'tailwindcss',
    'autoprefixer',
  ]
}

Configure content sources

Create tailwind.config.js add a content array containing the paths to all of your source files that contain Tailwind class names. Since Twailwind uses JIT engine, if you don't configure the content, your compiled CSS will be empty. See content configuration for more detail.

npx tailwindcss init

module.exports = {
  content: ['./src/components/**/*.{ts,tsx,js,jsx}', './src/pages/**/*.{ts,tsx,js,jsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add TailwindCSS to your css

Create src/styles/index.css.

mkdir src/styles && touch src/styles/index.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';

/* Your own custom component styles */

@import 'tailwindcss/utilities';

Create a src/pages/_app.tsx file Then add styles/index.css to your application by import the CSS file.

touch src/pages/_app.tsx

import { AppProps } from 'next/app'
import '../styles/index.css'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

Forem: Vuong Dang

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

Create a dropwizard app

Add Next.js application using create-next-app

Build Next.js webapp with maven plugin

Serve static assets from the root path

Fetch data from dropwizard rest api

Summary

Database Testing with Testcontainers and Kotlin Exposed ORM

Setup a Kotlin project with gradle

Add dependencies to gradle (build.gradle.kts)

Define the entity using Exposed DAO flavor

Use Testcontainers to start MySQL container, and perform CRUD operations on User entity

Summary

Further Reading

Getting Started with Spring Data Elasticsearch

Create a new Springboot Project

Ensure Elasticsearch is up and running

Index data in ElasticSearch

Create entities and define how we want to index

Configure the High Level REST Client

Create the Repository

Search and Filter

Logging

Conclusion

How to use Fontawesome in Next.js

Overview

1. Install dependencies

2. Use it like a pro

3. A little more complex way

Conclusion

Generate Typescript from Java

For Maven

For Gradle

Nextjs TailwindCSS Typescript Starter

Create new next.js app

Start the app

Create src directory and move pages into src (Optional)

Support TypeScript

Integrate TailwindCSS

Configure PostCSS

Configure content sources

Add TailwindCSS to your css

Enjoy the power of Next.js TailwindCSS and TypeScript😍