Spring Boot & Angular 5 PWA Dev Environment Setup

March 18, 2018 by Ajitesh Kumar · Leave a comment
Spring Boot Angular App Development Environment

In this post, you will learn about how to quickly create development environment to build an app using Spring Boot and Angular 5. Angular 5 app and Spring Boot is deployed as one single unit on Tomcat server. The following points are covered:

  • Create a Spring Boot Spring Starter Project
  • Create an Angular Service Worker Project
  • Modify POM.xml for Copying Angular App Assets
  • Create a deployment script for automated build and deployments

Create a Spring Boot Spring Starter Project

Within Eclipse IDE, create a Spring Starter Project for sample Spring Boot app. You may download to SpringSuite Tool Suite (STS) from Eclipse marketplace to have options such as Spring starter project in new project creation options.

Create an Angular Service Worker Project

Follow instructions given below to create an Angular app.

  • Go to Spring Boot app home folder. Execute the following command to get started with creating Angular 5 PWA app. Make sure you have the latest version of Angular CLI which helps you create an Angular app using the latest version of Angular. The app is given the name, ng-client. The execution of command given below will result in the creation of folder, ng-client in the home folder of Spring boot app. You may choose any other name as you wish. 
    ng new ng-client --service-worker
  • Follow rest of the instructions on page Angular 5 – How to Create Progressive Web Apps (PWA)

You may use following index.html file as a packaged index file for PWA. This file has entries for PWA and Bootstrap.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NG Client</title>
  <-- Entry for Angular App -->
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!-- Entry for Progressive Web App (PWA) -->
  <meta name="theme-color" content="#f48c5b">
  <meta name="description" content="Sample description"/>
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="msapplication-starturl" content="/">
  <link rel="manifest" href="manifest.json">
  <!-- Bootstrap Stylesheet -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body class="container">
  <app-root></app-root>
  <!-- Bootstrap Javascript libraries -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<noscript>
  This app works with Javascript being enabled. Enable Javascript in Browser and try again!
</noscript>
</body>
</html>

Modify POM.xml for Copying Angular App Assets during Build

Modify POM.xml for Copying Angular App Assets during the build to Spring Boot app folder such as target/classes/static folder. Make note of the resource directory being set to ng-client/dist. Change the name to appropriate based on app name.

<plugin>
  <artifactId>maven-resources-plugin</artifactId>
  <executions>
    <execution>
      <id>copy-resources</id>
      <phase>validate</phase>
      <goals><goal>copy-resources</goal></goals>
      <configuration>
        <outputDirectory>${basedir}/target/classes/static/</outputDirectory >
        <resources>
          <resource>
            <directory>${basedir}/ng-client/dist</directory >
          </resource>
        </resources>
      </configuration>
    </execution>
  </executions>
</plugin>

Create Script for Building & Deployment NG/Spring Boot App

You may use following script for building, deploying and starting the app:

cd ng-client
ng build --prod
cd ../
mvn install
mvn spring-boot:run

References

Summary

In this post, you learned about quickly creating the development environment for Spring Boot and Angular 5 PWA App.

Did you find this article useful? Do you have any questions or suggestions about this article? Leave a comment and ask your questions and I shall do my best to address your queries.

Ajitesh Kumar
Follow me
Latest posts by Ajitesh Kumar (see all)

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. For latest updates and blogs, follow us on Twitter. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog, Revive-n-Thrive.com
Posted in AngularJS, Java, Web. Tagged with , , , .

Leave a Reply

Your email address will not be published. Required fields are marked *