ASP.NET Core and Vue.js
eBook - ePub

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

  1. 478 Seiten
  2. English
  3. ePUB (handyfreundlich)
  4. Über iOS und Android verfĂŒgbar
eBook - ePub

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

Angaben zum Buch

Über dieses Buch

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.

HĂ€ufig gestellte Fragen

Wie kann ich mein Abo kĂŒndigen?
Gehe einfach zum Kontobereich in den Einstellungen und klicke auf „Abo kĂŒndigen“ – ganz einfach. Nachdem du gekĂŒndigt hast, bleibt deine Mitgliedschaft fĂŒr den verbleibenden Abozeitraum, den du bereits bezahlt hast, aktiv. Mehr Informationen hier.
(Wie) Kann ich BĂŒcher herunterladen?
Derzeit stehen all unsere auf MobilgerĂ€te reagierenden ePub-BĂŒcher zum Download ĂŒber die App zur VerfĂŒgung. Die meisten unserer PDFs stehen ebenfalls zum Download bereit; wir arbeiten daran, auch die ĂŒbrigen PDFs zum Download anzubieten, bei denen dies aktuell noch nicht möglich ist. Weitere Informationen hier.
Welcher Unterschied besteht bei den Preisen zwischen den AboplÀnen?
Mit beiden AboplÀnen erhÀltst du vollen Zugang zur Bibliothek und allen Funktionen von Perlego. Die einzigen Unterschiede bestehen im Preis und dem Abozeitraum: Mit dem Jahresabo sparst du auf 12 Monate gerechnet im Vergleich zum Monatsabo rund 30 %.
Was ist Perlego?
Wir sind ein Online-Abodienst fĂŒr LehrbĂŒcher, bei dem du fĂŒr weniger als den Preis eines einzelnen Buches pro Monat Zugang zu einer ganzen Online-Bibliothek erhĂ€ltst. Mit ĂŒber 1 Million BĂŒchern zu ĂŒber 1.000 verschiedenen Themen haben wir bestimmt alles, was du brauchst! Weitere Informationen hier.
UnterstĂŒtzt Perlego Text-zu-Sprache?
Achte auf das Symbol zum Vorlesen in deinem nÀchsten Buch, um zu sehen, ob du es dir auch anhören kannst. Bei diesem Tool wird dir Text laut vorgelesen, wobei der Text beim Vorlesen auch grafisch hervorgehoben wird. Du kannst das Vorlesen jederzeit anhalten, beschleunigen und verlangsamen. Weitere Informationen hier.
Ist ASP.NET Core and Vue.js als Online-PDF/ePub verfĂŒgbar?
Ja, du hast Zugang zu ASP.NET Core and Vue.js von Devlin Basilan Duldulao im PDF- und/oder ePub-Format sowie zu anderen beliebten BĂŒchern aus Informatik & Open-Source-Programmierung. Aus unserem Katalog stehen dir ĂŒber 1 Million BĂŒcher zur VerfĂŒgung.



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:
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
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:
    async context =>
    var city = (string)context.Request
    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.UseEndpoints(endpoints =>


  1. ASP.NET Core and Vue.js
  2. Contributors
  3. Preface
  4. Section 1: Getting Started
  5. Chapter 1: Getting Started with ASP.NET Core and Vue.js
  6. Chapter 2: Setting Up a Development Environment
  7. Section 2: Backend Development
  8. Chapter 3: Starting Your First ASP.NET Core Project
  9. Chapter 4: Applying Clean Architecture to an ASP.NET Core Solution
  10. Chapter 5: Setting Up DbContext and Controllers
  11. Chapter 6: Diving into CQRS
  12. Chapter 7: CQRS in Action
  13. Chapter 8: API Versioning and Logging in ASP.NET Core
  14. Chapter 9: Securing ASP.NET Core
  15. Chapter 10: Performance Enhancement with Redis
  16. Section 3: Frontend Development
  17. Chapter 11: Vue.js Fundamentals in a Todo App
  18. Chapter 12: Using a UI Component Library and Creating Routes and Navigations
  19. Chapter 13: Integrating a Vue.js Application with ASP.NET Core
  20. Chapter 14: Simplifying State Management with Vuex and Sending GET HTTP Requests
  21. Chapter 15: Sending POST, DELETE, and PUT HTTP Requests in Vue.js with Vuex
  22. Chapter 16: Adding Authentication in Vue.js
  23. Section 4: Testing and Deployment
  24. Chapter 17: Input Validations in Forms
  25. Chapter 18: Writing Integration Tests Using xUnit
  26. Chapter 19: Automatic Deployment Using GitHub Actions and Azure
  27. Other Books You May Enjoy