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.

Related Content you might be interested in

Current Title:

Small book image
Hands-On Full-Stack Web Development with ASP.NET Core
Tamir Dresher | Amir Zuker | Shay Friedman
Oct, 2018 | 478 pages
Small book image
ASP.NET Core 2 Fundamentals
Onur Gumus | Mugilan T S Ragupathi
Aug, 2018 | 298 pages
Small book image
JavaScript and JSON Essentials
Sai S Sriparasa | Bruno Joseph Dmello
Apr, 2018 | 226 pages
Small book image
Learning Angular 4 for .NET Developers
Rajesh Gunasundaram
Jun, 2017 | 248 pages
Table of Contents (22 chapters)
Title Page
Title Page
PacktPub.com
PacktPub.com
Contributors
Contributors
Preface
Preface
Free Chapter
1
Becoming a Full-Stack .NET Developer
Becoming a Full-Stack .NET Developer
The full-stack developer
Backend fundamentals
Frontend fundamentals
JavaScript frontend frameworks
Summary
2
Setting Up Your Development Environment
Setting Up Your Development Environment
Visual Studio
Node.js and npm
TypeScript
Google Chrome
Fiddler
Summary
3
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
Summary
4
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
Routing
The model
Generating a response of different types
Summary
5
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
Saving data
Querying data
Mapping the API results to DTOs
Summary
6
Securing the Backend Server
Securing the Backend Server
Authenticating and authorizing application users
Controlling access to APIs with authorization
Enabling Cross-Origin Resource Sharing
Summary
7
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)
Summary
8
Getting Started with Frontend Web Development
Getting Started with Frontend Web Development
Getting started with frontend web development
The Everyday Market app
jQuery
Summary
9
Getting Started with TypeScript
Getting Started with TypeScript
TypeScript
The TypeScript compiler
Types
Interfaces
Classes
Modules
Decorators
Summary
Further reading
10
App Development with Angular
App Development with Angular
Angular overview
Angular CLI
Key app parts
Modules
Components
Data binding
Component interaction
Injectable services
HTTP
Busy indicator
Distribution
Summary
11
Implementing Routing and Forms
Implementing Routing and Forms
Client-side routing
Using Angular Router
Implementing a routed page
Implementing template-driven forms in Angular
Summary
12
App Development with React
App Development with React
React overview
Creating a React app
Components
JSX
Header component
Props
State
Stateless functional components
CategoryMenu
List rendering
Product listing
Busy indicator
Conditional rendering
Summary
13
App Development with Vue
App Development with Vue
Vue.js overview
Vue CLI
Components
Header component
Data binding and component interaction
The category menu
List rendering
Product listing
Busy indicator
Conditional rendering
Summary
14
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
Summary
15
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
Summary
16
Taking Advantage of Cloud Services
Taking Advantage of Cloud Services
Scaling your service
Cloud Diagnostics with Application Insights
Testing in production with Deployment slots
Summary
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think
Index
Index

Creating a React app

A popular method for creating new React-based projects is using the CLI tool called Create React App (CRA). Like Angular CLI, CRA enables you to create, run, and build your project; however, Angular CLI is much more comprehensive as it is intended as an integral tool as part of the Angular platform.

Note

CRA supports boilerplate generation scripts. When creating a project, you can specify a boilerplate generation script. For example, there's a script for integrating TypeScript as the language of choice, as you can read here:https://github.com/wmonk/create-react-app-typescript.

Next, install CRA and create the Everyday Market project using the default boilerplate:

  1. Open the terminal or Command Prompt and install CRA by executing the following:
    npm install -g create-react-app
  1. Create the app project by executing the following:
    create-react-app everyday-market-react

When the preceding command is executed, CRA creates the folder with the specified name and scaffolds the entire...

Previous Section
End of Section 3
Next Section