When you are working on any project the way you set up your development environment is as important as packing and shipping for production. We can save a lot of time if your development environment is seamless and right. You need to automate your development environment as much as possible so that you can focus on what's important which is your functionality.

In this post, we will see how we can set up the development environment for Angular with Java backend and how we can automate any repeated tasks.

• Introduction
• Prerequisites
• Example Project
• Running Angular on port 4200
• Running Java on port 8080
• Interaction between Angular and Java
• Run it with Docker-compose
• Key Takeaways
• Summary
• Conclusion

Introduction

When it comes to developing your Angular app with Java backend you should use two separate ports. As shown in the following figure, Angular and Java container runs on separate ports.

If you look at the above diagram, Angular is running on the port 4200 with the webpack dev server and Java tomcat container runs on the port 8080. Let's look at the following project structure where all the java code is under the folder /src/main/java and all the Angular code is under the folder /src/main/ui

Prerequisites

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

• Angular CLI
• Java
• Typescript
• Eclipse
• 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-develop-env.git

Running Angular on port 4200

Once you clone the project you need to install Angular dependencies and run the Angular code on port 4200.

// change the directory
cd /src/main/ui
// install dependencies
npm install
// start the project
npm start

If you want to run the project on a different port you can do that with the port flag ng serve --port 4201.

Angular uses webpack dev-server to run the whole app on the port 4201 and it looks for any changes you make in the Angular code. As soon as you change the code you can see that change on the browser. You don't have to do any extra configuration for this.

Running Java on port 8080

Run the project as java application as spring boot has embedded tomcat container. The API runs on the port 8080 by default you can change by defining property called server.port in the application.properties file under /src/main/resources folder.

You can access the API on this URL http://localhost:8080/api/users

Auto Restart and Live Reload With Spring Dev Tools

Spring Boot includes an additional set of tools that can make the application development experience a little more pleasant. The spring-boot-devtools module can be included in any project to provide additional development-time features.

Auto Restart

First, you need to make sure you have this dependency in the pom.xml

    
        org.springframework.boot
        spring-boot-devtools
        true
    

Once you have this dependency, if you make any change in the project it restarts automatically. For IntelliJ, we need to hit the Build project or compile to reflect the changes. For example, look at the below I just added space and hit save then spring boot automatically restarts.

Live Reload

When it comes to Live Reload, it automatically reloads the browser. But, you need to install the Live Reload browser extension.

Once it's installed you can configure it in such a way that all the projects on the localhost can be reloaded. I just changed something on the controller and you can see the browser reloading automatically.

Interaction between Angular and Java

Angular is running on port 4200 and Java (tomcat container) is running on the port 8080. There should be a way of interaction between these two while developing the whole project.

Angular provides the proxy server with the help of a webpack dev server. First, you need a proxy.config.json file where you define all the requests. For example, all the API calls start with /api will be redirected to the Java server on port 8080.

You need to add that file on the serve object as options in the angular.json file. Now you can make the API calls to the Java API, all you need to make sure Java server and Angular running on the appropriate ports.

Here is the app.service.ts file in which you make the API calls.

Run it with Docker-compose

Nowadays everything runs on Docker and moving to the cloud. It's important to run those on Docker as well. We can develop with docker-compose in which Angular and Java running as different services and interact with each other. I will post this in a separate article.

Key Takeaways

• When the Java backend involved with your angular project you should be running those in separate ports to speed up your development.
• Use spring dev Tools to auto-restart and auto-reload your Java API.

Summary

• Setting up a development environment is as important as building and packing for production.
• In the development environment, Angular and Java server runs on separate ports.
• Angular runs on the port 4200 and Java server running on the port 8080. You can choose the ports.
• Angular uses a webpack dev server to look for any changes in the files.
• We use Spring Dev Tools for the auto-restart and auto-reload your Java API.
• Angular provides a feature for proxying all the API calls to the nodejs server.

Conclusion

Your development environment should be effective and seamless to speed up your development. Automate any repetitive tasks.