Introduction
Welcome
()
What you should know
()
Using the exercise files
()
1. The Basics
An introduction to SPFx
()
Important basic concepts to learn
()
2. Node.js and npm
An introduction to Node.js and npm
()
Install Node.js
()
Update npm
()
Install Yarn
()
Create a new node-based project
()
Using Yarn to install dependencies
()
Write Node.js-based code and script
()
3. webpack
Introduction and need for webpack
()
Example of a simple website breaking without webpack
()
Example of webpack fixing the problem of interdependent scripts
()
Use webpack.config.js
()
Use webpack to bundle CSS
()
Use webpack to bundle images
()
Use webpack to create distributable versions of our application
()
4. Yeoman
What is Yeoman?
()
Searching for Yeoman generators
()
Install a generator globally and generate an app
()
Using a locally installed Yeoman generator
()
5. TypeScript
What is TypeScript?
()
Set up a simple TypeScript project
()
TypeScript transpilation and sourcemaps
()
TypeScript type checking and .d.ts files
()
TypeScript modules and renaming across modules
()
TypeScript classes ES3 vs. ES2015
()
6. Sass
What is Sass?
()
Sass variables
()
Sass mixins
()
Sass extends
()
Sass nesting
()
Sass operations
()
Sass functions
()
Sass custom functions
()
Sass imports
()
7. Set Up Your SPFx Dev Environment
Set up your Office 365 tenancy
()
Install Node.js, Yarn, and npm
()
Install Yeoman and gulp
()
Install Visual Studio Code
()
Install SPFx Yeoman generator locally
()
Install SPFx Yeoman generator globally
()
Use Yarn to install project dependencies with SFPx
()
Conclusion
Next steps
()
SPFx resources
()
Ex_Files_Sharepoint_Frame_Dev_1_Toolchain.zip
(1.7 MB)