Packaging Backend and Frontend with Maven

In the previous chapter, we learned what Cypress is and its benefits. We also learned how to write Cypress end-to-end tests and how to run them. Finally, we learned how to intercept HTTP requests to mock responses.

This chapter will teach you how to combine your Angular and Spring Boot applications and then run them on your local machine.

In this chapter, we will cover the following topics:

• What is frontend-maven-plugin?
• Adding configurations to Spring Boot and Angular’s integration
• Packaging Spring Boot
• Running the JAR file

Technical requirements

The following link will take you to the finished version of code for this chapter: https://github.com/PacktPublishing/Spring-Boot-and-Angular/tree/main/Chapter-16/superheroes.

What is frontend-maven-plugin?

Okay – before I answer the question of what frontend-maven-plugin is, let’s see how we can package our application. We can build Spring Boot to generate a JAR file and create a production build of Angular as well.

But what if we can create a JAR file for Spring Boot that will also contain the production build of Angular inside it? The approach of putting the frontend and the backend in a single JAR file will provide us with an easier way to deploy the application to test and production environments.

It will allow us to manage a single path for the API and the frontend application. To do this, we will require a Maven plugin called frontend-maven-plugin (https://github.com/eirslett/frontend-maven-plugin), which will help us create a JAR file that contains both our backend and frontend.

Some requirements ensure that our backend and frontend will work together. In the next section, we’ll find out what configurations we need in...

Adding configurations to Spring Boot and Angular’s integration

In this section, we will write some configurations in the Spring Boot application and the Angular application to ensure that Spring Boot will run in production and that Angular will render the web application’s user interface.

First, let’s move the Angular app to the directory of our Spring Boot application.

Adding the Angular app to the Spring Boot project

In this section, we will move the Angular app to the Spring Boot project. By doing this, there will be an Angular project inside the Spring Boot project.

To start, create a new folder named frontend inside the Spring Boot project. Move all the files and folders of the Angular application inside the frontend folder, like so:

Figure 16.1 – The frontend folder inside the Spring Boot project

Figure 16.1 shows all the Angular files and folders inside the frontend folder, which is inside the Spring Boot...

Packaging Spring Boot

In this section, we will package the Spring Boot application and the Angular application. The idea is to combine the two applications, giving you one single JAR file to deploy. Let’s learn how to do this.

After all the configurations we did, now, it’s a matter of running the following Maven commands in the same order:

mvn clean
mvn package

The mvn clean command cleans the Maven project by deleting the target directory, whereas the mvn package command builds the Maven project and creates an executable JAR file.

These two Maven commands are enough to create an executable JAR file with the Spring Boot and Angular packages inside it; see Figure 16.2:

Figure 16.2 – Target folder with the JAR file inside

Packaging the applications is simple since we already did all the hard work configuring the Angular and Spring Boot applications.

Now, we have the JAR file. In the next section, we will run the JAR file...

Running the JAR file

In this section, we will run the JAR file we have packaged and see that the Angular application communicates with the Spring Boot application. Follow these steps:

1. To run the application, you can either use the Run button via IntelliJ IDEA or use the following java command:

   java -jar superheroes-0.0.1-SNAPSHOT.jar

The preceding Java CLI command will run an executable JAR file. In the CLI, you will see that the Tomcat web server has started on port 8080.

2. Go to http://localhost:8080; you will be redirected to http://localhost:8080/login, which consists of a login form. Figure 16.3 shows this login form:

Figure 16.3 – Login form

3. Try to log in and navigate to the anti-heroes page, where you can create new heroes or villains using the form:

Figure 16.4 – Anti-heroes form

Figure 16.4 shows that everything is working on the anti-heroes form, from signing in to using...

Summary

In this chapter, you learned that the frontend-maven-plugin and antrun-maven-plugin plugins can help you package your web client and Spring Boot application as one executable JAR file to make the deployment easy. You also learned how to run a JAR file on your local machine that helps you prepare your application for deployment.

In the next chapter, you will learn how to use GitHub Actions to prepare the applications for deployment. You will also learn how to use Heroku to create an instance of the database for the application and then deploy the application to Heroku.