Book Image

ASP.NET Core 2 and Vue.js

By : Stuart Ratcliffe
5 (1)
Book Image

ASP.NET Core 2 and Vue.js

5 (1)
By: Stuart Ratcliffe

Overview of this book

This book will walk you through the process of developing an e-commerce application from start to finish, utilizing an ASP.NET Core web API and Vue.js Single-Page Application (SPA) frontend. We will build the application using a featureslice approach, whereby in each chapter we will add the required frontend and backend changes to complete an entire feature. In the early chapters, we’ll keep things fairly simple to get you started, but by the end of the book, you’ll be utilizing some advanced concepts, such as server-side rendering and continuous integration and deployment. You will learn how to set up and configure a modern development environment for building ASP.NET Core web APIs and Vue.js SPA frontends.You will also learn about how ASP.NET Core differs from its predecessors, and how we can utilize those changes to our benefit. Finally, you will learn the fundamentals of building modern frontend applications using Vue.js, as well as some of the more advanced concepts, which can help make you more productive in your own applications in the future.

Related Content you might be interested in

Current Title:

Small book image
ASP.NET Core 2 and Vue.js
Stuart Ratcliffe
Jul, 2018 | 556 pages
Small book image
Building Forms with Vue.js
Marina Hernandez Mosti
Oct, 2019 | 108 pages
Small book image
Vue.js: Understanding its Tools and Ecosystem
Dave Berning
Nov, 2019 | 194 pages
Small book image
Vue.js 2 Web Development Projects
CHAU GUILLAUME
Nov, 2017 | 398 pages
Table of Contents (15 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Understanding the Fundamentals
Understanding the Fundamentals
Thinking in components
Introduction to Vue
Component behavior
Component presentation
ASP.NET Core – what's new?
EF Core – what's new?
Summary
2
Setting Up the Development Environment
Setting Up the Development Environment
Choosing a web browser
Installing frontend tools and dependencies
Installing backend tools and dependencies
Productivity tools
Summary
3
Getting Started with the Project
Getting Started with the Project
ASP.NET Core SPA templates versus CLI tools
An introduction to webpack
Scaffolding a project with the dotnet CLI
Refactoring the frontend setup
Refactoring the backend setup
Setting up the database
Testing the completed setup
Summary
4
Building Our First Vue.js Components
Building Our First Vue.js Components
Displaying a list of products
Conditional rendering
Component composition
Client-side routing
Fetching data from an API
Summary
5
Building a Product Catalog
Building a Product Catalog
Improving the existing UX
Extending the existing data model
Filtering on the server
Filtering on the client
Client-side sorting
Creating a search bar component
Summary
6
Building a Shopping Cart
Building a Shopping Cart
Evaluating our options
Finishing the product details page
Introduction to Vuex
Installing and configuring Vuex
Adding products to the cart
Creating a shopping cart page
Creating a currency filter
Removing products from the cart
Updating cart items
Adding a getter to display the cart total
Creating a cart summary component
Persisting the cart to local storage
Improving the UX with add to cart feedback
Summary
7
User Registration and Authentication
User Registration and Authentication
Adding JWT authentication to the API
Authentication and user registration in the client app
Protecting pages with navigation guards
Setting the authentication state on app startup
Summary
8
Processing Payments
Processing Payments
Why use Stripe?
Getting started with Stripe and client-side validation
Building the checkout components
Building a my account page
Fixing the register form component
Server-side payment processing
Adding an order list API endpoint
Summary
9
Building an Admin Panel
Building an Admin Panel
Extending the authentication endpoint with user roles
Client-side role-based authorization
Server-side role-based authorization
Hiding UI elements based on role
Building the admin panel components
Vue component inheritance
Building custom input controls
Persisting new products to the database
Remote validation with Vee-Validate
Tidying things up
Summary
10
Deployment
Deployment
Registering for an Azure account
Setting up an Azure environment
Preparing the application for deployment
Configuring Git deployments
Finalizing the apps configuration
Summary
11
Authentication and Refresh Token Flow
Authentication and Refresh Token Flow
Understanding refresh tokens
Adding refresh token support to the backend
Adding refresh token support to the frontend
Refreshing access tokens with axios interceptors
Finishing up
Summary
12
Server-Side Rendering
Server-Side Rendering
Why use SSR in the first place?
How does SSR work?
The easy way – Nuxt.js
Preparing the application for SSR
Setting up and configuring SSR
Enabling SSR
Conditionally rendering elements that rely on the browser
Testing our server-rendered application
Summary
13
Continuous Integration and Continuous Deployment
Continuous Integration and Continuous Deployment
CI/CD – why bother?
Disabling Azure app service Git deployments
Getting started with VSTS
Building a CI/CD pipeline
Enabling CD
Summary
14
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Adding JWT authentication to the API

In previous versions of ASP.NET Core, configuring authentication was far more cumbersome and not particularly intuitive. However, with the 2.0 release, Microsoft did a lot of work to refactor how authentication works in ASP.NET Core, and it's now a very simple process to add it to an ASP.NET Core web app.

Why JWTs?

For standard server-side web applications built with MVC, we'd most likely use cookies rather than JWTs, which is the default option if we don't specify one. However, as we're building a stateless web API with an SPA frontend, it makes much more sense to use JWTs in order to maintain the stateless nature of the application.

In traditional MVC applications...

Previous Section
End of Section 2
Next Section