-
Notifications
You must be signed in to change notification settings - Fork 0
Creating Spring boot Angular multi module project
deepaksama edited this page Sep 7, 2022
·
11 revisions
Step 1: Create a spring boot project with minimum dependencies using spring initializer https://start.spring.io/
-
Initializer config
-
Project should look like the below:
-
Now modify the pom.xml to add below
<packaging> pom </packaging>
-
Now right-click on the project folder and select New -> Other. Select Maven Module in the dialog box and click on Next
-
Enter module name as backend and check the Create simple project checkbox and click on Next
-
Enter GroupId, Name, and Description appropriately
- Right click on application files package and select Refactor -> Move and select src/main/java from backend module
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
- Modify the pom.xml to add below
<packaging> jar </packaging>
- Open terminal and Navigate to src/main/java folder in the frontend module and create a directory web
- Under web directory Run **ng new -skip-git magic-app
In this command, we are skipping the git repository creation and creating a directory web and angular application with the name magic-app
- Select Add routing as y and stylesheet format as CSS
- Now add the below build configuration in frontend/pom.xml
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.12.1</version>
<configuration>
<workingDirectory>src/main/java/web/magic-app/</workingDirectory>
<nodeVersion>${node.version}</nodeVersion>
<npmVersion>${npm.version}</npmVersion>
</configuration>
<executions>
<execution>
<id>install node and 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 run build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
<execution>
<id>prod</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run-script build</arguments>
</configuration>
<phase>generate-resources</phase>
</execution>
</executions>
</plugin>
</plugins>
<resources>
<resource>
<!-- we copy the content of the magic-app directory in the final artifact -->
<directory>src/main/java/web/magic-app/dist/magic-app</directory>
</resource>
</resources>
</build>
- Now add the below to root pom magic/pom.xml unter to specify node and npm versions
<node.version>16.14.2</node.version>
<npm.version>8.5.0</npm.version>
-
Step 1: Add Controller class
- Right-click on com.example.magic package and click on New -> Class and add .web in the package and provide class name as HelloWorldController
- Add this code to Controller class
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HelloWorldController {
@RequestMapping("/hello")
public String hello() {
return "HellowWorld!";
}
}
- Modify spring-boo-maven-plugin to look as below
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<executions>
<execution>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
- Now add the below plugin config to matic/backend/pom.xml
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>3.3.0</version>
<executions>
<execution>
<id>merge</id>
<phase>initialize</phase>
<goals>
<goal>unpack</goal>
</goals>
<configuration>
<artifactItems>
<artifactItem>
<groupId>${project.groupId}</groupId>
<artifactId>frontend</artifactId>
<type>jar</type>
<overWrite>true</overWrite>
<outputDirectory>${project.build.directory}/classes/static</outputDirectory>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>