6/01/2016

SharePoint Framework - Steps to build and run your first project

UPDATE 8/18/2016 - Microsoft announced SharePoint Framework Developer Release.


SPOILER: at the end of this post you'll be able to run a web app that is provided by Yeoman generator for SharePoint. But as of now (6/2/16) it's a simple web app based on Grunt for build and Mocha/PhantomJS to run. So you won't see Client Web Part deployed to SharePoint Workbench (I think that Microsoft should update the generator soon). Still this post may be useful for people who didn't work with Node.js and front-end stacks.

Here I want to provide all the steps you need to run build and run your first SharePoint Framework project on Windows machine (it's really easier on Mac).
You can find some steps here but after following them you won't be able to run the project (or even compile/build).
So let's start.
  1. Install node.js from here
  2. Install Ruby using RubyInstaller. Select "Add Ruby executables to your PATH"
  3. Install Visual Studio Code or any other IDE
  4. Restart your computer (VM)
  5. Update Ruby (here and further provided the commands for cmd):
    gem update --system
  6. Install Compass:
    gem install compass
  7. Install Yeoman:
    npm install -global yo
  8. Install Gulp(everywhere is said that SharePoint Framework will use Gulp to build projects but now it's using Grunt so see next step):
    npm install -global gulp
  9. Install Grunt:
    npm install -global grunt
  10. Install SharePoint Generator:
    npm install -global generator-sharepoint
  11. Install generator for Mocha app:
    npm install -global generator-mocha
  12. Install Bower:
    npm install -global bower
  13. Create a folder where you want to work with your project
  14. Scaffold your SharePoint project:
    yo sharepoint
    (I selected Yes to Sass and RequireJS and BDD for type of project)
  15. Open your folder in Visual Studio Code
  16. Uninstall grunt-requirejs module and install grunt-contrib-requirejs module:
    npm uninstall grunt-requirejs --save-dev
    npm install grunt-contrib-requirejs --save-dev
  17. Reinstall grunt-mocha module:
    npm uninstall grunt-mocha --save-dev
    npm install grunt-mocha --save-dev
  18. Finally install all the modules with:
    npm install
  19. Run
    gulp server
I thought that after all these actions I will see something similar to announced SharePoint Workbench. But for now it looks like some stub (Yeoman template is a stub) that shows simple html page that has nothing of SharePoint.
I will try to update this post if something new appears.

No comments:

Post a Comment