How To Develop and Build Angular App With Java Backend

Learn How you develop and build with an example project

There are so many ways we can build Angular apps and ship for production. One way is to build Angular with NodeJS or Java and another way is to build the angular and serve that static content with NGINX web server. With Java we have to deal with the server code as well, for example, you need to load index.html page with java.

In this post, we will see the details and implementation with Java. We will go through step by step with an example.

• Introduction
• Prerequisites
• Example Project
• How To Build and Develop The Project
• How To Build For Production
• Summary
• Conclusion

Introduction

Angular is a javascript framework for building web apps and it doesn’t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of Angular with all the dependencies(CSS and js files) in the browser. In this case, we are using java as the webserver which loads Angular assets and accepts any API calls from the Angular app.

If you look at the above diagram all the web requests without the /api will go to Angular routing. All the paths that contain /api will be handled by the Java server.

Prerequisites

There are some prerequisites for this article. You need to have java installed on your laptop and how http works. If you want to practice and run this on your laptop you need to have these on your laptop.

• Java
• Angular CLI
• Typescript
• VSCode
• ngx-bootstrap
• Maven

Example Project

This is a simple project which demonstrates developing and running Angular application with Java. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.

As you add users we are making an API call to the Java server to store them and get the same data from the server when we retrieve them. You can see network calls in the following video.

Here is a Github link to this project. You can clone it and run it on your machine.

// clone the project
git clone https://github.com/bbachi/angular-java-example.git

// Run Angular on port 4200

cd /src/main/ui
npm install
npm start

// Run Java Code on 8080
mvn clean install
java -jar target/users-0.0.1-SNAPSHOT.jar

How To Build and Develop The Project

Usually, the way you develop and the way you build and run in production are completely different. Thatswhy, I would like to define two phases: Development phase and Production phase.

In the development phase, we run the java server and the Angular app on completely different ports. It’s easier and faster to develop that way. If you look at the following diagram the Angular app is running on port 4200 with the help of a webpack dev server and the java server is running on port 8080.

Project Structure

Let’s understand the project structure for this project. We need to have two completely different folders for java and angular. It’s always best practice to have completely different folders for each one. In this way, you will have a clean architecture or any other problems regarding merging any files.

If you look at the above project structure, all the Angular app resides under the src/main/ui folder and Java code resides under the src/main/java folder. All the resources are under the folder /src/main/resources such as properties, static assets, etc

Java API

We use spring boot and a lot of other tools such as Spring Devtools, Spring Actuator, etc under the spring umbrella. Nowadays almost every application has spring boot and it is an open-source Java-based framework used to create a micro Service. It is developed by the Pivotal Team and is used to build stand-alone and production-ready spring applications.

We start with Spring initializr and select all the dependencies and generate the zip file.

Once you import the zip file in the eclipse or any other IDE as a Maven project you can see all the dependencies in the pom.xml. Below is the dependencies section of pom.xml.

Here are the spring boot file and the controller with two routes one with GET request and another is POST request.

Configure H2 Database

This H2 Database is for development only. When you build this project for production you can replace it with any database of your choice. You can run this database standalone without your application. We will see how we can configure with spring boot.

First, we need to add some properties to application.properties file under /src/main/resources

Second, add the below SQL file under the same location.

Third, start the application and spring boot creates this table on startup. Once the application is started you can go to this URL http://localhost:8080/api/h2-console and access the database on the web browser. Make sure you have the same JDBC URL, username and password as in the properties file.

Let’s add the repository files, service files, and entity classes as below and start the spring boot app.

You can start the application in two ways: you can right-click on the UsersApplication and run it as a java application or do the following steps.

// mvn install
mvn clean install

// run the app
java -jar target/<repo>.war

Finally, you can list all the users with this endpoint http://localhost:8080/api/users.

Angular App

Now the java code is running on port 8080. Now it’s time to look at the Angular app. The entire Angular app is under the folder src/main/ui. You can create with this command ng new ui. I am not going to put all the files here you can look at the entire files in the above Github link or here.

Let’s see some important files here. Here is the service file which calls Java API.

Here is the app component which subscribes to these calls and gets the data from the API.

Interaction between Angular and Java API

In the development phase, the Angular app is running on port 4200 with the help of a webpack dev server and Java API running on port 8080.

There should be some interaction between these two. We can proxy all the API calls to Java API. Angular provides an inbuilt proxying method. First, we need to define the following proxy.conf.json under src/main/ui folder.

If you look at the file, all the paths that start with /api will be redirected to http://localhost:8080 where the Java API running. Then, you need to define in angular.json under the serve part with the proxyConfig key. Here is the complete angular.json file.

Once this is configured, you can run the Angular app on port 4200 and java API on 8080 still make them work together.

// java API (Terminal 1)
mvn clean install
java -jar target/<war file name>

// Angular app (Terminal 2)
npm start

How To Build For Production

As you have seen above, we run the Angular and Java server on different ports in the development phase. But, when you build the app for production you need to pack your Angular code with Java and run it on one port. I wrote another article for it here is the link.

• How To Build Angular With Java Backend For Production

Summary

• There are so many ways we can build Angular apps and ship for production.
• One way is to build Angular with Java.
• In the development phase, we can run Angular and Java on separate ports.
• The interaction between these two happens with proxying all the calls to API.
• In the production phase, you can build the Angular app and put all the assets in the dist folder and load it with the java code.
• We can package the application in a number of ways.

Conclusion

This is one way of building and shipping Angular apps. This is really useful when you want to do server-side rendering or you need to do some processing. In future posts, I will discuss more on building for production and deploying strategies.