ASP.NET Core 2 and Vue.js

ASP.NET Core 2 and Vue.js

by Stuart Ratcliffe
Released July 2018
Publisher(s): Packt Publishing
ISBN: 9781788839464

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Leverage ASP.NET core 2.0 web API and the power of Vue.js at the client side to create modern applications from scratch

Key Features

  • Create fast, rich and reactive client side applications with Vue.js and ASP.NET Core.
  • Leverage Vue components efficiently to build state of the art user interfaces.
  • Work with Vuex and Nuxt.js to build ASP.NET Core based applications that are powerful, consistent, and maintainable

Book Description

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.

What you will learn

  • Setup a modern development environment for building both client-side and server-side code
  • Use Vue CLI to scaffold front-end applications
  • Build and compose a set of Vue.js components
  • Setup and configure client-side routing to introduce multiple pages into a SPA
  • Integrate popular CSS frameworks with Vue.js to build a product catalogue
  • Build a functioning shopping cart that persists its contents across browser sessions
  • Build client-side forms with immediate validation feedback using an open-source library dedicated to Vue.js form validation
  • Refactor backend application to use the OpenIddict library

Who this book is for

This book is aimed at ASP.NET developers who are looking for an entry point in learning how to build a modern client-side SPA with Vue.js, or those with a basic understanding of Vue.js who are looking to build on their knowledge and apply it to a real-world application. Knowledge of JavaScript is not necessary, but would be an advantage.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. ASP.NET Core 2 and Vue.js
  3. Dedication
  4. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  5. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    4. Get in touch
      1. Reviews
  7. Understanding the Fundamentals
    1. Thinking in components
      1. What is a component?
      2. UI composition
    2. Introduction to Vue
      1. The Vue instance
        1. Attaching to the DOM
        2. Defining data properties
        3. Rendering data into the DOM using expressions
        4. Building component trees
      2. Reactivity
    3. Component behavior
      1. State
      2. Props
      3. Methods
      4. Computed properties
      5. Watchers
      6. Lifecycle hooks
    4. Component presentation
      1. Directives
        1. Attribute binding with v-bind
        2. Conditional display with v-show
        3. Control flow with v-if and v-else
        4. Rendering lists with v-for
        5. Event handling with v-on
        6. Form input binding with v-model
      2. Parent-child component communication
    5. ASP.NET Core – what's new?
      1. Middleware pipeline
      2. Application startup
      3. DI is a first-class citizen
    6. EF Core – what's new?
      1. Configuring relationships
      2. Global query filters
      3. Compiled queries
      4. In-memory provider for testing
    7. Summary
  8. Setting Up the Development Environment
    1. Choosing a web browser
    2. Installing frontend tools and dependencies
      1. Installing Node and npm
      2. Installing Vue
      3. npm or Yarn?
    3. Installing backend tools and dependencies
      1. Installing ASP.NET Core
      2. Installing PostgreSQL
      3. Choosing and installing an IDE
    4. Productivity tools
      1. Installing VS Code extensions
      2. Installing the Vue.js Chrome devtools extension
      3. Installing a Terminal Emulator on Windows (optional)
    5. Summary
  9. Getting Started with the Project
    1. ASP.NET Core SPA templates versus CLI tools
    2. An introduction to webpack
      1. What is webpack?
      2. How does it work?
      3. Basic webpack configuration
      4. Bundle splitting
      5. Production bundles
    3. Scaffolding a project with the dotnet CLI
    4. Refactoring the frontend setup
      1. Removing TypeScript
      2. Replacing the default components
    5. Refactoring the backend setup
      1. Refactoring to a feature folder structure
    6. Setting up the database
      1. Creating a database context
      2. Registering the database context for DI
      3. Creating the database
      4. Creating an initial migration
      5. Creating and seeding the database on start-up
    7. Testing the completed setup
    8. Summary
  10. Building Our First Vue.js Components
    1. Displaying a list of products
    2. Conditional rendering
    3. Component composition
    4. Client-side routing
    5. Fetching data from an API
    6. Summary
  11. Building a Product Catalog
    1. Improving the existing UX
      1. Choosing a UX framework
      2. What is Bootstrap-Vue?
      3. Installing additional required dependencies
      4. Modifying the webpack configuration to support SASS
      5. Updating the webpack vendor configuration
      6. Rebuilding the vendor bundle
      7. Adding application-wide layout elements
      8. Adding application-wide styles
      9. Styling the product list and product details components
      10. Fetching data before navigation
      11. Adding a page loading indicator
      12. Adding a transition on page change
    2. Extending the existing data model
      1. Dropping the existing database
      2. Adding new/updating existing entities
      3. Updating the DbContext class
      4. Creating a migration to reflect the model changes
      5. Updating the application's seed data
    3. Filtering on the server
      1. Updating controller actions to support filtering
      2. Testing our filtering logic
    4. Filtering on the client
      1. Installing additional dependencies
        1. Installing Font Awesome
        2. Installing additional npm packages
      2. Building an accordion component
        1. Defining the accordion template structure
        2. Defining the accordion behavior
        3. Styling the accordion component
      3. Building the filters component
        1. Scaffolding the filters component template
        2. Adding a brand filter
        3. Adding a price filter
        4. Adding a screen size filter
        5. Adding the remaining color, OS, and feature filters
        6. Scaffolding the filters component behavior
        7. Defining the filters component computed properties
        8. Defining the filters component methods
        9. Styling the filters component
      4. Adding the filters component to the catalog page
        1. Updating the catalog page template
        2. Adding the catalog page filter behavior
        3. Tidying up our existing components
        4. Testing the completed filtering logic
      5. Refactoring the filters component
        1. Highlighting duplication in our existing implementation
        2. Extracting a common multi-select filter component
        3. Extracting a common range filter component
        4. Rendering the new multi-select and range filter components
        5. Testing that everything still works
    5. Client-side sorting
      1. Building a sort component
      2. Adding the sort component to the catalog page
    6. Creating a search bar component
      1. Triggering API requests using watchers
      2. Debouncing API requests to limit how often they fire
    7. Summary
  12. Building a Shopping Cart
    1. Evaluating our options
      1. Persisting to the database
      2. Persisting to session state
      3. Persisting to local storage
    2. Finishing the product details page
      1. Creating the gallery component
      2. Adding variants to the product details component
    3. Introduction to Vuex
      1. What is Vuex?
      2. How does Vuex work?
        1. Mutations
        2. Actions
        3. Getters
      3. Putting it all together
    4. Installing and configuring Vuex
    5. Adding products to the cart
      1. Creating the mutations
      2. Creating an action
    6. Creating a shopping cart page
      1. Creating a CartItem component
      2. Displaying the list of cart items
    7. Creating a currency filter
    8. Removing products from the cart
    9. Updating cart items
    10. Adding a getter to display the cart total
    11. Creating a cart summary component
    12. Persisting the cart to local storage
    13. Improving the UX with add to cart feedback
    14. Summary
  13. User Registration and Authentication
    1. Adding JWT authentication to the API
      1. Why JWTs?
      2. Configuring JWT authentication
      3. Issuing JWTs
      4. Adding user role support
      5. Testing JWT authentication
      6. User registration
    2. Authentication and user registration in the client app
      1. Vuex state properties for authentication
      2. Vuex mutations for managing authentication state
      3. Vuex authentication getters
      4. Vuex login, register, and logout actions
      5. Authentication modal component
        1. Login form component
        2. Register form component
      6. Auth navigation item component
      7. Wiring up the new components in App.vue
    3. Protecting pages with navigation guards
    4. Setting the authentication state on app startup
    5. Summary
  14. Processing Payments
    1. Why use Stripe?
      1. Simple PCI compliance
      2. Easy integration
      3. Excellent dashboard
    2. Getting started with Stripe and client-side validation
      1. Registering for a Stripe account
      2. Including the Stripe checkout JavaScript library
      3. Installing VeeValidate for client-side validation
    3. Building the checkout components
      1. Building a cart summary component
      2. Building a checkout form component
        1. First look at client-side validation
        2. Finishing the delivery address form fields
        3. Capturing payment information
        4. Initializing Stripe elements
        5. Validating form input state
        6. Verifying payment details with Stripe
        7. Submitting the order to the API
        8. Adding basic Bootstrap styling to Stripe elements
      3. Building a checkout success component
    4. Building a my account page
      1. Building the OrderList component
      2. Formatting dates with a reusable date filter
      3. Linking to the my account page
    5. Fixing the register form component
    6. Server-side payment processing
      1. Adding orders to the data model
      2. Owned entity types in EF Core 2.0
        1. Why use owned entity types?
        2. Defining an owned type
        3. Configuring owned types
      3. Creating the orders migration
      4. Installing and configuring the Stripe.net NuGet package
        1. Configuring Stripe
      5. Processing orders and payments
        1. Persisting the order object
        2. Calculating the total order price
        3. Processing the payment with Stripe
    7. Adding an order list API endpoint
    8. Summary
  15. Building an Admin Panel
    1. Extending the authentication endpoint with user roles
    2. Client-side role-based authorization
      1. Adding role checks to client-side routes
    3. Server-side role-based authorization
    4. Hiding UI elements based on role
    5. Building the admin panel components
      1. Configuring nested route definitions
      2. Refactoring components for reuse
        1. Product list component
      3. Creating a product form component
      4. Creating an add variant modal component
    6. Vue component inheritance
      1. Defining a form input base component
      2. Inheriting from a base component
    7. Building custom input controls
      1. Building a custom typeahead control
      2. Building a multi-select control
    8. Persisting new products to the database
      1. Creating a slug generator
      2. Creating the API endpoint
    9. Remote validation with Vee-Validate
      1. Making our app aware of the new custom validation rule
      2. Creating the validation API endpoint
    10. Tidying things up
      1. Linking to the admin panel
      2. Fixing a logout bug
      3. Fixing a bug by selecting a product variant
    11. Summary
  16. Deployment
    1. Registering for an Azure account
    2. Setting up an Azure environment
      1. Understanding Azure subscriptions and resources
      2. Creating a subscription and resource group
      3. Creating a database
      4. Creating an app service
      5. Configuring environment variables
    3. Preparing the application for deployment
      1. Configuring multiple database providers
      2. Tweaking the post-publish build steps
    4. Configuring Git deployments
    5. Finalizing the apps configuration
      1. Enabling logging in Azure
      2. Forcing HTTPS connections only
    6. Summary
  17. Authentication and Refresh Token Flow
    1. Understanding refresh tokens
      1. What are refresh tokens used for?
      2. What are refresh tokens?
      3. Why use refresh tokens?
    2. Adding refresh token support to the backend
      1. Extending the AppUser model
      2. Generating refresh tokens
      3. Refreshing JWT access tokens
      4. Finishing up
    3. Adding refresh token support to the frontend
      1. Extracting router configuration into separate files
    4. Refreshing access tokens with axios interceptors
    5. Finishing up
    6. Summary
  18. Server-Side Rendering
    1. Why use SSR in the first place?
      1. Search engine optimization
      2. Performance
    2. How does SSR work?
    3. The easy way – Nuxt.js
    4. Preparing the application for SSR
      1. Installing npm packages required for SSR
      2. Adding Vuex actions and mutations for all API requests
        1. Defining additional Vuex actions
        2. Defining the additional Vuex mutations
        3. Defining the additional store state properties
      3. Updating existing pages to use Vuex
        1. Refactoring the catalog page
        2. Refactoring the product details page
        3. Refactoring the account page
        4. Refactoring the orders admin page
        5. Refactoring the products admin page
        6. Refactoring the create product admin page
      4. Changing the way we persist user authentication state
        1. Changing our approach of persisting state to local storage
        2. Storing authentication state in cookies
    5. Setting up and configuring SSR
      1. Defining the shared boot logic
      2. Defining the client-specific boot logic
        1. Hydrating the client-side store
        2. Loading shopping cart data from local storage
        3. Pre-fetching component data
        4. Remembering our promises
      3. Defining the server-specific boot logic
        1. Deleting the old boot file
      4. Making webpack aware of the client/server boot files
        1. Defining a shared webpack configuration object
        2. Defining client- and server-specific webpack configuration objects
      5. Updating the vendor webpack configuration to include SSR libraries
    6. Enabling SSR
    7. Conditionally rendering elements that rely on the browser
      1. Fixing the range filter component
      2. Fixing the checkout form component
      3. Fixing page transition animations in the router
      4. Fixing the store subscription to persist cart items to local storage
    8. Testing our server-rendered application
    9. Summary
  19. Continuous Integration and Continuous Deployment
    1. CI/CD – why bother?
      1. Continuous integration
      2. Continuous deployment
    2. Disabling Azure app service Git deployments
    3. Getting started with VSTS
      1. Creating a VSTS account
      2. Setting up a team services project
    4. Building a CI/CD pipeline
      1. Setting up a VSTS build
      2. Enabling CI
      3. Setting up a VSTS release
    5. Enabling CD
    6. Summary
  20. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: ASP.NET Core 2 and Vue.js
  • Author(s): Stuart Ratcliffe
  • Release date: July 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788839464