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 Node.js from here
- Confirm Node.js version by following commands
node -v & npm –v
- Install Angular CLI using following command and we would be creating creating angular apps using CLI interface.
npm install -g @angular/cli
- Confirm if the installation is successful using following command.
- With this step, Angular installation is complete.Next step is to create simple spring boot project.
#2.Create new Spring Boot and Angular 6 application
- Use start.spring.io or create new project from STS
- Create new controller with request mapping
/api/helloand do maven compile to check if build is success.
- Create new angular client using
ng newcommand with angular CLI
- Check if we are able to start using
npm startcommand from the workspace.
- We should be able to see the new application http://localhost:4200
- 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.
- Once import is complete,on project settings exclude
node_modulesfolder & click on apply. We wouldn’t need
node_modulesfolder because it would be generated during build process.
- Resultant folder post exclusion of
app.component.cssto update color as ‘black’ (optional step)
app.component.tsto update 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 production build you should see 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 single jar
- Next step is to use maven resource plugin to copy all files from dist folder to
/src/main/resources/staticfolder to Spring Boot Project. Following is the POM configuration
- On Maven clean build, you should see jar with both Angular 6 & Spring Boot application on the target folder.
- Execute with
Java –jarcommand to launch the application, you should see the Angular application served from static folder.
- Spring Boot application can also be launched from the same app.
Congrats! today we have learnt how to use maven resources plugin and spring boot jar packaging to build and deploy as single unit.
Sample code used in this article can be found at Github here.
Also published on Medium.