How to deploy Angular 6 + Spring Boot app as single deployment unit ?

In this article, we are going to check how to deploy Angular 6 & Spring Boot REST application as single deployment unit but however best practice is to separate Spring boot and Angular application so that we decouple the client code and server code, hence the application becomes highly scalable and manageable.But sometimes there could be scenarios for ex. small application/teams it is advisable to package as single unit and deploy them.In this article, we are going to check how to use maven resources plugin and spring boot jar packaging to build and deploy as single unit.

Install Prerequisites

In the first part of the article, we would be creating new Angular 6 client using Angular CLI & install prerequisites.We would be installing Node.js which is a cross platform runtime system and runtime environment for applications written in JavaScript language and npm package manager for downloading packages.

1. Install Node.js from here

Image — Install NodeJS

Image — Installation Complete

1. Confirm Node.js version by following commandsnode -v & npm –v

Image — Check Node.JS & Npm versions

1. Install Angular CLI using following command and we would be creating creating angular apps using CLI interface.npm install -g @angular/cli

Image — Install Angular CLI

1. Confirm if the installation is successful using following command.ng -v

Image — Confirm Angular CLI Installation

1. With this step, Angular installation is complete.Next step is to create simple spring boot project.

Create new Spring Boot and Angular 6 application

1. Use start.spring.io or create new project from STS

Image — Create new Spring project

Image — Choose dependencies

1. Create new controller with request mapping /api/hello and do maven compile to check if build is success.

Image — Create new controller

1. Create new angular client using ng new command with angular CLI

Image — Create new angular client

1. Check if we are able to start using npm start command from the workspace.

Image — Use npm start to check if we are able to start the new client

1. We should be able to see the new application http://localhost:4200

Image — We are able to launch new application

1. Next step is to import it to STS and modify few items. From STS,use Import from Projects option to export angular application in to STS.

Image — Import Angular application

1. Once import is complete,on project settings exclude node_modules folder & click on apply. We wouldn’t need node_modules folder because it would be generated during build process.

Image — Exclude node_modules folder

1. Resultant folder post exclusion of node_modules folder.

Image — Resultant folder excluding node_modules

1. Modify app.component.css to update color as 'black' (optional step)

Image — (Optional step) modify color

1. Modify app.component.ts to update title as required (optional step)

Image — (Optional Step) update title

1. Post modifications, run npm start to view the changes

Image — Run npm start to view the changes

1. Verify if you’re able to see modifications.

Image — Verify modifications

1. Useng build –prod command for generating production build artifacts.

Image — Generate Production build artifacts

1. Post generation of production build you should see new folder named ‘dist’.

Image — Production build artifacts

1. Now we have both static sources (angular application) dist folder & Spring Boot artifacts.

Use Maven resource plugin to package as single jar

1. Next step is to use maven resource plugin to copy all files from dist folder to /src/main/resources/static folder to Spring Boot Project. Following is the POM configuration <plugin> <artifactId>maven-resources-plugin</artifactId> <executions> <execution> <id>copy-resources</id> <phase>validate</phase> <goals><goal>copy-resources</goal></goals> <configuration> <outputDirectory>${build.directory}/classes/static/</outputDirectory >
2. <resources>
3. <resource>
4. <directory>../angular6-client/dist</directory>
5. </resource>
6. </resources>
7. </configuration>
8. </execution>
9. </executions>
10. </plugin>
11. On Maven clean build, you should see jar with both Angular 6 & Spring Boot application on the target folder.
12. Execute with Java –jar command to launch the application, you should see the Angular application served from static folder.

Image — Angular application served from Spring Boot Jar

1. Spring Boot application can also be launched from the same app.

Image — Spring Boot application from the same jar

Congrats! today we have learnt how to use maven resources plugin and spring boot jar packaging to build and deploy as single unit.

Additional Resources

• Maven Resources Plugin

Originally published at @upnxtblog.