Full-Stack Web Development with Jakarta EE and Vue.js Your One-Stop Guide to Building Modern Full-Stack Applications with Jakarta EE and Vue.js — Daniel Andres Pelaez Lopez Full-Stack Web Development with Jakarta EE and Vue.js Your One-Stop Guide to Building Modern Full-Stack Applications with Jakarta EE and Vue.js Daniel Andres Pelaez Lopez Full-Stack Web Development with Jakarta EE and Vue.js Daniel Andres Pelaez Lopez Medellin, Colombia ISBN-13 (pbk): 978-1-4842-6341-9 ISBN-13 (electronic): 978-1-4842-6342-6 https://doi.org/10.1007/978-1-4842-6342-6 Copyright © 2021 by Daniel Andres Pelaez Lopez This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Louise Corrigan Development Editor: James Markham Coordinating Editor: Nancy Chen Cover designed by eStudioCalamar Cover image designed by Freepik (www.freepik.com) Distributed to the book trade worldwide by Springer Science+Business Media New York, 1 New York Plaza, New York, NY 10004. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected]; for reprint, paperback, or audio rights, please e-mail [email protected]. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/9781484263419. For more detailed information, please visit http://www.apress.com/source-code. Printed on acid-free paper To my family, who gave me the push to move forward when I needed it the most. Table of Contents About the Author �����������������������������������������������������������������������������������������������������xv About the Technical Reviewer �������������������������������������������������������������������������������xvii Acknowledgments ��������������������������������������������������������������������������������������������������xix Introduction ������������������������������������������������������������������������������������������������������������xxi Chapter 1: Full-Stack Web Development with Jakarta EE ����������������������������������������1 Technical Requirements ����������������������������������������������������������������������������������������������������������������1 Using Jakarta Enterprise Edition as a Back-End Layer �����������������������������������������������������������������2 Java Enterprise Edition ������������������������������������������������������������������������������������������������������������2 Jakarta Enterprise Edition �������������������������������������������������������������������������������������������������������3 Using Eclipse GlassFish Application Server: An Open Source Jakarta EE Reference Implementation �����������������������������������������������������������������������������������������������������������������������4 Using Apache Netbeans IDE ����������������������������������������������������������������������������������������������������4 Jakarta EE Project Structure �������������������������������������������������������������������������������������������������11 Running the Jakarta EE Project ���������������������������������������������������������������������������������������������21 Summary�������������������������������������������������������������������������������������������������������������������������������������24 Extended Knowledge ������������������������������������������������������������������������������������������������������������������24 Chapter 2: Vue�js as a Front-End Layer ������������������������������������������������������������������25 Technical Requirements ��������������������������������������������������������������������������������������������������������������25 Vue�js �������������������������������������������������������������������������������������������������������������������������������������26 Understanding NodeJS and NPM ������������������������������������������������������������������������������������������26 Hello World Project with a Vue�js CLI �������������������������������������������������������������������������������������28 Using Visual Studio Code and Vue�js ��������������������������������������������������������������������������������������36 Vue�js Project Structure ���������������������������������������������������������������������������������������������������������39 Running a Vue�js Project ��������������������������������������������������������������������������������������������������������44 Debugging a Vue�js Application ���������������������������������������������������������������������������������������������48 v Table of ConTenTs Summary�������������������������������������������������������������������������������������������������������������������������������������62 Extended Knowledge ������������������������������������������������������������������������������������������������������������������62 Chapter 3: Getting Started with Vue�Js ������������������������������������������������������������������63 Technical Requirements ��������������������������������������������������������������������������������������������������������������64 Creating Our Business Entities Using TypeScript ������������������������������������������������������������������������64 Defining the Role�ts Enum �����������������������������������������������������������������������������������������������������65 Defining the User�ts Entity �����������������������������������������������������������������������������������������������������65 Defining the State�ts Entity ����������������������������������������������������������������������������������������������������67 Creating the Storage Using Vuex �������������������������������������������������������������������������������������������������67 Defining the Vue�js Components �������������������������������������������������������������������������������������������������70 Defining the Navigation Structure �����������������������������������������������������������������������������������������71 UserList�vue: Using Declarative Rendering, Methods, and Lifecycle Events ��������������������������77 UserForm�vue: Using Props, Handling User Input, Conditional Rendering, and Emitted Events ����������������������������������������������������������������������������������������������������������������������������82 Defining the UserForm�ts TypeScript Class ���������������������������������������������������������������������������84 UserNew�vue: Reusing the UserForm Component and Router Redirection ���������������������������92 UserUpdate�vue: Reusing UserForm Component with Props and Router Redirection �����������95 The Final User Management Application ����������������������������������������������������������������������������������100 Summary�����������������������������������������������������������������������������������������������������������������������������������109 Extended Knowledge ����������������������������������������������������������������������������������������������������������������110 Chapter 4: Requirement Analysis for Your Full-Stack Web Application ���������������111 Daniel’s Delivery �����������������������������������������������������������������������������������������������������������������������112 Technical Details about Daniel’s Delivery Web Page �����������������������������������������������������������112 Analyzing the Current Team and Costs ��������������������������������������������������������������������������������117 A Proposal for the New Daniel’s Delivery ����������������������������������������������������������������������������������121 Possible Causes of the Current Situation ����������������������������������������������������������������������������122 Defining a New Architecture ������������������������������������������������������������������������������������������������123 An Agile Approach for the New Daniel’s Delivery ����������������������������������������������������������������������127 Defining High-Level Features: Epics ������������������������������������������������������������������������������������128 Schedule the Plan ����������������������������������������������������������������������������������������������������������������128 vi Table of ConTenTs Writing Stories in an Iterative and Incremental Way �����������������������������������������������������������������130 Food Services Management Epic ����������������������������������������������������������������������������������������130 Delivery Flow Epic ���������������������������������������������������������������������������������������������������������������131 Finding Quality Attributes ����������������������������������������������������������������������������������������������������������134 Security Epic ������������������������������������������������������������������������������������������������������������������������135 Infrastructure Epic ���������������������������������������������������������������������������������������������������������������137 A Traversal Quality Attribute: Maintainability �����������������������������������������������������������������������138 Summary�����������������������������������������������������������������������������������������������������������������������������������141 Questions ����������������������������������������������������������������������������������������������������������������������������������142 Chapter 5: Modeling Your Entities and Data with JPA ������������������������������������������143 Technical Requirements ������������������������������������������������������������������������������������������������������������144 Defining Your Entity-Relationship Model �����������������������������������������������������������������������������������144 Extracting Business Entities from User Stories �������������������������������������������������������������������144 Choosing Entities and Properties�����������������������������������������������������������������������������������������147 Defining the Database Entity-Relationship Model ���������������������������������������������������������������149 Building Your JPA Entities ���������������������������������������������������������������������������������������������������������150 Alternatives to Create JPA Entities ��������������������������������������������������������������������������������������150 Generating JPA Entities Using Netbeans �����������������������������������������������������������������������������152 Understanding JPA Configuration ���������������������������������������������������������������������������������������������162 FoodServiceData Entity �������������������������������������������������������������������������������������������������������162 DeliveryData Entity ��������������������������������������������������������������������������������������������������������������165 ItemData Entity ��������������������������������������������������������������������������������������������������������������������168 Understanding the persistence�xml File Basics �������������������������������������������������������������������170 Designing the Persistence Layer�����������������������������������������������������������������������������������������������172 Understanding the Packages �����������������������������������������������������������������������������������������������172 Defining our Business Entities ���������������������������������������������������������������������������������������������174 User Entity ���������������������������������������������������������������������������������������������������������������������������175 FoodService Entity ���������������������������������������������������������������������������������������������������������������176 FoodProduct Entity ��������������������������������������������������������������������������������������������������������������177 Item Entity ���������������������������������������������������������������������������������������������������������������������������179 Delivery Entity ���������������������������������������������������������������������������������������������������������������������180 vii Table of ConTenTs Defining Aggregates ������������������������������������������������������������������������������������������������������������181 Designing Repositories ��������������������������������������������������������������������������������������������������������182 Implementing the Persistence Layer ����������������������������������������������������������������������������������������184 Defining the Structure and Responsibilities ������������������������������������������������������������������������185 FoodService Persistence Layer �������������������������������������������������������������������������������������������186 Delivery Persistence Layer ��������������������������������������������������������������������������������������������������191 FoodProduct Persistence Layer �������������������������������������������������������������������������������������������195 Defining the Provider for the CDI �����������������������������������������������������������������������������������������199 Testing the Persistence Layer ���������������������������������������������������������������������������������������������������201 Unit Tests with JUnit and Mockito ���������������������������������������������������������������������������������������201 Integration Tests Using Arquillian and Derby �����������������������������������������������������������������������204 Summary�����������������������������������������������������������������������������������������������������������������������������������211 Questions ����������������������������������������������������������������������������������������������������������������������������������212 Chapter 6: Designing Your Front- End UI with Vue�Js Components �����������������������213 Technical Requirements ������������������������������������������������������������������������������������������������������������214 Defining the Basic Wireframes for New Daniel’s Delivery ��������������������������������������������������������214 Home Page Wireframe ���������������������������������������������������������������������������������������������������������214 Delivery Flow �����������������������������������������������������������������������������������������������������������������������215 Food Service Settings Flow �������������������������������������������������������������������������������������������������220 Splitting Your Wireframes into Vue�js Pages and Components ��������������������������������������������������224 Delivery Page�����������������������������������������������������������������������������������������������������������������������225 Food Services Settings Page �����������������������������������������������������������������������������������������������229 Other Pages �������������������������������������������������������������������������������������������������������������������������234 Creating Reusable Components and Compose Them in a Hierarchy ����������������������������������������235 Delivery�vue �������������������������������������������������������������������������������������������������������������������������235 FoodProduct�vue ������������������������������������������������������������������������������������������������������������������236 FoodService�vue ������������������������������������������������������������������������������������������������������������������237 Login�vue �����������������������������������������������������������������������������������������������������������������������������238 Routing through URL to Components and Sending the Data ����������������������������������������������������239 Defining the Navigation Structure for the Delivery Flow �����������������������������������������������������239 Creating a Router Structure: Navigating to New Pages �������������������������������������������������������241 viii Table of ConTenTs Delivery�vue: Using Router-View for Navigation ������������������������������������������������������������������244 CartItems Component: A Vue�js Approach ���������������������������������������������������������������������������������245 Component Logic �����������������������������������������������������������������������������������������������������������������246 HTML Structure �������������������������������������������������������������������������������������������������������������������249 Summary�����������������������������������������������������������������������������������������������������������������������������������253 Extended Knowledge ����������������������������������������������������������������������������������������������������������������253 Chapter 7: Creating Your Back End with Jakarta EE ��������������������������������������������255 Technical Requirements ������������������������������������������������������������������������������������������������������������255 Designing and Implementing the Business Layer ���������������������������������������������������������������������256 Packages for the Business Layer ����������������������������������������������������������������������������������������256 FoodService Business Layer �����������������������������������������������������������������������������������������������257 FoodProduct Business Layer �����������������������������������������������������������������������������������������������260 Delivery Business Layer ������������������������������������������������������������������������������������������������������264 Defining Your RESTful JAX-RS Services ������������������������������������������������������������������������������������266 Designing the RESTful API ���������������������������������������������������������������������������������������������������266 Using JAX-RS as a RESTful Framework ������������������������������������������������������������������������������277 Putting It All Together Using Jakarta EE ������������������������������������������������������������������������������������284 Contexts and Dependency Injection for Jakarta EE �������������������������������������������������������������285 Joining Our New Daniel’s Delivery Website Layers �������������������������������������������������������������286 Testing RESTful JAX-RS Services Using Arquillian ��������������������������������������������������������������������292 Adding New Maven Dependencies for Arquillian �����������������������������������������������������������������293 Creating an Integration Test for DeliveryController ��������������������������������������������������������������294 Summary�����������������������������������������������������������������������������������������������������������������������������������297 Extended Knowledge ����������������������������������������������������������������������������������������������������������������298 Chapter 8: Connecting Your UI with Your Back End ����������������������������������������������299 Technical Requirements ������������������������������������������������������������������������������������������������������������299 Preparing the Back End for Integration �������������������������������������������������������������������������������������300 Adding New Endpoints to Our Back End ������������������������������������������������������������������������������300 Allowing Cross Origin Resource Sharing Calls to Our Back End ������������������������������������������312 ix Table of ConTenTs Handling Environment Properties for Jakarta EE ����������������������������������������������������������������313 Exception Handling in JAX-RS ���������������������������������������������������������������������������������������������316 Integrating Vue�js and the Back End �����������������������������������������������������������������������������������������318 Handling Environment Properties in Vue�js ��������������������������������������������������������������������������318 Creating Axios Components to Handle API Calls ������������������������������������������������������������������319 Using Axios Components from the Vue�js Components �������������������������������������������������������325 Handling Exceptions from Our Back-End Services ��������������������������������������������������������������330 Summary�����������������������������������������������������������������������������������������������������������������������������������332 Extended Knowledge ����������������������������������������������������������������������������������������������������������������333 Chapter 9: Securing Your Full-Stack Application �������������������������������������������������335 Technical Requirements ������������������������������������������������������������������������������������������������������������335 Security Basics: Authentication and Authorization ��������������������������������������������������������������������336 Authentication: Who Are You? ����������������������������������������������������������������������������������������������336 Authorization: What Can You Do? �����������������������������������������������������������������������������������������339 Understanding OpenID Connect Protocol ����������������������������������������������������������������������������������342 The Authorization Code Flow in the New Daniel’s Delivery Website ������������������������������������342 Using the Access and Refresh Tokens ���������������������������������������������������������������������������������347 JSON Web Tokens (JWT) ������������������������������������������������������������������������������������������������������352 Keycloak: An Open Source Identity Provider �����������������������������������������������������������������������������354 Installing Keycloak ��������������������������������������������������������������������������������������������������������������355 Creating a Realm �����������������������������������������������������������������������������������������������������������������356 Creating a New User ������������������������������������������������������������������������������������������������������������359 Configuring OpenID Connect �����������������������������������������������������������������������������������������������364 Summary�����������������������������������������������������������������������������������������������������������������������������������366 Extended Knowledge ����������������������������������������������������������������������������������������������������������������367 Chapter 10: Authentication and Authorization �����������������������������������������������������369 Technical Requirements ������������������������������������������������������������������������������������������������������������369 Using Keycloak as the Source of Users ������������������������������������������������������������������������������������370 Keycloak Client ��������������������������������������������������������������������������������������������������������������������371 New UserRepository Implementation ����������������������������������������������������������������������������������372 x