Book Image

ASP.NET Core and Vue.js

By : Devlin Basilan Duldulao
Book Image

ASP.NET Core and Vue.js

By: Devlin Basilan Duldulao

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
ASP.NET Core and Vue.js
Devlin Basilan Duldulao
Jun, 2021 | 478 pages
Small book image
Hands-On RESTful Web Services with ASP.NET Core 3
Samuele Resca
Dec, 2019 | 510 pages
Small book image
Building Real-World Web Applications with Vue.js 3
Joran Quinten
Jan, 2024 | 318 pages
Small book image
Mastering Minimal APIs in ASP.NET Core
Emanuele Bartolesi | Andrea Tosato | Marco Minerva
Oct, 2022 | 240 pages
Table of Contents (25 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
1
Section 1: Getting Started
Section 1: Getting Started
Free Chapter
2
Chapter 1: Getting Started with ASP.NET Core and Vue.js
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?
Introducing Vue.js
Summary
3
Chapter 2: Setting Up a Development Environment
Chapter 2: Setting Up a Development Environment
Technical requirements
Installing and configuring VS Code, Visual Studio 2019, VS for Mac, and Rider
Installing .NET SDK, Node.js, 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
4
Section 2: Backend Development
Section 2: Backend Development
5
Chapter 3: Starting Your First ASP.NET Core Project
Chapter 3: Starting Your First ASP.NET Core Project
Technical requirements
Creating an ASP.NET Core project
Understanding the Program.cs file
Demystifying the Startup.cs file
Getting started with Swashbuckle
Summary
6
Chapter 4: Applying Clean Architecture to an ASP.NET Core Solution
Chapter 4: Applying Clean Architecture to an ASP.NET Core Solution
Technical requirements
Introducing clean architecture
The core layer – directory
The infrastructure layer – directory
The presentation layer – directory
Managing tests – directories
Structuring a clean architecture solution
Summary
7
Chapter 5: Setting Up DbContext and Controllers
Chapter 5: Setting Up DbContext and Controllers
Technical requirements
Writing entities and enums
Setting up a database, EF Core, and DbContext
Writing controllers and routes
Testing controllers with Swagger UI
Summary
8
Chapter 6: Diving into CQRS
Chapter 6: Diving into CQRS
Technical requirements
What is CQRS?
What is the mediator pattern?
Why learn CQRS?
When to use CQRS
Drawbacks of CQRS
Summary
9
Chapter 7: CQRS in Action
Chapter 7: CQRS in Action
Technical requirements
Implementing CQRS
Using FluentValidation
Using AutoMapper
Writing queries
Writing commands
Writing IServiceCollection
Summary
10
Chapter 8: API Versioning and Logging in ASP.NET Core
Chapter 8: API Versioning and Logging in ASP.NET Core
Technical requirements
API versioning
Logging in ASP.NET Core
Summary
11
Chapter 9: Securing ASP.NET Core
Chapter 9: Securing ASP.NET Core
Technical requirements
Understanding ASP.NET Core Identity
Introducing IdentityServer4
Customer identity and access management (CIAM)
Authentication implementation using JWT
Summary
12
Chapter 10: Performance Enhancement with Redis
Chapter 10: Performance Enhancement with Redis
Technical requirements
In-memory caching in ASP.NET Core
Distributed caching
Setting up and running Redis
Implementing Redis in ASP.NET Core
Summary
13
Section 3: Frontend Development
Section 3: Frontend Development
14
Chapter 11: Vue.js Fundamentals in a Todo App
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
Common features in a Vue component
Summary
Further reading
15
Chapter 12: Using a UI Component Library and Creating Routes and Navigations
Chapter 12: Using a UI Component Library and Creating Routes and Navigations
Technical requirements
Using a third-party 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
16
Chapter 13: Integrating a Vue.js Application with ASP.NET Core
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
17
Chapter 14: Simplifying State Management with Vuex and Sending GET HTTP Requests
Chapter 14: Simplifying State Management with Vuex and Sending GET HTTP Requests
Technical requirements
Understanding complex state management
Sending an HTTP request in Vue.js
Setting up state management using Vuex
Summary
18
Chapter 15: Sending POST, DELETE, and PUT HTTP Requests in Vue.js with Vuex
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
19
Chapter 16: Adding Authentication in Vue.js
Chapter 16: Adding Authentication in Vue.js
Technical requirements
Setting up Vuex for authentication
Writing an auth guard
HTTP interceptor
Auto login
Summary
20
Section 4: Testing and Deployment
Section 4: Testing and Deployment
21
Chapter 17: Input Validations in Forms
Chapter 17: Input Validations in Forms
Technical requirements
Installing an input validation library
Using validators in forms
Summary
22
Chapter 18: Writing Integration Tests Using xUnit
Chapter 18: Writing Integration Tests Using xUnit
Technical requirements
Getting started with automated testing
Installing MS SQL Server in a Docker container
Understanding xUnit
Understanding unit testing
Understanding integration testing
Summary
23
Chapter 19: Automatic Deployment Using GitHub Actions and Azure
Chapter 19: Automatic Deployment Using GitHub Actions and Azure
Technical requirements
Introducing GitHub Actions – a CI/CD tool
Understanding GitHub Actions
Understanding where to deploy
Automated deployment to Azure App Service using GitHub Actions
Summary
Why subscribe?
24
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Leave a review - let other readers know what you think

Introducing Vue.js

Vue.js is a JavaScript framework for building user interfaces. In a nutshell, Vue.js gives frontend developers everything that they would want. Vue.js has the characteristics of being performant, size-efficient, progressive, developer-friendly, and has one of the slimmest barriers to entry if you are new to frontend development.

Today, Vue.js has more than 1.3 million weekly active users (based on the statistics of Vue.js Devtool extensions) and more than 8 million npm downloads per month.

Today, Vue.js is being used by some of the most iconic and influential organizations around the world, such as Apple, IBM, Microsoft, Google, Nike, Wikimedia, NASA, Pixar, Louis Vuitton, L'Oréal, and tens of thousands of businesses of all sizes.

In the next couple of sections of this chapter, we will check out what the Vue.js core team has added in the new Vue.js 3, and whether learning Vue.js a good investment of your time.

Let's find out.

What's new in Vue.js?

After 2 years of development, the Vue.js core team has finally released the latest Vue.js, version 3, codenamed One Piece. The changes are listed here:

  • More maintainable: The Vue.js code base has been re-written in TypeScript for maintainability, and the internals are more modular.
  • Faster: Vue.js 3 is faster and has better performance than Vue.js 2. The new version has a new proxy-based reactivity system.
  • Smaller: Vue.js has tree shaking; tree shaking is a method to remove unused libraries from the project automatically. This capability is essential to make the file size smaller than the previous version. Vue.js 3 also has some compile-time flags that allow you to drop things that cannot automatically be tree-shaken.
  • Scales better: Vue.js now provides the Composition API, an easier way to reuse a segment of Vue.js component logic. The Composition API is an exciting new feature that solves complex use cases such as sharing business logic between components.
  • A better developer experience: For me, Vue.js already provided unparalleled developer experience, but Vue.js has improved it in Vue.js 3 (by introducing the new single-file component improvements, type checking for template expressions, and props of sub-components).

Why is learning Vue.js the right choice?

Along with Angular and React, Vue.js makes up one of the big three JavaScript tools for building modern web applications. Vue.js is not backed by a tech company such as Microsoft or any of the Facebook, Amazon, Apple, Netflix, and Alphabet (FAANG) companies. However, through the years of excellent tooling and the great documentation Vue.js provides, it has acquired numerous sponsors worldwide (you can see the list of sponsors at https://github.com/vuejs/vue). Having several sponsorships is good because there will be constant maintenance and improvements in Vue.js.

Third-party libraries such as UI libraries, routing libraries, forms, state management, static site generators, are getting better. Hence, making Vue.js a dependable, trustworthy, solid, stable, reliable, and developer-friendly framework for building enterprise applications. Not to mention that Vue.js has 100+ contributors right now, adding new features, improvements, and fixing all issues that appear on GitHub Vue.js.

This ends our quick overview of Vue.js and what is new in Vue.js 3. You have learned the current state of Vue.js and why considering Vue.js 3 as your frontend application best fits developing modern web applications nowadays.

Previous Section
End of Section 6
Next Section