ASP.NET Core and Vue.js

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

Devlin Basilan Duldulao

• Publisher: Packt Publishing
• Year: 2021
• ISBN:
  9781800201262
• Edition: 1
• Topic: Computer Science
• Subtopic: Open Source Programming
• Index: Computer Science

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.

Section 1: Getting Started

This section deals with a real-world scenario: how to start a web application project. The following chapters are included in this section:

• Chapter 1, Getting Started with ASP.NET Core and Vue.js
• Chapter 2, Setting Up a Development Environment

Chapter 1: Getting Started with ASP.NET Core and Vue.js

First of all, I would like to thank you for getting a copy of this book. This book is designed to teach busy developers how to build a real-world full-stack web application, from development to deployment. The book is tailored based on the step-by-step process I have developed throughout the years from my workshops. So, let's start the journey.

This chapter 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. You will also see how stable and reliable Vue.js is as an app and learn about the team behind writing and maintaining the Vue.js framework.

In this chapter, we will cover the following topics:

• Introducing ASP.NET Core
• What's new in .NET?
• What's new in ASP.NET Core?
• Introducing Vue.js

Technical requirements

You will find the repository for the application we will build at this URL: https://github.com/PacktPublishing/ASP.NET-Core-and-Vue.js.

Every chapter has its directory, and each directory has one folder named start and one folder named finish.

The start folders are the state of the repository before any code was written to it. The finish folders are the state of the repository at the end of every chapter.

Introducing ASP.NET Core

ASP.NET Core is an open source web app framework from Microsoft built to be fast, performant, and to work across platforms such as Windows, macOS, and Linux, for building modern cloud services and internet-connected apps. You can use the cross-platform VS Code to build your applications without installing virtualization software such as Parallels or VMware. You only need to install another instance of VS Code on another operating system, git clone your repository, install .NET Core SDK, and continue writing code.

The benefits that developers can get from smaller application surface areas brought by ASP.NET Core's framework structure are tighter security, improved performance, and reduced serving.

However, before we discuss what's new in ASP.NET Core 5, we must first know what .NET 5 is.

What's new in .NET?

.NET is an open source development platform created by Microsoft for building many different types of applications.

Microsoft now uses a single framework that unifies all .NET platforms, from developing for web apps, mobile, and the cloud, to desktop. .NET 5 includes both Xamarin and its web assembly platform, and to make it better, Microsoft was also able to move the support for Windows Presentation Foundation (WPF) and Windows Forms to the framework.

Look at Figure 1.1, which shows that the new .NET 5 platform provides a common set of APIs supporting the different runtime implementations:

Figure 1.1 – .NET: A unified platform

You can use the same APIs of .NET 5 and target different OSes, application types, and chip architectures. Plus, you will be able to configure or edit your build configuration using your favorite Integrated Development Environment (IDE) and text editors—you can use popular IDEs such as Visual Studio, Visual Studio for Mac, or Rider, or text editors such as Visual Studio Code or the plain old command line to build your application.

The highlights of .NET 5 are as follows:

• It includes the new C# 9 and F# 5.
• A new single-file publish type that executes your app out of a single binary.
• Runs .NET natively on Windows ARM64.
• Improves ARM64 performance (Linux and Windows) in the JIT and BCL libraries.
• Reduces the container image size and implements new container APIs to enable .NET to stay up to date with container runtime evolution.
• It enables easier migration from Newtonsoft.Json to System.Text.Json.

Now we can take a look at what's new in ASP.NET Core 5.

What's new in ASP.NET Core?

Here is a rough list of what has been added to the new ASP.NET Core web framework:

• Performance Improvements to HTTP/2: .NET 5 improves the performance of HTTP/2 by adding support for HPack dynamic compression of HTTP/2 response headers in Kestrel.
• Reduction in container image sizes: Sharing layers between two images dramatically reduces the size of the aggregate images that you pull. This reduction is achieved by re-platting the SDK image on the ASP.NET runtime image.
• Reloadable endpoints via configuration for Kestrel: Kestrel can now observe changes to configurations passed to KestrelServerOptions.Configure. Then it can be applied to any new endpoints without restarting your application.
• JSON extension methods for HttpRequest and HttpResponse: Using the new ReadFromJsonAsync and WriteAsJsonAsync extension methods, you can now easily consume and use JSON data from HttpRequest and HttpResponse. The JSON extension methods can also be written with an endpoint routing to create JSON APIs like so:
  endpoints.MapGet("/weather/{city:alpha}",
  async context =>
  {
  var city = (string)context.Request
  .RouteValues["city"];
  var weather = GetFromDatabase(city);
  await context.Response.WriteAsJsonAsync(weather);
  });
• An extension method allows anonymous access to an endpoint: The AllowAnonymous extension allows anonymous access to an endpoint when using endpoint routing. In the following code, the extension method, AllowAnonymous(), is chained after calling the MapGet method:
  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
  app.UseRouting();
  app.UseAuthentication();
  app.UseAuthorization();
  app.UseEndpoints(endpoints =>
  {
  endpoints.MapGet("/...