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.

Quick Snapshot

#1.Install Prerequisites
#2.Create a new Spring Boot and Angular 6 application
#3. Use Maven resource plugin to package as a single jar
Useful Resources

#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.

Install Node.js from here.
Image – Install NodeJS

Image – Installation Complete
Confirm Node.js version by following commandsnode -v & npm –v
Image – Check Node.JS & Npm versions
Install Angular CLI using the following command and we would be creating angular apps using the CLI interface.npm install -g @angular/cli
Image – Install Angular CLI
Confirm if the installation is successful using the following command.ng -v
Image – Confirm Angular CLI Installation
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
Image – Create new Spring project

Image – Choose dependencies
Create a new controller with request mapping /api/hello and do maven compile to check if the build is a success.
Image – Create new controller
Create a new angular client using ng new command with Angular CLI
Image – Create new angular client
Check if we are able to start using npm start the command from the workspace.
Image – Use npm start to check if we are able to start the new client
We should be able to see the new application http://localhost:4200
Image – We are able to launch 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.
Image – Import Angular application
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.
Image – Exclude node_modules folder
Resultant folder post exclusion of node_modules folder.
Image – Resultant folder excluding node_modules
Modify app.component.css to update color as ‘black’ (optional step)
Image – (Optional step) modify color
Modify app.component.ts to update the title as required (optional step)
Image – (Optional Step) update title
Post modifications, run npm start to view the changes
Image – Run npm start to view the changes
Verify if you’re able to see modifications.
Image – Verify modifications
Use ng build –prod command for generating production build artifacts.
Image – Generate Production build artifacts
Post generation of the production build you should see a new folder named ‘dist’.
Image – Production build artifacts
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/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>

On Maven clean build, you should see a jar with both Angular 6 & Spring Boot application on the target folder.
Execute with Java –jar the command to launch the application, you should see the Angular application served from the static folder.
Image – Angular application served from Spring Boot Jar
Spring Boot application can also be launched from the same app.
Image – Spring Boot application from the same jar

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.