▶Book Description
This book will walk you through the process of developing an e-commerce application from start to finish, utilizing an ASP.NET Core web API and Vue.js Single-Page Application (SPA) frontend.
We will build the application using a featureslice approach, whereby in each chapter we will add the required frontend and backend changes to complete an entire feature. In the early chapters, we’ll keep things fairly simple to get you started, but by the end of the book, you’ll be utilizing some advanced concepts, such as server-side rendering and continuous integration and deployment.
You will learn how to set up and configure a modern development environment for building ASP.NET Core web APIs and Vue.js SPA frontends.You will also learn about how ASP.NET Core differs from its predecessors, and how we can utilize those changes to our benefit.
Finally, you will learn the fundamentals of building modern frontend applications using Vue.js, as well as some of the more advanced concepts, which can help make you more productive in your own applications in the future.
▶What You Will Learn
⦁ Setup a modern development environment for building both client-side and server-side code
⦁ Use Vue CLI to scaffold front-end applications
⦁ Build and compose a set of Vue.js components
⦁ Setup and configure client-side routing to introduce multiple pages into a SPA
⦁ Integrate popular CSS frameworks with Vue.js to build a product catalogue
⦁ Build a functioning shopping cart that persists its contents across browser sessions
⦁ Build client-side forms with immediate validation feedback using an open-source library dedicated to Vue.js form validation
⦁ Refactor backend application to use the OpenIddict library
▶Key Features
⦁ Create fast, rich and reactive client side applications with Vue.js and ASP.NET Core.
⦁ Leverage Vue components efficiently to build state of the art user interfaces.
⦁ Work with Vuex and Nuxt.js to build ASP.NET Core based applications that are powerful, consistent, and maintainable
▶Who This Book Is For
This book is aimed at ASP.NET developers who are looking for an entry point in learning how to build a modern client-side SPA with Vue.js, or those with a basic understanding of Vue.js who are looking to build on their knowledge and apply it to a real-world application. Knowledge of JavaScript is not necessary, but would be an advantage.
▶What this book covers
⦁ Chapter 1, Understanding the Fundamentals, starts by looking at the fundamentals of Vue.js to give readers a basic understanding of the techniques used to build the sample applications later in the book. It discusses some of the benefits of Vue.js, as well as some of the reasons why we'd bother to choose it for building our applications. Finally, it looks at how ASP.NET Core / EF Core differ from their previous counterparts, focusing on the very latest versions of the frameworks, and putting the emphasis on the newest features that you may not know about yet.
⦁ Chapter 2, Setting Up the Development Environment, walks you through the process of installing and configuring the tools that you'll need to build and run an ASP.NET Core and Vue.js SPA. It takes the cross-platform nature of ASP.NET Core into consideration while evaluating some of the options available to us when selecting a client-side package manager, an IDE, and an RDBMS. Finally, it shows you how to install some productivity tools that make our lives far easier while building Vue.js applications with Google Chrome.
⦁ Chapter 3, Getting Started with the Project, looks at the options available to you when starting and scaffolding a brand new project with ASP.NET Core and Vue.js. It introduces the basics of what webpack is and how it works, before scaffolding an application that will form the foundations that will be built on for the rest of the book. Finally, it looks at how to refactor the default application structure to meet your own needs and preferences.
⦁ Chapter 4, Building Our First Vue.js Components, jumps into building a basic product list component, before composing a component structure based on the standard master-details pattern to display more information about a selected product. It then introduces client-side routing by refactoring the UI into separate pages for the product list and details components, before replacing the hardcoded product data with dynamic data fetched from the backend API.
⦁ Chapter 5, Building a Product Catalog, expands the existing components into a fully featured product catalog, including filtering, sorting, and searching. It also improves the existing look and feel of the application by introducing the Bootstrap CSS framework, as well as adding animations and loading indicators in between page changes. The reader will learn how to identify and extract duplication into common reusable components, as well as how to import and render components from third-party libraries.
⦁ Chapter 6, Building a Shopping Cart, starts by evaluating the options available to us for persistent shopping cart items. It then introduces Vuex for centralizing client-side state and enabling access to it from multiple components. Readers will then learn how to consume Vuex state by building a shopping cart component, as well as a shopping cart summary component to display it. They will also learn how to create custom Vue.js filters to reduce duplication in presentation logic, as well as how to provide feedback to users by displaying toast messages. Finally, we will see how to quickly and easily persist Vuex state to local storage to make sure that it is available on subsequent visits to the application.
⦁ Chapter 7, User Registration and Authentication, looks at how to add access control using JWT-based authentication. You will learn how to protect API routes using ASP.NET Core middleware and action filters, as well as how to prevent access to client-side pages using Vue.js router navigation guards. You will also extend the existing Vuex store to include register and login functionality, as well as building the necessary components for consuming it.
⦁ Chapter 8, Processing Payments, completes the user journey of the customer by implementing a fully functioning checkout page, including payment processing with Stripe. You will learn why Stripe is the perfect library for payment processing in any type of e-commerce website, as well as how to integrate it into a Vue.js client application and ASP.NET Core API. You will also learn how to add rich client-side validation to a custom checkout form component, which provides immediate feedback to the user as they start typing in each field.
⦁ Chapter 9, Building an Admin Panel, adds the ability to manage the existing product catalog, and add new products to the database. Readers will learn how to reduce duplication by extracting common functionality into a base component and then using component inheritance to extend it. You will build a collection of reusable form input components and then refactor the existing forms to make use of them.
⦁ Chapter 10, Deployment, completes the first iteration of the application by deploying it to a production cloud environment. We start by registering for a Microsoft Azure account, before learning how to set up and configure our environment to include an app and database server. Readers will then learn how to prepare the application for deployment, including the configuration of multiple database providers to support SQL servers in production, and PostgreSQL in development. They will also learn how to enable logging within Azure, as well as how to force HTTPS connections to increase the security of the application. Finally, we will enable automated Git deployments to publish the application on every push to a specific Git repository.
⦁ Chapter 11, Authentication and Refresh Token Flow, builds on the existing authentication mechanism by adding refresh token support. You will learn how and why this increases the security of the application, as well as how to implement refresh token flow in an ASP.NET Core API. You will then learn how to add a client-side API request interceptor to automatically refresh users' access tokens as and when they expire, allowing them to remain logged in permanently.
⦁ Chapter 12, Server-Side Rendering, begins by discussing some of the reasons why you would want to initially render a client-side SPA on the server. It then provides a detailed explanation of how to refactor the application to prepare it for SSR, before showing you how to set up and configure SSR. Finally, it looks at some of the limitations of SSR and how to fix them by conditionally rendering components that are not SSR-compatible, before looking at how to test that everything is working as it should be.
⦁ Chapter 13, Continuous Integration and Continuous Deployment, introduces a far more robust way of automating the application build and release pipeline using VSTS rather than the existing Azure Git deployment feature. It discusses the reasons, why you would want to use a CI/CD pipeline, and very briefly why VSTS is the perfect choice when building ASP.NET Core applications hosted within Azure. It walks you through the process of setting up a VSTS account, build and release, as well as enabling triggers to automatically build and deploy the application on every push to the existing Git repository.
