SharePoint Framework for Developers: 1 Understanding the Toolchain

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