Spring Boot & Angular 5 PWA Dev Environment Setup

0

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

Ajitesh Kumar

Ajitesh is passionate about various different technologies including programming languages such as Java/JEE, Javascript, PHP, C/C++, mobile programming languages etc, and, computing fundamentals related with cloud-native technologies, application security, cloud computing platforms, mobile apps, big data etc.

He has also authored the book, Building Web Apps with Spring 5 and Angular.
Ajitesh Kumar

Leave A Reply

Time limit is exhausted. Please reload the CAPTCHA.