Spring Boot and Angular Integration

  Spring Boot and Angular Integration

In this tutorial, we are going to build a spring boot application and will integrate angular application with it. We will first create an empty spring boot application. Then we will add angular application. Later we will integrate the angular application with the spring boot application in the way so that when spring boot application will build, then the angular application will built along with it. 

The name of the application is going to be the-doctors-chamber.

Note we are going to build a non-reactive spring application. 

Prerequisites

Before further proceeding, you need to have following tools installed in your system:

• Maven

• Git

Now lets build the application. 

Initial Spring Boot Application

For generating a spring boot application, we need to go to https://start.spring.io and mention the dependencies. We will generate the project with the following properties:

• Project: Maven project

• Spring Boot: 2.6.7

• Project Metadata

• Group: org.morshed

• Artifact: doctors.chamber

• Name: doctors.chamber

• Description: Project for online doctor-patient consultation

• Package: org.morshed.doctors.chamber

• Packaging: Jar

• Java: 18

• Dependencies

• Spring Web

• Lombok

• Spring Boot DevTools

Click on the GENERATE button to generate the project. The project will be downloaded as a zip file. Extract the project and open the project in your favourite IDE (for me, I am using Intellij Idea Ultimate). 

Our pom.xml file contains the following contents.

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">   <modelVersion>4.0.0</modelVersion>   <parent>     <groupId>org.springframework.boot</groupId>     <artifactId>spring-boot-starter-parent</artifactId>     <version>2.6.7</version>     <relativePath/> <!-- lookup parent from repository -->   </parent>   <groupId>org.morshed</groupId>   <artifactId>doctors.chamber</artifactId>   <version>0.0.1-SNAPSHOT</version>   <name>doctors.chamber</name>   <description>Project for onlien doctor-patient consultation</description>   <properties>     <java.version>18</java.version>   </properties>   <dependencies>     <dependency>         <groupId>org.springframework.boot</groupId>         <artifactId>spring-boot-starter-web</artifactId>     </dependency>     <dependency>         <groupId>org.springframework.boot</groupId>         <artifactId>spring-boot-devtools</artifactId>         <scope>runtime</scope>         <optional>true</optional>     </dependency>     <dependency>         <groupId>org.projectlombok</groupId>         <artifactId>lombok</artifactId>         <optional>true</optional>     </dependency>     <dependency>         <groupId>org.springframework.boot</groupId>         <artifactId>spring-boot-starter-test</artifactId>         <scope>test</scope>     </dependency>   </dependencies>   <build>     <plugins>         <plugin>           <groupId>org.springframework.boot</groupId>           <artifactId>spring-boot-maven-plugin</artifactId>           <configuration>               <excludes>                 <exclude>                     <groupId>org.projectlombok</groupId>                     <artifactId>lombok</artifactId>                 </exclude>               </excludes>           </configuration>         </plugin>     </plugins>   </build> </project>

Let’s run the project to see whether our application is ok or not. Before running the project, check whether the JDK 18 is set as the IDE jdk. If we run the project, we will see that the project started on port 8080. 

Upload the project to GitHub

We are going to use GItHub as our version controlling system. I assume you already have some basic knowledge on git, if you don’t have, then it is suggested to watch a basic getting started video on youtube. 

Go to your github account, create a new repository named doctors-chamber. Also I am going to make the repository as Public so that it can be accessed by anyone. Then click on the Create repository to create the repository.

We need to run the following git commands in the project directory. 

echo "# doctors-chamber" >> README.md   // adding an initial eco file which will be enhanced later git init     // initilizing the git repository git add .    // adding all the project files git commit -m "initial project set up"  // commit message git branch -M main   // mentioning the branch name git remote add origin https://github.com/monjurmorshed793/doctors-chamber.git git push -u origin main  // push the code to the repository

The repository address of the project is:

monjurmorshed793/doctors-chamber (github.com)

Our project is set up and we have uploaded the project in a git repository. Now we will add an angular application.

Generating Angular application

We will now generate an angular application. Before the generation, we need to have NodeJs installed (LTS is preferred). Also we need to have angular cli installed in our system. Before we further proceed, let’s create a branch named angular-integration using the following git command:

git checkout -b angular-integration

We can install angular-cli with the following command:

npm install -g @angular/cli

Now we can generate an angular application. Go to the project folder and run the following command:

ng new web cd web

If we run

ng serve

Then our angular project will run in port 4200. 

Transferring Angular Folders and File

Our purpose is to build angular project when building our Spring Boot application. In order to do that, we need to transfer some of our files to the root project folter. Also we are going to update our .gitignore file as both angular application and spring boot application have this file. 

First we will move angular build related files to the root folder. 

Go to web folder (angular project folder) and copy all the files except src, .angular, node_modules (note we need to copy .vscode) and paste the files in the root directory (spring boot project root directory). A warning will be shown whether you want to overwrite the existing .gitignore file or not, you should skip overwriting. Here are the files that we moved from the angular project directory to root directory. 

.vscode .browserslistrc .editorconfig .gitignore angular.json karma.conf.js package.json package-lock.json README.md tsconfig.app.json tsconfig.json tsconfig.spec.json

Before we further proceed, copy all the contents of .gitignore from the angular project (web) and paste the contents at the end of spring boot projects’ .gitignore file. You may later remove the duplicate mentioned file or folder names, but we may skip this for now. Just you may remove .vscode of the spring boot project and keep .vscode sections from angular’s .gitignore file. The .gitignore file should look like the following.

 

HELP.md target/ !.mvn/wrapper/maven-wrapper.jar !**/src/main/**/target/ !**/src/test/**/target/ ### STS ### .apt_generated .classpath .factorypath .project .settings .springBeans .sts4-cache ### IntelliJ IDEA ### .idea *.iws *.iml *.ipr ### NetBeans ### /nbproject/private/ /nbbuild/ /dist/ /nbdist/ /.nb-gradle/ build/ !**/src/main/**/build/ !**/src/test/**/build/ ### VS Code ### .vscode/ # See http://help.github.com/ignore-files/ for more about ignoring files. # Compiled output /dist /tmp /out-tsc /bazel-out # Node /node_modules npm-debug.log yarn-error.log # IDEs and editors .idea/ .project .classpath .c9/ *.launch .settings/ *.sublime-workspace # Visual Studio Code .vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json .history/* # Miscellaneous /.angular/cache .sass-cache/ /connect.lock /coverage /libpeerconnection.log testem.log /typings # System files .DS_Store Thumbs.db

Your .gitignore my look different, but most of the contents should match.  Let us not bother much on the .gitignore file. Let’s proceed. 

You may remove the files and folders that we copied from the angular project folder. You should also remove .angular, node_modules folders from the angular project. So the angular project only now has a single folder named src.

As we have moved the folders from angular project to the root directory, we need to  update some configurations. 

Before we move further, let us commit our changes to the git repo. We need to run the following command to commit our changes to our branch. 

git add . git commit -m "angular project added and configuration files moved from angular directory to the project root directory" git push origin angular-integration

Now let’s update the angular configuration files. 

Open the angular.json file and we need to replace all the occurrences of src to web/src.You can easily replace the occurrence using VS Code or Intellij Idea. 

Then we need to update the outputPath  inside the architect section. Replace dist/web with target/classes/static. 

Our angular.json configuration file update is done. 

Now we will update tsconfig.app.json file. Open the file and replace all the occurrences of src to web/src.  Our tsconfig.app.json file needs only this replacements. 

Also we need to replace all the occurrences of src to web/src in tsconfig.spec.json. 

That’s all for now. Now we will run our angular application. But before that as we have changed our directory, we need to run npm install in the project root directory first to install necessary libraries.

After that, let’s run the angular application by running ng serve in the root directory (spring boot project directory) and check whether our angular application runs or not. If you followed till now, then you will see the application run is successful. 

Now we will configure our pom.xml file in order to build angular application during the project build. 

Configuring pom.xml file

For building the angular app during the spring boot project build, we need a plugin named frontend-maven-plugin. 

Add the following plugin in the pom.xml file. 

<plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.12.0</version> <configuration>   <nodeVersion>v14.18.0</nodeVersion> </configuration> <executions>   <execution>     <id>install-npm</id>     <goals>       <goal>install-node-and-npm</goal>     </goals>   </execution>   <execution>     <id>npm-install</id>     <goals>       <goal>npm</goal>     </goals>   </execution>   <execution>     <id>npm-build</id>     <goals>       <goal>npm</goal>     </goals>     <configuration>       <arguments>run-script build</arguments>     </configuration>   </execution> </executions> </plugin>

Our pom.xml file now looks like this:

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.6.7</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>org.morshed</groupId> <artifactId>doctors.chamber</artifactId> <version>0.0.1-SNAPSHOT</version> <name>doctors.chamber</name> <description>Project for onlien doctor-patient consultation</description> <properties> <java.version>18</java.version> </properties> <dependencies> <dependency>   <groupId>org.springframework.boot</groupId>   <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency>   <groupId>org.springframework.boot</groupId>   <artifactId>spring-boot-devtools</artifactId>   <scope>runtime</scope>   <optional>true</optional> </dependency> <dependency>   <groupId>org.projectlombok</groupId>   <artifactId>lombok</artifactId>   <optional>true</optional> </dependency> <dependency>   <groupId>org.springframework.boot</groupId>   <artifactId>spring-boot-starter-test</artifactId>   <scope>test</scope> </dependency> </dependencies> <build> <plugins>   <plugin>   <groupId>org.springframework.boot</groupId>   <artifactId>spring-boot-maven-plugin</artifactId>   <configuration>     <excludes>     <exclude>       <groupId>org.projectlombok</groupId>       <artifactId>lombok</artifactId>     </exclude>     </excludes>   </configuration>   </plugin>     <plugin>       <groupId>com.github.eirslett</groupId>       <artifactId>frontend-maven-plugin</artifactId>       <version>1.12.0</version>       <configuration>         <nodeVersion>v14.18.0</nodeVersion>       </configuration>       <executions>         <execution>           <id>install-npm</id>           <goals>             <goal>install-node-and-npm</goal>           </goals>         </execution>         <execution>           <id>npm-install</id>           <goals>             <goal>npm</goal>           </goals>         </execution>         <execution>           <id>npm-build</id>           <goals>             <goal>npm</goal>           </goals>           <configuration>             <arguments>run-script build</arguments>           </configuration>         </execution>       </executions>     </plugin> </plugins> </build> </project>

Here, in the plugin, we are using nodejs version 14.18.0. During the build, npm install  command is executed. Then npm build command is executed from the package.json file. 

Let’s check whether our configuration is ok or not. Let’s run the spring boot application by running the command 

mvn spring-boot:run

In the log, we will see that npm commands are being run and when the build is complete and the output logs shows that the project is running in port 8080, then if you go to http://localhost:8080 then you will see our angular app as shown in the figure. 

In this blog, we have configured angular and spring boot app. New tutorials will shoon be added.