Book Image

ASP.NET Core and Vue.js

By : Devlin Basilan Duldulao
Book Image

ASP.NET Core and Vue.js

By: Devlin Basilan Duldulao

Overview of this book

Vue.js 3 is faster and smaller than the previous version, and TypeScript’s full support out of the box makes it a more maintainable and easier-to-use version of Vue.js. Then, there's ASP.NET Core 5, which is the fastest .NET web framework today. Together, Vue.js for the frontend and ASP.NET Core 5 for the backend make a powerful combination. This book follows a hands-on approach to implementing practical methodologies for building robust applications using ASP.NET Core 5 and Vue.js 3. The topics here are not deep dive and the book is intended for busy .NET developers who have limited time and want a quick implementation of a clean architecture with popular libraries. You’ll start by setting up your web app’s backend, guided by clean architecture, command query responsibility segregation (CQRS), mediator pattern, and Entity Framework Core 5. The book then shows you how to build the frontend application using best practices, state management with Vuex, Vuetify UI component libraries, Vuelidate for input validations, lazy loading with Vue Router, and JWT authentication. Later, you’ll focus on testing and deployment. All the tutorials in this book support Windows 10, macOS, and Linux users. By the end of this book, you’ll be able to build an enterprise full-stack web app, use the most common npm packages for Vue.js and NuGet packages for ASP.NET Core, and deploy Vue.js and ASP.NET Core to Azure App Service using GitHub Actions.
Table of Contents (25 chapters)
1
Section 1: Getting Started
4
Section 2: Backend Development
13
Section 3: Frontend Development
20
Section 4: Testing and Deployment

What this book covers

Chapter 1, Getting Started with ASP.NET Core and Vue.js, serves as a short recap regarding the current state of ASP.NET Core and Vue.js to give you a glimpse of what lies ahead in the web development of ASP.NET Core and Vue.js.

Chapter 2, Setting Up a Development Environment, will teach you how to set up your computer's development environment to build backend and frontend web applications. You will go through different IDEs and text editors to write code and make sure everything has been set up before proceeding with the app development.

Chapter 3, Starting Your First ASP.NET Core Project, shows the step-by-step process of creating an ASP.NET Core 5 Web API project. This chapter also describes the default folders and files in a newly created ASP.NET Core 5 Web API, particularly Program.cs and Start.cs, including the dependency services and middleware.

Chapter 4, Applying Clean Architecture to an ASP.NET Core Solution, teaches you the real-world organization of files, folders, projects, and ASP.NET Core app dependencies, preparing you for future big and scalable ASP.NET Core 5 enterprise applications.

Chapter 5, Setting Up DbContext and Controllers, will teach you how to set up a database, Entity Framework Core, DbContext, and how to write entities and enums in a clean architectural way. This chapter also teaches you how to write controllers and routes with Swagger UI to test controllers.

Chapter 6, Diving into CQRS, is all about the CQRS pattern, the mediator pattern, and the popular MediatR NuGet package for CQRS and pipeline behavior.

Chapter 7, CQRS in Action, shows you how to implement CQRS, use FluentValidation and AutoMapper, and write queries, commands, and IServiceCollection.

Chapter 8, API Versioning and Logging in ASP.NET Core, teaches you about API versioning, which is sometimes necessary to create maintainable APIs but can be problematic if not done correctly.

Chapter 9, Securing ASP.NET Core, discusses the integration of the ASP.NET Core 5 backend with the Vue.js 3 frontend. The chapter explores authentication and authorization in the ASP.NET Core 5 Web API by creating and handling JWT. This chapter then explains how to use JWT builder, writing custom JWT middleware, developing basic authentication, and adding role-based authorizations on GET, POST, PUT, and DELETE methods.

Chapter 10, Performance Enhancement with Redis, covers in-memory caching in ASP.NET Core, distributed caching, and implementing Redis.

Chapter 11, Vue.js Fundamentals in a Todo App, is entirely devoted to Vue.js, the Node Package Manager (npm), and the Vue CLI. These tools help developers to scaffold Vue.js projects with different configurations based on the user's options. This chapter also describes the Vue component's features and what you can do with them.

Chapter 12, Using a UI Component Library and Creating Routes and Navigations, teaches you how to use open source UI libraries built by different Vue.js communities. You will use one of the popular libraries in Vue.js, which will save you from spending countless hours building your components. Then you will set up the navigation and routing of your Vue.js 3 app with best practices in mind.

Chapter 13, Integrating a Vue.js Application with ASP.NET Core, explains how to put the ASP.NET Core Web API and the Vue.js application together as a single unit. You will look at how the CORS policy works and how to enable it.

Chapter 14, Simplifying State Management with Vuex and Sending GET HTTP Requests, is about sending HTTP requests and solving the most common problem in big web applications—the problem of syncing the state of a component with another component. In large and complex applications, you need a tool that centralizes your application's state and makes the data flow transparent and predictable.

Chapter 15, Sending POST, DELETE, and PUT HTTP Requests in Vue.js with Vuex, shows the step-by-step process of synchronizing fetching, removing, creating, and updating data in the frontend and backend. This chapter explains the effective state management of a Vue.js 3 application in the easiest way possible.

Chapter 16, Adding Authentication in Vue.js, explains the setting up of Vuex for authentication and writing an Auth Guard. This chapter also covers writing HTTP interceptors and setting up auto-login in the app.

Chapter 17, Input Validations in Forms, discusses the installation of an input validation library called Vuelidate and explains how to use validators in forms to prevent users from typing invalid inputs.

Chapter 18, Writing Integration Tests Using xUnit, explores ways to efficiently test ASP.NET Core 5 and Vue.js applications. This chapter serves as a guide for detecting bugs in applications before users use them.

Chapter 19, Automatic Deployment Using GitHub Actions and Azure, explains what GitHub Actions is, where to deploy apps, and how to implement automated deployment to Azure App Service using GitHub Actions.