ASP.NET Core and Vue.js: Build real-world, scalable, full-stack applications using Vue.js 3, TypeScript, .NET 5, and Azure

✍ Scribed by Devlin Basilan Duldulao

• Publisher: Packt Publishing
• Year: 2021
• Tongue: English
• Leaves: 479
• Category: Library

✦ Synopsis

A busy .NET developer's step-by-step guide to building fully functional, cloud-ready, and professional web apps without diving into the theory of frameworks and libraries

Key Features

• Discover tenants of clean architecture in the latest ASP.NET Core 5 Web API
• Develop Vue.js 3 single-page applications (SPAs) using TypeScript and Vuex
• Learn techniques to secure, test, and deploy your full-stack web apps on Azure

Book Description

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.

What you will learn

• Discover CQRS and mediator pattern in the ASP.NET Core 5 Web API
• Use Serilog, MediatR, FluentValidation, and Redis in ASP.NET
• Explore common Vue.js packages such as Vuelidate, Vuetify, and Vuex
• Manage complex app states using the Vuex state management library
• Write integration tests in ASP.NET Core using xUnit and FluentAssertions
• Deploy your app to Microsoft Azure using the new GitHub Actions for continuous integration and continuous deployment (CI/CD)

Who this book is for

This app development book is for .NET developers who want to get started with Vue.js and build full-stack enterprise web applications. Web developers looking to build a proof-of-concept application quickly and pragmatically using their existing knowledge of ASP.NET Core as well as developers who want to write readable and maintainable code using TypeScript and the C# programming language will also find this book useful. The book assumes intermediate-level .NET knowledge along with an understanding of C# programming, JavaScript, and ECMAScript.

Table of Contents

1. Getting Started with ASP.NET Core and Vue.js
2. Setting Up a Development Environment
3. Starting Your First ASP.NET Core 5 Project
4. Applying Clean Architecture to an ASP.NET Core 5 Solution
5. Setting Up DbContext and Controllers
6. Diving into CQRS
7. CQRS in Action
8. API Versioning and Logging in ASP.NET Core
9. Securing ASP.NET Core
10. Performance Enhancement with Redis
11. Vue.js Fundamentals in a Todo App
12. Using a UI Component Library and Creating Routes and Navigations
13. Integrating a Vue.js Application with ASP.NET Core
14. Simplifying State Management with Vuex and Sending GET HTTP Requests

(N.B. Please use the Look Inside option to see further chapters)

✦ Table of Contents

Cover
Title Page
Copyright and Credits
Contributors
Table of Contents
Preface
Section 1: Getting Started
Chapter 1: Getting Started with ASP.NET Core and Vue.js
Technical requirements
Introducing ASP.NET Core
What's new in .NET?
What's new in ASP.NET Core?
Breaking changes in migration from ASP.NET Core 3.1 to ASP .NET Core 5.0
When to use ASP.NET Core
Why should you learn ASP.NET Core?
Introducing Vue.js
What's new in Vue.js ?
Why is learning Vue.js the right choice?
Summary
Chapter 2: Setting Up a Development Environment
Technical requirements
Installing and configuring VS Code, Visual Studio 2019, VS for Mac, and Rider
VS Code
Visual Studio 2019
Visual Studio for Mac
Rider
Installing .NET SDK, Node.js, and npm
.NET SDK
Node and npm
Setting up the .NET Core CLI and Vue CLI
Installing Postman and Vue DevTool
Installing Entity Framework Core tools
Installing a database provider
Installing Git version control
Summary
Section 2: Backend Development
Chapter 3: Starting Your First ASP.NET Core Project
Technical requirements
Creating an ASP.NET Core project
First command – dotnet new sln
Second command – dotnet new webapi --name Web
Third command – dotnet sln add [csproj-file-location]
The last command to run – dotnet run Web.csproj
Understanding the Program.cs file
Demystifying the Startup.cs file
Getting started with Swashbuckle
Introducing OpenAPI and Swagger
Built-in Swagger integration
Swagger documentation and Swagger UI in action
Summary
Chapter 4: Applying Clean Architecture to an ASP.NET Core Solution
Technical requirements
Introducing clean architecture
The core layer – directory
Domain – project
Application – project
Shared Kernel – NuGet project
The infrastructure layer – directory
Data – project
Shared – project
The presentation layer – directory
WebApi – project
client-app – non-project web application
Managing tests – directories
Unit test – project
Integration test – project
Structuring a clean architecture solution
Visual Studio 2019
Visual Studio for Mac
Rider
Summary
Chapter 5: Setting Up DbContext and Controllers
Technical requirements
Writing entities and enums
Creating entities and enums for the Travel Tour application
Setting up a database, EF Core, and DbContext
EF Core
DbContext
Setup
Writing controllers and routes
TourPackagesController
TourListsController
Testing controllers with Swagger UI
Summary
Chapter 6: Diving into CQRS
Technical requirements
What is CQRS?
What is the mediator pattern?
What is the MediatR package?
Why learn CQRS?
When to use CQRS
Drawbacks of CQRS
Summary
Chapter 7: CQRS in Action
Technical requirements
Implementing CQRS
Adding the MediatR package
Creating MediatR pipeline behaviors
Using FluentValidation
Using AutoMapper
Writing queries
Writing commands
Writing IServiceCollection
Summary
Chapter 8: API Versioning and Logging in ASP.NET Core
Technical requirements
API versioning
What is API versioning?
API versioning strategies
Deprecating an API
API versioning integration with OpenAPI
Logging in ASP.NET Core
Logging in ASP.NET Core
What is structured logging?
Serilog versus NLog
Configuring Serilog
Summary
Chapter 9: Securing ASP.NET Core
Technical requirements
Understanding ASP.NET Core Identity
ASP.NET Core Identity features
Introducing IdentityServer4
Customer identity and access management (CIAM)
Authentication implementation using JWT
Implementing token-based authentication
Checking Swagger UI
Summary
Chapter 10: Performance Enhancement with Redis
Technical requirements
In-memory caching in ASP.NET Core
Enabling in-memory caching in ASP.NET Core
Distributed caching
Setting up and running Redis
For Windows users
For macOS users
For Linux or Ubuntu users
Implementing Redis in ASP.NET Core 5
Code update
Summary
Section 3: Frontend Development
Chapter 11: Vue.js Fundamentals in a Todo App
Technical requirements
Starting a project using the Vue CLI
Files and folders generated by the Vue CLI
Getting started with a Vue component
Writing a Vue component
Common features in a Vue component
Writing local states in a Vue component
Adding a function in a Vue component
Looping in an array in a Vue component
If-else conditions in a Vue component
Creating and passing props
Life cycle hooks in a Vue component
Summary
Further reading
Chapter 12: Using a UI Component Library and Creating Routes and Navigations
Technical requirements
Using a third-party UI component library
Setting up a Vue.js project and installing a UI component library
Other third-party UI libraries
Adding navigation bars
Writing page components
Setting up Vue Router with lazy loading and eager loading
Summary
Chapter 13: Integrating a Vue.js Application with ASP.NET Core
Technical requirements
Putting ASP.NET Core Web API and a Vue.js app together as a single unit
Introducing Cross-Origin Resource Sharing or CORS
Enabling a CORS policy in ASP.NET Core
Summary
Chapter 14: Simplifying State Management with Vuex and Sending GET HTTP Requests
Technical requirements
Understanding complex state management
Understanding global state
Sending an HTTP request in Vue.js
Setting up state management using Vuex
Step 1 – Writing a store
Step 2 – Writing a module
Step 3 – Writing a module if we are using TypeScript
Step 4 – Writing an API service
Step 5 – Writing an action type
Step 6 – Writing an action
Step 7 – Writing a state
Step 8 – Writing a mutation
Step 9 – Writing a getter
Step 10 – Updating the store by inserting the module
Step 11 – Updating components with mapGetters and mapActions
Summary
Chapter 15: Sending POST, DELETE, and PUT HTTP Requests in Vue.js with Vuex
Technical requirements
Removing a tour list using Axios and Vuex
Adding a tour list using Axios and Vuex
Using a non-async action in Vuex
Removing a tour package using Axios and Vuex
Adding a tour package using Axios and Vuex
Updating a tour package using Axios and Vuex
Summary
Chapter 16: Adding Authentication in Vue.js
Technical requirements
Setting up Vuex for authentication
Writing an auth guard
HTTP interceptor
Auto login
Summary
Section 4: Testing and Deployment
Chapter 17: Input Validations in Forms
Technical requirements
Installing an input validation library
Using validators in forms
Summary
Chapter 18: Writing Integration Tests Using xUnit
Technical requirements
Getting started with automated testing
Benefits of automated testing
Installing MS SQL Server in a Docker container
Understanding xUnit
Features of xUnit
Using xUnit in ASP.NET Core
Understanding unit testing
Writing unit tests
Understanding integration testing
Writing integration tests
Summary
Chapter 19: Automatic Deployment Using GitHub Actions and Azure
Technical requirements
Introducing GitHub Actions – a CI/CD tool
Understanding GitHub Actions
GitHub Actions for .NET apps
Understanding where to deploy
When to deploy to Azure App Service?
When to deploy to Azure Functions?
When to deploy to Azure Static Web Apps?
When to deploy to Azure Kubernetes Service?
Automated deployment to Azure App Service using GitHub Actions
Syntax of the workflow file
Creating an Azure App Service instance in the Azure portal
Summary
Why subscribe?
Other Books You May Enjoy
Index