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 pages
  2. English
  3. ePUB (mobile friendly)
  4. Available on iOS & Android
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

Book details
Book preview
Table of contents
Citations

About This Book

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.

Frequently asked questions

How do I cancel my subscription?
Simply head over to the account section in settings and click on “Cancel Subscription” - it’s as simple as that. After you cancel, your membership will stay active for the remainder of the time you’ve paid for. Learn more here.
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlego’s features. The only differences are the price and subscription period: With the annual plan you’ll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is ASP.NET Core and Vue.js an online PDF/ePUB?
Yes, you can access ASP.NET Core and Vue.js by Devlin Basilan Duldulao in PDF and/or ePUB format, as well as other popular books in Computer Science & Open Source Programming. We have over one million books available in our catalogue for you to explore.

Information

Year
2021
ISBN
9781800201262
Edition
1

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
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("/...

Table of contents

  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