Creating Spring boot Angular multi module project

Creating Spring boot + Angular multi-module project

Create Multi-Module Project

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>

Step 2: Add backend module

• 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

  

Step 3: Follow Step 2 and create new module frontend

Step 4: Move application to backend module

• Right click on application files package and select Refactor -> Move and select src/main/java from backend module

Step 5: Move build plugin config from root pom magic/pom.xml to magic/backend/pom.xml

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build> 

Step 6: Modify backend and frontend module pom files to include jar packaging

• Modify the pom.xml to add below

   <packaging> jar </packaging>

Step 7: Now build the project to verify everything compiles fine

Create Angular Project

Step 1: Create a minimal angular project

• 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>

Create Minimal Backend code

• 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!";
    }
}

Packaging Backend and FrontEnd into a single executable jar

• 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>