Java

Spring Boot & Angular 5 PWA Dev Environment Setup

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

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

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

1 month ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

1 month ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

2 months ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

2 months ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

2 months ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

2 months ago