React is one of the most popular libraries for creating web application frontends. With Spring Boot it’s easier than ever to create a CRUD backend for your React-fronted application. In this tutorial, we’ll tie those together and then use Stormpath to add authentication and authorization protocols.

We’ll start by creating a static data view using React. Then we will create a REST backend with Spring Boot, tie it in, and add user security with Stormpath. Everything should be straight-forward, even if you’ve never used React before.

The source code that backs this post can be found in this GitHub repo.

Serving the Front

Normally React applications are served up using Node.js, but if you’re a Java dev you’ll likely be super comfortable with this Spring Boot approach.

Initially, you’ll put the whole application in one file, index.html. To tell Spring Boot to serve it as the homepage you can use the @Controller annotation.

Create an empty directory and put the above code into src/main/java/tutorial/HomeController.java. Spring Boot will then look for src/main/resources/static/index.html when you load the site.

Create a pom.xml and a Spring Boot application class. Use the following for your POM.

Put the following into src/main/java/tutorial/Application.java.

When you start the server with mvn spring-boot:run and visit localhost:8080 you should see a blank page with the title “React + Spring”.

React + Spring

Remove Restarts

Normally you’d have to restart your server each time you make a change to your front-end which is a pain. Using Spring Boot’s developer tools allows us to get around this. Add the following dependency to your POM.

Also add this configuration to your Spring Boot Maven Plugin:

Now, when you make a change to your application, or recompile any classes, it should update when you refresh your browser.

React Barebones HTML

On to React! The most basic React page has three things: a root element, JavaScript imports, and a script tag.

The root element is where React will insert our view HTML. The imports pull in three libraries—two for React itself and another to translate our view template using babel.

Note: for ease of testing we are pulling in libraries using a CDN but normally you would use something like webpack to combine all your Javascript into one file.

Now put your React code inside the script tag.

React Basics

As described in the thinking in react tutorial, you should start coding your application by breaking the interface down into components.

Here you’ve created two—one for a table of employees and another for an employee entry. Each component then needs a render function which describes the HTML to generate.

Here’s where the Babel compiler comes in to convert HTML code into the correct React statements. Note how the div tags are returned from the render statement.

You need to tell React to insert the parent component’s HTML into the root element. This is done using the ReactDOM.render method.

By refreshing the browser you should see the simple text element you created.

React + Spring employee table

To see the HTML React inserted into the root element you can use the browser’s inspector (Ctrl-Shift-J in Chrome).

Browser inspector

Tying Components Together

Now that you have components, let’s tie them together. You can start by trying to render hard-coded data; you’ll use the REST server later.

Above the ReactDOM command enter the following:

Then add employees={EMPLOYEES} when you instantiate your table.

As you might expect, this passes the data into a variable named employees. Inside EmployeeTable you can access this using this.props. Let’s use that to generate a table with a row for each employee.

This instantiates a new Employee class for each element in the data (setting the employee attribute) and pushes it to an array. Then {rows} drops in the required HTML from the child class.

Now all you need do is update the render method on Employee.

You can add Bootstrap to make the table look nice. Add the following just below your script import tags:

Then surround your main table with a container div and give the table element some Bootstrap class names.

Refreshing your browser should give a nice view of the data you hard-coded!

86263098

Adding Real Data

To use data objects coming from the server, you need to add a server! Doing this with Spring Boot is super simple. Inside src/main/java/tutorial/Employee.java add the following code:

This is our bean. Note: the @Data annotation is from Project Lombok.

Now, create a repository using Spring Data JPA.

To load data, create a CommandLineRunner implementation that uses the repository to create new records in the database.

The only thing left is pulling in dependencies. Adding the following to your pom.xml will allow your repository to become a REST endpoint.

You’ll also need to include Project Lombok (which lets you ignore creating getters and setters for your beans).

And you need a database (which Spring Boot autoconfigures). You can use H2, which is embedded (i.e. in memory / won’t last a reboot).

And that’s it! If you reboot now you’ll have a functioning REST server with data.

Mapping the URL

If you add the following to src/main/resources/application.properties then all your REST endpoint calls will be at localhost:8080/api

Calling localhost:8080/api/employees from the command line should give a list of the data you loaded.

React and REST

Now you need to pull the data into your React view from the REST endpoint. You can do this with jQuery. Add the following import to your HTML:

Now create a wrapper class that returns an EmployeeTable in its render method.

You have to set state first by using getInitialState to initialise, and then componentDidMount to do what’s needed when everything is loaded.

Now replace the main ReactDOM.render with your new class.

On refresh you should see the same view as before, except now the data is being loaded from the server.

Interactivity

The last thing you’ll want for your frontend is interactivity. Let’s add a delete button to see how that might work.

Add the following column to your employee render.

You’ll write the handleDelete method in a sec. After adding another heading to the employee table class, you should see buttons appear alongside each entry.

React + Spring Boot Interactivity

Deleting from the Server

Before you send delete requests to the backend, it’s a good idea to add notification messages. For that you can use Toastr which will allow you to show popups. Include the following at the top of your HTML:

Now in your script you can send messages with commands like toastr.error('something went wrong').

Let’s test that! Change your employee class to the following:

This sets a display state which determines whether to render or not. If the employee is deleted successfully, this variable is set to true. The handleDelete method sends a delete request to the server (using the href you got back from the get request). If successful, display is set to false and the render is updated. Otherwise, Toastr notifies the user that an error occurred.

Try deleting an entry and refreshing the page. It should stay deleted.

Note: Restarting the server will bring back the same data since you’re using an in-memory database.

Add User Authentication

Let’s add one final feature to our React application, Stormpath for user authentication. You’ll need a forever-free developer account with Stormpath.

The first thing you need do is put your Stormpath application details inside of your application.properties.

Note: For security reasons you should not store your Stormpath keys inside of project files. Rather use environment variables. See here.

Next, add the Stormpath starter to your Maven dependencies.

You’ll also need to move your index.html file to src/main/resources/templates This is because Stormpath’s Spring Boot starter uses the Thymeleaf templating library by default. Change the HomeController to return index as well.

You’ll also need to move your React code into a separate file. This is because Thymeleaf won’t like some of the characters. Move the code from the inside of the script tag into src/main/webapp/public/app.js. This folder is open to the public by default. Then import this script at the bottom of your HTML.

Then create a security adapter which calls apply on stormpath().

Now when you reboot your server and try reach the homepage you’ll be prompted with a login page.

Login or create an account

Typing in the details attached to the Stormpath application you put in application.properties should take you to the data view page as before.

Logging Out

You need to be able to log out as well. This is as easy as adding a form that sends a post to /logout (which Stormpath sets up by default).

You can surround both the React root element and the form with a Bootstrap container for better alignment.

3245088

Clicking the logout button should take you back to the login screen as before.

Set up Authorization

Lastly, you’ll want to only let users with the correct access delete employees. To lock things down, you can use Spring Security’s PreAuthorize annotation. Change the repository code to the following:

Now only users with the authority ROLE_ADMIN will be able to delete. If you restart your server and try to click delete you should get a message saying “Access is denied”.

36408723

To give a user the required rights, you need to add them to a Stormpath group via the Admin Console.

73134913

In this example, there is a group called Supervisor that’s been attached to the relevant application. To integrate with this group, you simply need to replace the ROLE_ADMIN string with the HREF of the group and restart. If the user that’s logged in is a member of the Supervisor group (see Accounts), you should be allowed to delete.

Done and Dusted

Just like that you have created a compliant CRUD web application with authorization and React as the front-end. I hope you found this tutorial useful! If you have any questions about integrating React, Spring Boot and Stormpath, please leave a comment.

To see a more complete React application using a Spring Boot backend see React.js and Spring Data REST.

  • Mochamad Thariq Januar

    Thanks for the clean tutorial, it works for me.
    But i have an error message in the browser console, the error warning : each child must have a unique key.
    i think you must define key from props for every row in the table. Thank you

    • Karl Penzhorn

      That’s strange. It works fine for me. Did you clone the repo, or write it up yourself ?

      Thanks for the kind words.

  • NiiloR

    Hi Karl!

    I’ve never tried the H2 database before and I was just wondering what might you need for the server side when you’re actually trying to post something?

    • Karl Penzhorn

      Hi NiiloR.

      H2 is an in-memory database. So you can post but all changes will be wiped when the server restarts