29,99 €
Angular makes building applications with the web easy and Spring Boot helps get an application up and running using just a few lines of code and minimal configuration. This book provides insights into building full-stack apps using Angular and Spring Boot effectively to reduce overall development time and increase efficiency.
You'll start by setting up your CI/CD pipeline and then build your web application’s backend guided by best practices. You'll then see how Spring Boot allows you to build applications faster and more efficiently by letting the Spring Framework and Spring Boot extension do the heavy lifting. The book demonstrates how to use Spring Data JPA and add its dependencies along with Postgres dependencies in the project to save or persist a user's data in a database for future use. As you advance, you'll see how to write tests and test a service using Mockito. Finally, you'll create a CI workflow or pipeline for a Spring Boot and Angular application to enable operations to deliver quality applications faster.
By the end of this Spring Boot and Angular book, you'll be able to build a full-stack web application and deploy it through continuous integration and continuous deployment.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 426
Veröffentlichungsjahr: 2022
Hands-on full stack web development with Java, Spring, and Angular
Devlin Basilan Duldulao
Seiji Ralph Villafranca
BIRMINGHAM—MUMBAI
Copyright © 2022 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Group Product Manager: Pavan Ramchandani
Publishing Product Manager: Aaron Tanna
Senior Editor: Hayden Edwards
Content Development Editor: Abhishek Jadhav
Technical Editor: Saurabh Kadave
Copy Editor: Safis Editing
Project Coordinator: Sonam Pandey
Proofreader: Safis Editing
Indexer: Pratik Shirodkar
Production Designer: Aparna Bhagat
Marketing Coordinator: Anamika Singh
First published: December 2022
Production reference: 1021222
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-80324-321-4
www.packt.com
To my father Alberto Duldulao, I miss you, tay (dad). On the day I lost you, I lost a father, a friend, and an idol who I looked up to. You will always be in my heart, tay. I miss you every day. Thanks again for your love, support, and inspiration.
– Devlin Duldulao (Utoy)
To my mother Arceli Villafranca, who gave everything to me and who is the reason why I’m here. To my sister Sheila Villafranca, who always supports me, and to my partner Shey Cadavero, who gives me strength and inspiration every day.
– Seiji Villafranca
Devlin Basilan Duldulao is a full-stack engineer with over 8 years of web, mobile, and cloud development experience. He has been a recipient of Microsoft’s Most Valuable Professional (MVP) award since 2018 and earned the title of Auth0 Ambassador for his passion for sharing best practices in application securities. Devlin has passed some prestigious exams in software and cloud development such as the MSCD, Azure Associate Developer, AWS Associate Developer, and Terraform Associate certifications.
Perhaps it was serendipity that made him venture into the coding world after a short stint in the medical field. However, once he stepped into it, he fell for it hook, line, and sinker – but in the right way, he claims. Devlin often finds himself engrossed in solving coding problems and developing apps, even to the detriment of his once-active social life.
One of the things that motivates him is ensuring the long-term quality of his code, including looking into ways to transform legacy code into more maintainable and scalable applications. Devlin enjoys tackling challenging projects or applications for high-level clients and customers, as he currently does at his company based in Norway. He also provides training and consultation for international corporations.
One of his other interests is giving talks at IT conferences worldwide and meeting unique people in the industry. Devlin is currently based in Oslo, Norway with his wife. He is a senior software engineer at Inmeta Consulting, a subsidiary of the Crayon group of companies.
Seiji Ralph Villafranca graduated cum laude with a BSc in computer science from the University of Santo Tomas in the Philippines. He has 6 years of experience in web and mobile development and has also earned the title of Auth0 Ambassador for his passion for application security. He holds several certifications in Angular development from beginner to expert level.
Seiji is also one of the community leaders of Angular Philippines, which is the largest Angular group in the Philippines; the community has led him to speak at different meetups of tech communities, workshops, and even local and international conferences. He is enthusiastic about sharing knowledge of coding and organizing events and meetups for the community, as well as writing content for students and professionals. He also has been a mentor at several hackathons, as he loves the startup community.
Seiji loves to develop new projects that are on the web or mobile and he is currently a senior software engineer at a company based in Malaysia. He is not only a coder but also a mentor, teacher, and trainer for students, professionals, and companies.
Rajeshkumar Muthaiah works as Technical Lead in an international bank. He has strong experience in designing and developing high scale applications using a wide range of technologies since 2010. He works on various technologies including Java, Dart, Flutter, Angular, React, Spring, Hibernate, and Sass. Rajeshkumar has worked on various industries including Aviation, Banking, and Finance. He is very passionate about learning new technologies.
When not working on code, he likes reading books, as well as solving puzzles and traveling. He is very fond of cubes such as 5x5, megaminx, pyraminx, and so on., Currently, he lives with his wife Ranju in Singapore.
Spring Boot provides JavaScript users with a platform to get an application up and running with just a few lines of code. At the same time, Angular is a component-based framework that makes building a web application’s frontend easy. This book explains how Spring Boot and Angular work together to help you create full-stack applications quickly and effectively.
In this book, you will begin by exploring why Spring Boot and Angular are in-demand frameworks, before being guided by expert solutions and best practices to build your own web application. Regarding the backend, you will see how Spring Boot allows you to build applications efficiently by letting the Spring Framework and Spring Boot extension do the heavy lifting, while using Spring Data JPA and Postgres dependencies in your project to save or persist data in a database. With the frontend, you will use Angular to construct a project architecture, build Reactive forms, and add authentication to avoid malicious users stealing data from the application.
Finally, you will see how to test services with Mockito, deploy applications using continuous integration and continuous deployment, and integrate Spring Boot and Angular to create a single package so that, by the end of the book, you will be able to build your very own full-stack web application.
The book is for busy Java web developers and TypeScript developers with little experience of developing Angular and Spring Boot apps who want to learn about the best practices for building full-stack web apps.
Chapter 1, Spring Boot and Angular – The Big Picture, serves as a short recap regarding Spring Boot and Angular’s current state to give you a glimpse of what lies ahead in the web development of Java Spring Boot and Angular. You will also see how stable and reliable Vue.js is as an app and the team behind writing and maintaining the Vue.js framework.
Chapter 2, Setting Up the Development Environment, teaches you how to set up your computer’s development environment to build backend and frontend web applications. We will turn to different IDEs and text editors to write the code and make sure everything has been set up before we proceed in the app development.
Chapter 3, Moving into Spring Boot, uncovers the inner workings of Spring Boot and how to start a project using Spring Initializr. This chapter will also teach you about the concept of dependency injection and the IoC container. This chapter will also tackle how Beans and annotations work.
Chapter 4, Setting Up the Database and Spring Data JPA, helps you to connect the Java Spring Boot to a database. This chapter will describe Spring Data JPA and how to add Spring Data JPA and Postgres dependencies in the project. This chapter will also show how to use a config file to connect the Java Spring Boot to a Postgres database instance.
Chapter 5, Building APIs with Spring, shows you how to start and run a Java Spring Boot application. This chapter will also show how to add models for the application and use them when writing routers and controllers. Afterward, this chapter will explain how to use Redis for caching to improve the performance of an application.
Chapter 6, Documenting APIs with OpenAPI Specification, covers the documentation part of the APIs of the Java Spring Boot application. This chapter will also show you how to include the Swagger UI in the application to provide graphical interfaces in the documentation of APIs.
Chapter 7, Adding Spring Boot Security with JWT, details what CORS is and how to add a CORS policy in the Spring Boot application. This chapter describes Spring security, authentication, and authorization. This chapter will also demonstrate how JSON web tokens work and what Identity as a Service (IaaS) is.
Chapter 8, Logging Events in Spring Boot, explains what logging is and what the popular packages to implement logging are. This chapter will also teach you where to save logs and what to do with logs.
Chapter 9, Writing Tests in Spring Boot, is all about writing tests for a Java Spring Boot application. This chapter describes JUnit and AssertJ. This chapter will also teach you how to write tests, how to test a repository, and how to test a service using Mockito.
Chapter 10, Setting Up Our Angular Project and Architecture, focuses on how to organize features and modules, how to structure components, and how to add Angular Material.
Chapter 11, Building Reactive Forms, demonstrates how to build Reactive forms, basic form control, and grouping form controls. This chapter will also explain how to use FormBuilder and validate form input.
Chapter 12, Managing States with NgRx, covers state management in complex applications. This chapter will also introduce NgRx and how to set it up and use it in an Angular application.
Chapter 13, Saving, Deleting, and Updating with NgRx, describes how to remove an item using NgRx, how to add an item using NgRx, and how to update an item using NgRx.
Chapter 14, Adding Authentication in Angular, explores how to add user login and logout, retrieve user profile information, protect application routes, and call an API with protected endpoints.
Chapter 15, Writing Tests in Angular, illustrates how to write basic Cypress tests and how to mock HTTP requests for testing.
Chapter 16, Packaging Backend and Frontend with Maven, exemplifies how to utilize the Maven frontend plugin for Angular and Spring Boot to integrate them into one package.
Chapter 17, Deploying Spring Boot and the Angular App, describes CI/CD and GitHub Actions. This chapter will also show you how to create a CI workflow or pipeline for a Spring Boot and Angular application.
You should ensure that you have a basic understanding of HTML, CSS, JavaScript, TypeScript, Java, and REST API. You don’t need intermediate or advanced knowledge of the requirements mentioned.
Software/hardware covered in the book
Operating system requirements
Node.js (LTS version)
Windows, macOS, or Linux
Angular
Windows, macOS, or Linux
Java 17
Windows, macOS, or Linux
Visual Studio Code
Windows, macOS, or Linux
IntelliJ IDEA
Windows, macOS, or Linux
Google Chrome
Windows, macOS, or Linux
Don’t lose hope if you are facing problems when installing runtimes, SDKs, or any software tools in general when developing an application. Errors are common, but searching for error messages on Google greatly helps developers when troubleshooting certain problems.
If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.
Play around with Angular on stackblitz.com or codesandbox.io to see the look and feel of Angular without installing anything on your computer.
You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Spring-Boot-and-Angular. If there’s an update to the code, it will be updated in the GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://packt.link/pIe6D.
There are a number of text conventions used throughout this book.
Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “Spring Boot only requires spring-boot-starter-web, which is a Spring Starter, for our application to run.”
A block of code is set as follows:
@Configuration public class AppConfig { @Bean public Student student() { return new Student(grades()); } @Bean public Grades grades() { return new Grades(); } }When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
dependencies { implementation 'org.springframework.boot:spring-boot- starter-data-jpa' runtimeOnly 'com.h2database:h2' runtimeOnly 'org.postgresql:postgresql' }Any command-line input or output is written as follows:
rpm -ivh jdk-17.interim.update.patch_linux-x64_bin.rpmBold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “Select Spring Initializr and this will open a form with the same web interface.”
Tips or important notes
Appear like this.
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.
Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Once you’ve read Spring Boot 3 and Angular, we’d love to hear your thoughts! Please select https://www.amazon.in/review/create-review/?asin=180324321X for this book and share your feedback.
Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.
Thanks for purchasing this book!
Do you like to read on the go but are unable to carry your print books everywhere?
Is your eBook purchase not compatible with the device of your choice?
Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.
Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.
The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily
Follow these simple steps to get the benefits:
Scan the QR code or visit the link belowhttps://packt.link/free-ebook/9781803243214
Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directlyThis part contains a real-world scenario on how to start a web application project. The following chapters are covered in this part:
Chapter 1, Spring Boot and Angular – The Big PictureChapter 2, Setting Up the Development EnvironmentIn the previous chapter, you learned about Spring Boot in a nutshell and its advantages. We also tackled the latest features of Java 17. The same goes for Angular; you had an overview of Angular and the benefits of using it to develop frontend applications.
This chapter will teach you how to set up your computer’s development environment to develop your full-stack Java and Angular application. We will tackle different IDEs and text editors to write our code and make sure everything has been configured before we start with the development.
Installing everything correctly from the beginning will help us avoid issues and write code without any interruptions.
In this chapter, we will cover the following topics:
Installing VS Code and IntelliJ IDEAInstalling Java 17Installing SDKMANSetting up IntelliJ IDEA with Java 17Installing REST Client VS Code or JetBrains and Angular DevToolsInstalling Git version controlThe following are the links to the software you need to install:
Download VS Code (for Windows, Mac, and Linux): https://code.visualstudio.com/downloadIntelliJ IDEA for Windows: https://www.jetbrains.com/idea/download/#section=windowsIntelliJ IDEA for Mac: https://www.jetbrains.com/idea/download/#section=macIntelliJ IDEA for Linux: https://www.jetbrains.com/idea/download/#section=linuxDownload Java 17: https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.htmlAngular DevTools: https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnhNode.js and Node Package Manager: https://nodejs.org/en/PostgreSQL for Windows: https://www.postgresql.org/download/windows/PostgreSQL for Mac: https://www.postgresql.org/download/macosx/PostgreSQL for Linux: https://www.postgresql.org/download/linux/Git Version Control: https://git-scm.com/This section will guide you through the installation and configuration of VS Code or IntelliJ IDEA. We will look at the text editor and IDE breakdown of their features and plugins that you can use throughout the development.
Download the VS Code installer from https://code.visualstudio.com/download. We suggest installing VS Code regardless of your machine’s OS, because VS Code is lightweight but offers many plugins for Angular development. In addition, VS Code is the most common text editor used by JavaScript developers. The editor supports TypeScript, code formatting, and code navigation and offers many extensions that you can use, especially in developing Angular applications. The following are some of the valuable extensions we can use throughout the development:
Code Spell Check: This is an extension for checking the spelling of our source code, which helps us avoid issues caused by typos.Prettier: This is a code formatting tool that applies proper alignment and indentations on our file after each save.Angular Snippets: This is a prevalent extension for Angular developers as it adds snippets for Angular, TypeScript, and HTML, which saves much time in development with the use of snippets to generate codes on the fly.Angular Files: This is a valuable extension, especially when you are not familiar with the commands in the Angular CLI; this extension will add a menu where you can generate Angular components, modules, and services without using a CLI.Angular2-Switcher: This extension allows us to use shortcut keys to navigate between Angular files.REST Client: This is an extension in VS Code for testing backend APIs. Instead of using third-party applications, we can send requests on our VS Code using REST Client.JSON to TS: This extension is handy as it automatically converts JSON objects into TypeScript models in our frontend.Angular Language Service: This is one of the essential plugins for Angular development. The extension provides Angular Code Completion, Angular Diagnostic Messages, and Go to definition features that make development faster.This ends VS Code installation and configuration. Your VS Code text editor is now set for Angular development.
This IDE is one of the most popular IDEs when developing applications using Java. The IDE offers several features to make development easier and faster. The following is a list of the tools that IntelliJ IDEA offers:
Terminal: IntelliJ IDEA comes with a built-in terminal. We can execute any commands in the terminal depending on the language we are using for the development. The terminal can be accessed by pressing Alt + F12.Quick fixes: IntelliJ IDEA detects syntax errors on the fly. Having this feature, IntelliJ IDEA also suggests quick fixes for developers to easily correct mistakes in the code. The quick fixes can be accessed through a small light bulb that appears when IntelliJ IDEA detects an error.IntelliSense: IntelliSense is also known as smart code completion. IntelliJ IDEA analyzes the fragments of code and displays suggestions to complete the code on the fly.Advanced refactoring: IntelliJ IDEA offers a wide range of refactoring options. The IDE gives the developer the capability to refactor code automatically. Refactoring can also be accessed in the refactor menu.Navigation and search: This is one of the most used features of IntelliJ IDEA and is very handy, especially with large projects. It helps developers find and navigate for a resource, and it can search all of the available controls in the IDE.Detecting duplicates: This helps developers find duplicates in code and gives suggestions to the developers.You should go to https://www.jetbrains.com/idea/download/ to download the installer. In addition, you can download the community version, which is the free version of Visual Studio.
After successfully downloading the IDE, run the installer, and the process is very much straightforward. It will install the IDE automatically in our terminal. After the successful installation of IntelliJ IDEA, we will install plugins/extensions that will help us throughout the development.
To install the plugins, open the IntelliJ IDEA and press Ctrl + Alt + S. This will open the settings