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 a 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 example. small application/teams it is advisable to package as a 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 a single unit.

#1.Install Prerequisites

In the first part of the article, we would be creating a 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.
  2. With this step, Angular installation is complete.The next step is to create a simple spring boot project.

#2.Create a new Spring Boot and Angular 6 application

  1. Use start.spring.io or create new project from STS
  2. The next step is to import it to STS and modify a few items. From STS, use Import from Projects option to export angular application into STS.
  3. Once the import is complete, on project settings exclude node_modules folder & click on apply. We wouldn't need node_modules a folder because it would be generated during the build process.
  4. Modify app.component.css to update color as 'black' (optional step)
  5. Modify app.component.ts to update the title as required (optional step)
  6. Verify if you’re able to see modifications.
  7. Use ng build -prod command for generating production build artifacts.
  8. Post generation of the production build you should see a new folder named ‘dist’.
  9. Now we have both static sources (angular application) dist folder & Spring Boot artifacts.

#3. Use Maven resource plugin to package as a single jar

  1. The next step is to use a maven resource plugin to copy all files from dist folder to /src/main/resources/static the 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 > <resources> <resource> <directory>../angular6-client/dist</directory> </resource> </resources> </configuration> </execution> </executions> </plugin>
  1. On Maven clean build, you should see a jar with both Angular 6 & Spring Boot application on the target folder.
  2. Spring Boot application can also be launched from the same app.

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

The sample code used in this article can be found at Github here.

Useful Resources

Also published on Medium.

Originally published at https://www.upnxtblog.com on September 7, 2018.

--

--

Author | Digital Solution Architect | Blog https://upnxtblog.com | My K8s Book https://a.co/d/79wyfKs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store