SharePoint Framework for Developers: 1 Understanding the Toolchain

Course details

SharePoint Framework (SPFx) allows developers to extend SharePoint Online and SharePoint on premises, via web parts or extensions. Before diving into SPFx, you need to master the toolchain—technologies such as Node.js, npm, Gulp, TypeScript, webpack, Yeoman, Sass, and more. Instructor Sahil Malik uses this introductory course to explore the toolchain. He shows how to write basic Node.js code; bundle images, CSS, and apps with webpack; use Yeoman generators; and integrate TypeScript and Sass. Developers who are already familiar with these tools can jump to the end of the course, where Sahil shows how to set up a complete SPFx development environment.

Learning objectives
Introduction to SPFx
Installing Node.js and npm
Writing Node.js-based code and script
Using webpack to bundle CSS, images, and distributable apps
Using Yeoman generators
Working with TypeScript and Sass
Setting up your SPFx development environment

Concepts

0. Introduction

01 - Welcome
02 - What you should know
03 - Using the exercise files

1. The Basics

04 - An introduction to SPFx
05 - Important basic concepts to learn

2. Node.js and npm

06 - An introduction to Node.js and npm
07 - Install Node.js
08 - Update npm
09 - Install Yarn
10 - Create a new node-based project
11 - Using Yarn to install dependencies
12 - Write Node.js-based code and script

3. webpack

13 - Introduction and need for webpack
14 - Example of a simple website breaking without webpack
15 - Example of webpack fixing the problem of interdependent scripts
16 - Use webpack.config.js
17 - Use webpack to bundle CSS
18 - Use webpack to bundle images
19 - Use webpack to create distributable versions of our application

4. Yeoman

20 - What is Yeoman
21 - Searching for Yeoman generators
22 - Install a generator globally and generate an app
23 - Using a locally installed Yeoman generator

5. TypeScript

24 - What is TypeScript
25 - Set up a simple TypeScript project
26 - TypeScript transpilation and sourcemaps
27 - TypeScript type checking and .d.ts files
28 - TypeScript modules and renaming across modules
29 - TypeScript classes ES3 vs. ES2015

6. Sass

30 - What is Sass
31 - Sass variables
32 - Sass mixins
33 - Sass extends
34 - Sass nesting
35 - Sass operations
36 - Sass functions
37 - Sass custom functions
38 - Sass imports

7. Set Up Your SPFx Dev Environment

39 - Set up your Office 365 tenancy
40 - Install Node.js, Yarn, and npm
41 - Install Yeoman and gulp
42 - Install Visual Studio Code
43 - Install SPFx Yeoman generator locally
44 - Install SPFx Yeoman generator globally
45 - Use Yarn to install project dependencies with SFPx

Conclusion

46 - Next steps
47 - SPFx resources