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
- An introduction to Angular Service Worker
- Angular 5 – How to Create Progressive Web Apps (PWA)
- Spring Boot & Angular App Hello World as One Deployable War
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.
- Confounder Features & Machine Learning Models: Examples - October 2, 2024
- Credit Card Fraud Detection & Machine Learning - September 26, 2024
- Neural Network Types & Real-life Examples - September 24, 2024
I found it very helpful. However the differences are not too understandable for me