Learn how to set up a complete SharePoint Framework development environment and master the SPFx toolchain.
SharePoint Framework for Developers: 1 Understanding the Toolchain
Overview
Syllabus
Introduction
- Welcome
- What you should know
- Using the exercise files
- An introduction to SPFx
- Important basic concepts to learn
- 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
- 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
- What is Yeoman?
- Searching for Yeoman generators
- Install a generator globally and generate an app
- Using a locally installed Yeoman generator
- 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
- What is Sass?
- Sass variables
- Sass mixins
- Sass extends
- Sass nesting
- Sass operations
- Sass functions
- Sass custom functions
- Sass imports
- 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
- Next steps
- SPFx resources
Taught by
Sahil Malik
