[FIXED] How to integrate Angular in Spring Boot using Gradle?

Issue

I have a problem to combine Spring Boot + Angular + Gradle and fire up the applications to work together.

I created an empty folder named my-app in it I created a new spring boot project that is a folder named backend, I placed the Angular project in the folder backend/src/resources/webapp/frontend.

So in a nutshell it looks like this:

my-app 
 --backend (Spring)
   --src
     --resources
       --webapp
        --frontend (Angular)

In the main runtime file BackendApplication.java I placed a simple endpoint with a hello world message to verify that the backend application is created (still without the Angular folder created) at localhost:8080, the application launched and displayed the message. After initializing the Angular CLI project, going to localhost:4200, I get the welcome page from Angular, so everything works.

However, how can I combine, the two projects? I run two terminals one with the spring application going to the folder where spring is I run the command ./gradlew bootRun the application builds to 80% with the message EXECUTING, (displays a message from endpoint) and Angular application I run the ng serve command and can normally go to localhost:4200

The problem is that I don't know if the apps work together or if I just ran 2 separate projects that do two different things. How should such applications be built, it seems to me that it should only work under one address and not two.

I don't know how I could combine this to make the applications "talk to each other". I'll add that I haven't configured anything in the gradle files, maybe I should configure something there?

This is my first attempt to connect backend and frontend and I don't know how to do it sensibly

Solution

Single Container

You can run ng build in the angular project folder and copy the resulting files in the dist folder to the static folder of you spring project. (You can automate this process by changing outputPath in angular.json.) This would mean the applications would run in the same container if you containerize your spring application.

Then just build an image: ./mvnw spring-boot:build-image

Note: You could also use a Dockerfile. This can help with consistency if deployment gets more complex. Using docker compose makes the command really simple, and it wouldn't change even if you wanted to change project management for some reason. Which is nice for automation.

And run a container: docker run yourImage:version

For more info on using Gradle instead of Maven, or Docker in general you can explore this older repo of mine:

• Spring + Maven / Gradle

• Docker

Two Containers

You could also deploy the angular application to an nginx container and either allow the origin of the angular application in your spring project or add some configuration to the containers, and in the angular project using the --proxy-config flag to run it locally

This can be a little more work, but is the better practice. However, I recommend to create some Spring Boot Actuator /health endpoint so the angular app can handle your back end not being healthy / online.

Answered By - H3AR7B3A7
Answer Checked By - Katrina (JavaFixing Volunteer)