Building Single-Page Applications Using ASP.NET Core JavaScriptServices

2h 21mIntermediate2018-01-10

Authors

Kazi Nasrat Ali

Senior Software Developer at Surge

Course details

Explore how to leverage ASP.NET Core single-page project templates—including React.js, Angular.js, Vue.js, and Aurelia.js. This course covers how to work with templates and JavaScriptServices to accomplish front-end projects, from setup to app publication. Find out how to approach scaffolding a project, implement SPA (single-page application) services, execute JS in the server, use routing helpers, create database features, add React components, and more.

Learning objectives
Setting up a dev environment
Front-end frameworks
Templates: React.js, Angular.js, Vue.js, Aurelia.js
JavaScriptServices
NodeServices and Node.js
Single-page application services
Using HMR (Hot Module Replacement)
Performing server-side prerendering
Using node-chartist
Creating a database, tables, and stored procedures
Creating data models, controllers, and actions
Adding React components and subcomponents
Testing and publishing an app

Skills covered

ASP.NET CoreAngularReact.jsMetaFront-End Web DevelopmentProjectWeb DevelopmentOpen SourceMicrosoft

Concepts

0. Introduction

01 - Welcome
02 - What you should know
03 - Working with the exercise files
04 - Set up the development environment

1. Exploring ASP.NET Core SPA Project Templates

05 - Front-end framework options
06 - Scaffolding a project
07 - Explaining the basic project structure
08 - React.js template
09 - Angular.js template
10 - Vue.js template
11 - Aurelia.js template

2. Working with ASP.NET Core JavaScriptServices

12 - JavaScriptServices overview
13 - NodeServices
14 - Execute JS in the server using Node.js
15 - SPA services
16 - Webpack dev middleware
17 - Hot Module Replacement
18 - Server-side prerendering
19 - Routing helpers
20 - Building charts using node-chartist

3. Creating a React and ASP.NET Core App

21 - About the sample app
22 - Scaffolding with React
23 - Create the database, tables, and stored procedures
24 - Create data models
25 - Create data controller and actions
26 - Add React component - Customer list
27 - Add React subcomponents - Add edit
28 - Controller action for add edit sub-components
29 - Add navigation links
30 - Controller action for Customer search
31 - Add React component - Customer search
32 - Add React subcomponents - Order details
33 - Finish up the app and test
34 - Publish the app

Conclusion

35 - Next steps