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:
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.
Follow instructions given below to create an Angular app.
ng new ng-client --service-worker
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 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>
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
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.
In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…
Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…
With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…
Anxiety is a common mental health condition that affects millions of people around the world.…
In machine learning, confounder features or variables can significantly affect the accuracy and validity of…
Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…