Complete guide to building an app with .Net Core and React

Complete guide to building an app with .Net Core and React
Complete guide to building an app with .Net Core and React
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 36.5 Hours | 17.3 GB

The complete guide to building an app from start to finish using ASP.NET Core, React (with Typescript) and Mobx

Course has now been updated for .Net Core 3.0

Have you learnt the basics of ASP.NET Core and React? Not sure where to go next? This course should be able to help with that. In this course we learn how to build a multi-project ASP.NET Core solution that is built using Clean Architecture and the CQRS and Mediator pattern that makes our code easy to understand, reason about and extend.

Both ASP.NET Core and React are hot topics and this course will enhance your knowledge of both, simply by building an application from start to finish. In each module we learn something new, whilst incrementally adding features to the application. Building an application is significantly more rewarding than building yet another Todo List from the documentation!

Every line of code is demonstrated and explained and by the end of this course you will have the skills and knowledge to build your own application using the techniques taught in this course.

Here are some of the things you will learn about in this course:

  • Setting up the developer environment
  • Creating a multi-project solution using the the ASP.NET Core WebAPI and the React app using the DotNet CLI and the create-react-app utility.
  • Clean Architecture and the CQRS + Mediator pattern
  • Setting up and configuring ASP.NET Core identity for authentication
  • Using React with Typescript
  • Adding a Client side login and register function to our React application
  • Using React Router
  • Using AutoMapper in ASP.NET Core
  • Building a great looking UI using Semantic UI
  • Adding Photo Upload widget and creating user profile pages
  • Using React Final Form to create re-usable form inputs with validation
  • Paging, Sorting and Filtering
  • Using SignalR to enable real time web communication to a chat feature in our app
  • Publishing the application to both IIS and Linux
  • Getting an ‘A’ rating for security from a well known security scanning site.
  • Many more things as well

Tools you need for this course

In this course all the lessons are demonstrated using Visual Studio Code, a free (and fantastic) cross platform code editor. You can of course use any code editor you like and any Operating system you like… as long as it’s Windows, Linux or Mac

Is this course for you?

This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project. If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.

On this course we will build an example social network application that allows users to sign up to events (similar to MeetUp or Facebook), completely from scratch. All we start with is an empty terminal window or command prompt.

All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build an application using ASP.NET Core and React

What you’ll learn

  • Learn how to build an application from start to publishing with .Net Core (v2.2), React (with Typescript) and Mobx
  • How to build a Web API in .Net Core with Clean Architecture using the CQRS + Mediator pattern
  • How to use AutoMapper and MediatR packages in the .Net projects
  • How to build a multi-project solution with .Net Core
  • How to use Entity Framework Core as the Object Relational Mapper
  • How to integrate ASPNET Core SignalR into an application for real time web communication
  • How to add Identity and Authentication using .Net Core Identity
  • How to build a Client side application for the API with React
  • How to use MobX as a state management library
  • How to build our own Photo upload widget with a Dropzone and a Cropper to resize images
Table of Contents

Source code and resources for this course
1 Source code and resources for this course

2 Course Introduction
3 Setting up the dev environment
4 Visual Studio Code extensions

Walking Skeleton Part 1 – API
5 Section 2 introduction
6 Seeding data using Entity Framework fluent configuration
7 Using Dependancy Injection
8 Introduction to Postman
9 Saving our changes into Source control using Git
10 Section 2 summary
11 Creating the ASP.NET Core solutions and projects using the DotNet CLI
12 Creating the project references using the DotNet CLI
13 Reviewing the Project files
14 Running the application
15 Creating a Domain entity
16 Creating the DbContext and service
17 Adding our first Entity Framework code first migration
18 Creating the database

Walking Skeleton Part 2 – Client
19 Section 3 introduction
20 React Class Components
21 Using React State
22 Fetching data from the API
23 Adding CORS support to the API
24 Adding Semantic UI to our app
25 Clean up and saving our code to source control
26 Summary of section 3
27 Using create-react-app to create our React application
28 Reviewing the React project files
29 Introduction to React – Concepts
30 Introduction to React – Components
31 Introduction to Typescript
32 Typescript basics demo
33 Using Typescript with React
34 Adding React dev tools

Building a CRUD application in .Net Core using the CQRS + Mediator pattern
35 Section 4 introduction
36 Adding the Create handler
37 Dealing with boilerplate code in our handlers
38 Adding an Edit handler
39 Adding a Delete handler
40 Summary of section 4
41 Adding the Activity entity
42 Seeding Activity data
43 Commands and Queries – CQRS
44 Introduction to MediatR
45 Creating our first Query handler
46 Creating the Activities API Controller
47 Adding the Details Handler
48 Cancellation Tokens

Building a CRUD application in React
49 Section 5 introduction
50 Creating the Activity List
51 Adding the Activity Details component
52 Adding the Activity Form component
53 Selecting an individual Activity
54 Adding an edit mode to display the form
55 Adding a create activity mode
56 Initialising the form with data
57 Controlled components in React
58 Handling form submission
59 Fixing issues with the dates in the form
60 Introduction to React Hooks
61 Adding the delete functionality
62 Summary of section 5
63 Folder structure in React
64 Getting a list of activities from the API
65 Adding an Activity interface in Typescript
66 Refactoring our class component to use React Hooks
67 Adding the Navigation bar
68 Styling React components
69 Adding the Activity Dashboard

70 Section 6 introduction
71 Setting up the agent.ts file
72 Listing our activities
73 Updating an Activity
74 Adding a delay to our API methods
75 Adding a loading component
76 Adding a loading indicator for submitting data
77 Isolating the loading indicator on the delete button
78 Summary of section 6

79 Section 7 introduction
80 Adding the edit activity action
81 Adding the delete activity action
82 Cleaning up our code
83 Enabling MobX strict mode
84 Adding MobX dev tools
85 Summary of section 7
86 Introduction to MobX
87 Setting up a MobX store
88 Refactoring the activity list to use the store
89 Refactoring the select activity function
90 Using Async Await in our methods
91 Refactoring the create activity method
92 MobX computed properties
93 Using an Observable Map

React Router
94 Section 8 introduction
95 Using a Fully Uncontrolled Component with a key to reset component state
96 Navigating after submission
97 Moving the home page outside of our navigation routes
98 Scrolling to the top of the page on navigation
99 More code clean up
100 Summary of section 8
101 Setting up React Router
102 Setting up our Routes
103 Adding Links and NavLinks
104 Adding the Details link
105 Getting an Activity from the API
106 Using Route params
107 Navigating via code
108 Routing to the edit form

Adding some style
109 Section 9 introduction
110 Styling the Home page
111 Section 9 summary
112 Styling the activity list
113 Grouping activities by date
114 Styling the activity list items
115 Creating the Activity Details page
116 Styling the Activity Detailed Page Header
117 Styling the Activity Detailed Info
118 Styling the Activity Detailed Chat and Sidebar components
119 Styling the Activity Form

Error handling and validation
120 Section 10 introduction
121 Using Axios interceptors to catch errors
122 Throwing errors in the client
123 Adding routing functionality to Axios
124 Handling an invalid GUID on a get request
125 Adding toast notifications
126 Handling network errors in Axios
127 Summary of section 10
128 Introduction to validation in the API
129 Adding validation in the API using Data Annotations
130 Adding validation in the API using Fluent Validation
131 Error handling concepts in our application
132 Error handling strategy
133 Creating a derived Exception class for Rest exceptions
134 Adding Error handling middleware
135 Using our Error handling middleware

136 Section 11 introduction
137 Creating separate Date and Time fields
138 Combining Date and Time inputs
139 Initialising the form with data
140 Submitting data to the server
141 Form error handling
142 Form validation
143 Summary of section 11
144 Setting up React Final Form
145 Creating a reusable Text input field
146 Refactoring the form to use React Final Form
147 Creating a reusable Text Area Input field
148 Creating a reusable Select input field
149 Setting up React Widgets
150 Creating a reusable Date Input field
151 Formatting the dates using Date-FNS

ASP.NET Core Identity
152 Section 12 introduction
153 JSON Web Tokens introduction
154 Adding the Infrastructure project
155 Adding the JWT Generator interface and class
156 Generating a JWT Token
157 Returning the JWT Token on successful login
158 Securing our app with Authorization
159 Dotnet user secrets
160 Adding an authorisation policy
161 Adding a Register Handler
162 Testing user registration
163 Introduction to ASP.NET Core Identity
164 Adding a Fluent Validator extension for password validation
165 Retrieving the Username from the token in the Http Context
166 Getting the currently logged in user
167 Summary of section 12
168 Adding the Identity User Entity
169 Configuring Identity in our startup class
170 Seeding users to the database
171 Adding a Login Handler
172 Adding a Base API controller
173 Adding a User API controller
174 Adding a User object

Client side login and register
175 Section 13 introduction
176 Using Axios request interceptor to automatically send the JWT token
177 Persisting login on refresh
178 Adding Modals to our application
179 Adding better error messages to our form
180 Adding a Register form
181 Displaying server validation errors in our form
182 Summary of section 13
183 Creating the Typescript interfaces and Axios methods
184 Creating a Mobx user store
185 Creating a MobX root store
186 Creating the Login form
187 Hooking up the Login form to the API
188 Dealing with submission errors
189 Adding home page and NavBar user information
190 Creating a MobX common store

Entity Framework Core Relationships
191 Section 14 introduction
192 Using Lazy Loading to load related data
193 Adding the Join activity feature
194 Adding the remove attendance feature
195 Creating a custom Auth policy
196 Updating our Seed data
197 Section 14 summary
198 Adding a class to join our Users and Activities
199 Updating the Create Activity handler
200 Testing in Postman
201 Loading related data using Eager loading
202 Adding DTOs to shape our data
203 Adding AutoMapper
204 Adding AutoMapper profiles
205 Configuring AutoMapper mappings

Adding Client side attendances
206 Section 15 introduction
207 Adding attendees to our list items
208 Adding attendees to the Detailed view sidebar
209 Adding the IsGoing and IsHost properties to the Activity interface
210 Conditionally rendering the activity detailed header buttons
211 Adding the cancel attendance function
212 Hooking it all up to the API
213 Loose ends
214 Summary of section 15

Photo Upload Part 1 – API
215 Section 16 introduction
216 Adding the set main photo functionality
217 Adding the Mapping Profile configuration for User images
218 Summary of section 16
219 Cloudinary settings
220 Adding the interface and class for our Photo Accessor
221 Adding the AddPhoto handler
222 Adding the Domain Entity
223 Adding the Add Photo Handler
224 Adding the Photo API Controller
225 Adding User Profiles feature
226 Adding the Delete photo handler

Photo Upload Part 2 – Client
227 Section 17 introduction
228 Styling our Dropzone
229 React Cropper Part 1
230 React Cropper Part 2
231 Adding the Photo Upload methods to the store
232 Adding the photo upload functionality to the Profile component
233 Adding the set main photo functionality
234 Isolating our loading indicators
235 Adding Delete photo functionality
236 Summary of section 17
237 Adding links and a profile page component
238 Adding the Profile Header component
239 Adding the Profile content component
240 Getting the profile data from the API
241 Displaying User images on the profile page
242 Conditionally rendering the Photo Upload Widget
243 Creating a Photo Upload Widget
244 React Dropzone

245 Challenge Introduction
246 Challenge Solution

247 Section 19 Introduction
248 Formatting Dates in words using Date-FNS
249 Using SignalR Groups in the API
250 Using SignalR Groups in the client
251 Section 19 summary
252 Adding the Comment entity
253 Adding the Comment DTO and mapping
254 Adding the Create comment handler
255 Adding a SignalR hub
256 Configuring Auth for SignalR
257 Adding the SignalR hub connection to the client
258 Connecting to the SignalR hub from our client
259 Adding the Comment functionality to the client

FollowingFollower feature
260 Section 20 introduction
261 Adding the Follow Unfollow methods
262 Adding the Follow Unfollow UI components
263 Getting a list of followings from the API
264 Using MobX reactions to get followers or followings on tab change
265 Section 20 summary
266 Adding the UserFollower Entity
267 Adding the Add Follower handler
268 Adding the Delete Following handler
269 Adding a Following API Controller
270 Adding a Profile reader helper class and interface
271 Getting a List of Followings for a user
272 Adding a Custom value resolver for AutoMapper
273 Adding the UI components to show followed users

Paging, Sorting and Filtering
274 Section 21 introduction
275 Adding User Activities filter in the API
276 Adding User Activities filter in the client
277 Summary of section 21
278 Paging our Activity list
279 Refactoring the Activity store list method for paging
280 Adding vertical paging to our activity dashboard
281 Adding infinite scrolling to our activity dashboard
282 Updating the dashboard with Filter component
283 Filtering our Activity List in the API
284 Adding the Filtering methods in the client
285 Updating the Activity Filters UI to allow filtering

Final touches and publishing
286 Section 22 introduction
287 Adding MySQL and configuring a user
288 Adding additional DB providers for Entity Framework
289 Swapping the DB for MySQL
290 Publishing the app to Linux – Part 1
291 Publishing the app to Linux – Part 2
292 Configuring Apache to use an HTTPS SSL certificate
293 Adding Security headers to our API
294 Adding Content Security Policy to our API
295 Getting an A rating from a SecurityHeaders site scan
296 Setting up Azure for publishing our app
297 Swapping our loading indicator for Placeholders
298 Publishing our App to Azure
299 Tweaking the Azure deployment
300 End of course summary
301 Adding a loading indicator to index.html
302 Adding private routes on the client
303 Adding logout for token expiry
304 Safari bug fix
305 Preparing the client application for publishing
306 Building a production version of the React app
307 Serving the production React app from the API server

Bonus – Course update Nov 2019 – Migrate from .Net Core 2.2 to .Net Core 3.0
308 Migrate your project from .net core 2.2 to 3.0 part 1 – Startup files
309 Migrate your project from .Net Core 2.2 to .Net Core 3.0 Part 2 – EF Core

Bonus – Identity Cookbook
310 Intro to the bonus section
311 Refresh Tokens – Introduction
312 Refresh Tokens – Updaing the Domain and adding a new Migration
313 Refresh Tokens – Updating the Token Validation Expriry
314 Refresh Tokens – Updating the Application layer classes
315 Refresh Tokens – Adding the Refresh Token Handler
316 Refresh Tokens – Adding the API Endpoint
317 Refresh Tokens – Testing in Postman
318 Refresh Token – Updating the MobX Stores
319 Refresh Tokens – Configuring the Axios interceptor
320 Refresh Tokens – Dealing with SignalR
321 FB Login – Setting up the app in Facebook
322 FB Login – Creating a new Git branch to work from
323 FB Login – Adding a Facebook login button to the client app
324 FB Login – Adding the API configuration to user secrets
325 FB Login – Adding a facebook accessor service to the infrastructure project
326 FB Login – Adding the Facebook login handler
327 FB Login – Adding the API Controller method and tying it together with the clien
328 FB Login – Adding loading indicator and merging changes with master branch