Hands-On Full-Stack Web Development with ASP.NET Core

Book Image

Hands-On Full-Stack Web Development with ASP.NET Core

By : Tamir Dresher, Amir Zuker, Shay Friedman

Book Image

Hands-On Full-Stack Web Development with ASP.NET Core

By: Tamir Dresher, Amir Zuker, Shay Friedman

Overview of this book

Today, full-stack development is the name of the game. Developers who can build complete solutions, including both backend and frontend products, are in great demand in the industry, hence being able to do so a desirable skill. However, embarking on the path to becoming a modern full-stack developer can be overwhelmingly difficult, so the key purpose of this book is to simplify and ease the process. This comprehensive guide will take you through the journey of becoming a full-stack developer in the realm of the web and .NET. It begins by implementing data-oriented RESTful APIs, leveraging ASP.NET Core and Entity Framework. Afterward, it describes the web development field, including its history and future horizons. Then, you’ll build webbased Single-Page Applications (SPAs) by learning about numerous popular technologies, namely TypeScript, Angular, React, and Vue. After that, you’ll learn about additional related concerns involving deployment, hosting, and monitoring by leveraging the cloud; specifically, Azure. By the end of this book, you’ll be able to build, deploy, and monitor cloud-based, data-oriented, RESTful APIs, as well as modern web apps, using the most popular frameworks and technologies.

Title Page

PacktPub.com

Contributors

Preface

Free Chapter

Becoming a Full-Stack .NET Developer

Becoming a Full-Stack .NET Developer

The full-stack developer

Backend fundamentals

Frontend fundamentals

JavaScript frontend frameworks

Setting Up Your Development Environment

Setting Up Your Development Environment

Node.js and npm

Creating a Web Application with ASP.NET Core

Creating a Web Application with ASP.NET Core

ASP.NET Core overview

Creating an ASP.NET Core application

The Startup class

Serving static files

Getting familiar with the ASP.NET Core MVC framework

Building REST APIs with ASP.NET Core Web API

Building REST APIs with ASP.NET Core Web API

Overview — REST APIs with ASP.NET Core API

Inspecting your APIs using Fiddler and Postman

Generating a response of different types

Persisting Data with Entity Framework

Persisting Data with Entity Framework

Installing Entity Framework Core

Creating your data model

Creating a database with EF Core migrations

Mapping the API results to DTOs

Securing the Backend Server

Securing the Backend Server

Authenticating and authorizing application users

Controlling access to APIs with authorization

Enabling Cross-Origin Resource Sharing

Troubleshooting and Debugging

Troubleshooting and Debugging

Adding logging to your application

Responding gracefully in the event of errors and exceptions

Making your APIs discoverable and self-documenting with the OpenAPI standard (Swagger)

Getting Started with Frontend Web Development

Getting Started with Frontend Web Development

Getting started with frontend web development

The Everyday Market app

Getting Started with TypeScript

Getting Started with TypeScript

The TypeScript compiler

Further reading

App Development with Angular

App Development with Angular

Angular overview

Component interaction

Injectable services

Implementing Routing and Forms

Implementing Routing and Forms

Client-side routing

Using Angular Router

Implementing a routed page

Implementing template-driven forms in Angular

App Development with React

App Development with React

Creating a React app

Header component

Stateless functional components

Product listing

Conditional rendering

App Development with Vue

App Development with Vue

Vue.js overview

Header component

Data binding and component interaction

The category menu

Product listing

Conditional rendering

Moving Your Solution to the Cloud

Moving Your Solution to the Cloud

What is cloud computing?

Working with Microsoft Azure

Getting familiar with the portal and with the command line

The Azure account and resources model

Deploying to Microsoft Azure

Deploying to Microsoft Azure

Creating a production environment with Azure App Service

Deploying the GiveNTake backend service from Visual Studio

Creating an automated build and release pipeline in Azure DevOps

Deploying the GiveNTake frontend to Azure App Service

Taking Advantage of Cloud Services

Taking Advantage of Cloud Services

Scaling your service

Cloud Diagnostics with Application Insights

Testing in production with Deployment slots

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Using Angular Router

In Everyday Market, let's implement the following routes:

/products: This is the default route that displays the product's listing homepage.
/products/new : This displays the form to create a new product.
/products/:id : This displays product details for the specified product id. The fact that the id is prefixed with a colon instructs Angular Router to treat it as a parameter and match it with the URL.

These routes are illustrated in the following diagram:

Using Angular Router, let's implement client-side routing with the following steps:

Create the components to be used in the new routes with the following command:

 ng generate component modules/market/product-view-page

 ng generate component modules/market/product-edit-page

Define the market routes configuration in market.module.ts as follows:
1. Import RouterModule and Routes from the @angular/router package.
2. Create a routes configuration object.
3. Import RouterModule as part of MarketModule.
4. You can remove the exported ProductsPageComponent...