ASP.NET Core and Vue.js

ASP.NET Core and Vue.js

by Devlin Basilan Duldulao
Released June 2021
Publisher(s): Packt Publishing
ISBN: 9781800206694

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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

Product information

  • Title: ASP.NET Core and Vue.js
  • Author(s): Devlin Basilan Duldulao
  • Release date: June 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781800206694