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
    Install NodeJS
    Image – Install NodeJS

     

    Installation Complete
    Image – Installation Complete
  2. Confirm Node.js version by following commandsnode -v & npm –v

    Check Node.JS & Npm versions
    Image – Check Node.JS & Npm versions
  3. Install Angular CLI using following command and we would be creating creating angular apps using CLI interface.npm install -g @angular/cli

    Install Angular CLI
    Image – Install Angular CLI
  4. Confirm if the installation is successful using following command.ng -v

    Confirm Angular CLI Installation
    Image – Confirm Angular CLI Installation
  5. 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
    Create new Spring project
    Image – Create new Spring project

     

    Choose dependencies
    Image – Choose dependencies

     

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

    Create new controller
    Image – Create new controller
  3. Create new angular client using ng new command with angular CLI

    Create new angular client
    Image – Create new angular client
  4. Check if we are able to start using npm start command from the workspace.

    Use npm start to check if we are able to start the new client
    Image – Use npm start to check if we are able to start the new client
  5. We should be able to see the new application http://localhost:4200

    We are able to launch new application
    Image – We are able to launch new application
  6. 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.

    Import Angular application
    Image – Import Angular application
  7. 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.

    Exclude node_modules folder
    Image – Exclude node_modules folder
  8. Resultant folder post exclusion of node_modules folder.

    Resultant folder excluding node_modules
    Image – Resultant folder excluding node_modules
  9. Modify app.component.css to update color as ‘black’ (optional step)

     (Optional step) modify color
    Image – (Optional step) modify color
  10. Modify app.component.ts to update title as required (optional step)

    (Optional Step) update title
    Image – (Optional Step) update title
  11. Post modifications, run npm start to view the changes

    Run npm start to view the changes
    Image – Run npm start to view the changes
  12. Verify if you’re able to see modifications.

    Verify modifications
    Image – Verify modifications
  13. Useng build –prod command for generating production build artifacts.
    Generate Production build artifacts
    Image – Generate Production build artifacts
  14. Post generation of production build you should see new folder named ‘dist’.

    Production build artifacts
    Image – Production build artifacts
  15. 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 >

                                       <resources>

                                                <resource>

                                                        <directory>../angular6-client/dist</directory>

                                                </resource>

                                       </resources>

                              </configuration>

                     </execution>

             </executions>

    </plugin>

  2. On Maven clean build, you should see jar with both Angular 6 & Spring Boot application on the target folder.
  3. Execute with Java –jar command to launch the application, you should see the Angular application served from static folder.

    Angular application served from Spring Boot Jar
    Image – Angular application served from Spring Boot Jar
  4. Spring Boot application can also be launched from the same app.
    Spring Boot application from the same jar
    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

 

Summary
How to deploy Angular 6 + Spring Boot app as single deployment unit ?
Article Name
How to deploy Angular 6 + Spring Boot app as single deployment unit ?
Description
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.
Author
Publisher Name
Upnxtblog
Publisher Logo