It’s finally been released as a preview! Please note that backwards compatibility will not be supported so don’t start any production work yet, this is for testing and feedback only!
It can be downloaded from GitHub now, I go through the process below but the official instructions are here (and really straightforward): https://github.com/SharePoint/sp-dev-docs/wiki/Setup-your-machine
Getting familiar with the new environment
It takes some practice and learning to understand how the node package manager works along with Gulp and Yeoman. It can be a steep learning curve but there are some great Angular tutorials to help get familiar with the setup and technologies.
Error messages and path limitations
Even creating a new project can generate a large amount of errors. It’s important to get familiar with these errors and how to resolve them.
One important item to consider when creating a new project is the project path. The project folder structure can get very large and reach the limit allowed on windows machines. Try creating all the projects in a short path such as “C:\dev” to avoid hitting that limitation when generating projects.
Node Package Manager
Before starting, install NodeJS.
Install Yeoman and Gulp
All the other pre-requisites are installed via the NodeJS command line. It is very easy to add frameworks and components using this method.
Yeoman is a generator which will gather all the frameworks required and pull them down into the project. It is marketed as a scaffolding tool for modern WebApps. SharePoint has a Yeoman generator, this creates the project and downloads any dependencies.
Gulp is a JavaScript task runner. It provides a workflow to build, compile and optimise libraries and stylesheets. It also refreshes the browser as changes are made. Gulp will load the SharePoint workbench and refresh any changes made to the code live.
Yeoman and Gulp are installed from the NodeJS command line using the following line:
npm i -g yo gulp
Install the Yeoman SharePoint generator
The Yeoman generator for SharePoint is very similar to the old Visual Studio templates. Download the Microsoft SharePoint generator using the following line:
npm i -g @microsoft/generator-sharepoint
Creating a new project
Open up the NodeJS command line and navigate to your project folder (remember to keep the path short). Run the following line to create the new SharePoint web part project template:
yo @microsoft/sharepoint
Follow the instructions for entering the project details. Errors may appear on the screen which will need to be resolved at some point. This process takes around 20 to 30 minutes.
Running the SharePoint workbench
Test the new project template by running this command:
gulp serve
The SharePoint workbench runs locally (so there isn’t a dependency to have a SharePoint farm or tenancy setup in the development environment).
Editing the code
Any text editor can be used to make changes to the code but it’s worth looking at Visual Studio Code. It is free!
These open source solutions are platform dependant so these projects don’t have to be created on a windows PC.
More resources
There are some detailed blog posts on all of the items skimmed above. Please read them and get up to speed with NodeJS before diving straight in with SharePoint.
Stefan Bauer’s blog posts on NodeJS and the SharePoint Framework
Chris O’Brien’s SharePoint Framework blog posts
Setup your environment
Official Microsoft starter tutorials