PDFelement Anniversary Sale 40% OFF
Coursera: Build New Skills Anytime, Anywhere with 100% online courses. Start Now!
Python Specialization from University of Michigan

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.

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

#2.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. Use ng 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.

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

11.11 Shopping Festival | Up to 90% Off for Cloud Server Plus $1000 Coupons on Alibaba Cloud

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

Additional Resources

 

Ivacy VPN

Subscribe to Emails

More than 100,000 subscribers across the world trust & read Upnxtblog articles. Subscribe to emails updates!
* indicates required

Also published on Medium.

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
%d bloggers like this: