Jakarta EE and MicroProfile applications with React and PostgreSQL

Last Updated:  May 9, 2021 | Published: October 12, 2019

As now all major application server vendors are Jakarta EE 8 certified, we are ready to start a new era of enterprise Java. Most of the examples on the internet lack a full-stack approach and just focus on the backend. With this post, I want to share a simple full-stack example following best practices with Jakarta EE, MicroProfile,  React, and PostgreSQL. This includes a Flyway setup to migrate the database schema and TypeScript for the frontend application. At the end of this blog post, you'll be able to connect your React application to a Jakarta EE & MicroProfile backend to display data from PostgreSQL.

Setup the backend for Jakarta EE and MicroProfile

The backend uses Java 11 and Maven and to build the project. Next to the Jakarta EE and MicroProfile dependencies, I'm adding the PostgreSQL driver and Flyway for the schema migration:

The backend exposes one REST endpoint to retrieve all available books inside the database. To show you the MicroProfile integration inside a Jakarta EE application, I'm injecting a config property to limit the number of books:

The JPA Book entity looks like the following:

Furthermore, as the frontend application will, later on, run on a different port, we have to add a CORS filter for the JAX-RS resource:

Prepare the PostgreSQL database schema with Flyway

Flyway is a Java library to version your database schema and evolve it over time. For the schema migration I'm using a singleton EJB with the @Startup annotation to make sure the schema is updated only once:

It's important to set the transaction management for this class to TransactionManagementType.Bean. This will delegate the transaction handling to the bean and not the container. Besides the normal Jakarta EE transaction management, where the application server takes care of committing and rollback, Flyway will do it itself.

With this setup, Flyway will evaluate the schema version on every application startup. New schema changes are then applied to PostgreSQL if required. There are further ways to migrate the database schema with Flyway using a CLI or Maven Plugin.

For this simple example, I'm using two database scripts: one to create the table for the Book entity :

… and another script to populate some books:

Important note: Please make sure to add an empty flyway.location file to the folder of your migrations script (in this example /src/main/resources/db/migration) to use Flyway with Open Liberty.

Prepare Open Liberty for PostgreSQL

The Open Liberty application server recently announced (since 19.0.0.7) its first-class support for PostgreSQL. With this, the configuration of the JDBC data source requires a little bit less XML code.

We still have to provide the JDBC driver for PostgreSQL and link to it in the server.xml file. As I'm using Docker for this example, I'm extending the default Open Liberty image to add the custom server.xml and the JDBC driver. You can find the latest JDBC driver for PostgreSQL on Maven Central.

Next, we configure Open Liberty for MicroProfile 3.0 & Jakarta EE 8 (the javaee-8.0 feature works for Jakarta EE as well) and our PostgreSQL data source :

Make sure to add the DefaultDataSource as an id for the dataSource configuration, so JPA will take it without any further configuration.

PS: If you are looking for a reference guide to set up the JDBC data source on a different application server, have a look at this cheat sheet.

Create the React application with TypeScript

For this example, React and TypeScript is used to create the frontend application. To bootstrap a new React application with TypeScript you can use create-react-app as the following:

This creates a new React project with everything you need to start. In addition, I've added semantic-ui-react to get some pre-built components:

The TypeScript types are already included in the packages above and you don't have to install anything else.

Next, we can start by creating the React components for this application. To reduce complexity, I'll just use the already provided App component and a BookTable component. The App is going to fetch the data from our Jakarta EE backend and pass it to the BookTable component to render the data inside a table.

Both components are functional components and the data is fetched with a React Effect Hook and the Fetch browser API:

Inside the BookTable we can use the Table component from semantic-ui-react to render the result:

For the frontend deployment, I'm using an nginx Docker image and copy the static files to it:

The final result of Jakarta EE, MicroProfile, React, and PostgreSQL

Once everything is up and running, the frontend should look like the following:

React Table filled by Jakarta EE backend

You can find the whole source code on GitHub and instructions to deploy the example on your local machine.

If you are looking for further quickstart examples like this, take a look at the Start Here overview.

Have fun creating Jakarta EE & MicroProfile applications with React and PostgreSQL,

Phil

>