SharePoint Framework for Developers: 1 Understanding the Toolchain

Learn how to set up a complete SharePoint Framework development environment and master the SPFx toolchain.

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