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.
- Install Node.js from here.
- Confirm Node.js version by following commands
node -v & npm –v
- Install Angular CLI using the following command and we would be creating angular apps using the CLI interface.
npm install -g @angular/cli
- Confirm if the installation is successful using the following command.
- 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
- Use start.spring.io or create new project from STS
- Create a new controller with request mapping
/api/helloand do maven compile to check if the build is a success.
- Create a new angular client using
ng newcommand with Angular CLI
- Check if we are able to start using
npm startthe command from the workspace.
- We should be able to see the new application
- 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.
- Once the import is complete, on project settings exclude
node_modulesfolder & click on apply. We wouldn’t need
node_modulesa folder because it would be generated during the build process.
- Resultant folder post exclusion of
app.component.cssto update color as ‘black’ (optional step)
app.component.tsto update the title as required (optional step)
- Post modifications, run
npm startto view the changes
- Verify if you’re able to see modifications.
ng build –prodcommand for generating production build artifacts.
- Post generation of the production build you should see a new folder named ‘dist’.
- Now we have both static sources (angular application) dist folder & Spring Boot artifacts.
#3. Use Maven resource plugin to package as a single jar
- The next step is to use a maven resource plugin to copy all files from dist folder to
/src/main/resources/staticthe folder to Spring Boot Project. Following is the POM configuration
- On Maven clean build, you should see a jar with both Angular 6 & Spring Boot application on the target folder.
- Execute with
Java –jarthe command to launch the application, you should see the Angular application served from the static folder.
- 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.
- Maven Resources Plugin
- How to Build and run your Angular, SpringBoot & Postgres app with Compose
- Using Docker Application Packages to Deliver Apps across Teams
- Monitoring Docker containers using Prometheus + cAdvisor + Grafana
- ULTIMATE GUIDE to Coursera Specializations That Will Make Your Career Better (Over 100+ Specializations covered)
- 5 BEST VPN Services 2020
Also published on Medium.