Step 1: First of all, lets download and install the NodeJS LTS version. Once it is installed you can run
node -vwhich will list the current version.
Step 2: Also, install Yeoman and Gulp
npm install -g yo gulp
Step 3: Finally, install the SharePoint Framework SpFx Generator globally
npm install -g @microsoft/generator-sharepoint
Optionally, you can install the Cmdr. I was able to use the default PowerShell console to run these commands.
Thats it! lets try to create a simple webpart and deploy to Office 365 SharePoint Online.
Scaffolding and testing locally
Create a project folder and run the command
Running this command will ask many scaffolding questions. If you want to select the defaults, just hit enter for each question.
Once it is completed you should see a success message.
We need to trust the dev machine certificate so that we can serve this in Office 365 environment also. This needs to be done only once per dev machine.
We are now ready to start the node server
This will start up a browser window with local server. This is the workbench for SharePoint Framework SpFx. You can use this for local debugging of code. However, you should note that you will not have the SharePoint context here so you will not be able to test any SharePoint specific code like object model. If you do want to test this locally, you need to mock these objects. Here, you can click the + button and add the Helloworld webpart to test the code.
This looks like Office 365, however it is not. You can find out by the url or trying to click on the ribbon!
Testing on Office 365
Testing in Office 365 is also simple. Just navigate to the below url.
<your office 365 tenant>/_layouts/15/workbench.aspx
If you add the webpart to Office 365 workbench, you will have the SharePoint context. So, you will be able to test the SharePoint specific code like executing the client side object model. When we add the webpart to the workbench, it is still pointing to the local server. This is possible because earlier, we ran the gulp command to trust the dev certificate.
In a future post, I will walk though packaging this and deploying to the SharePoint Online app store.
In the upcoming posts, we’ll delve into the generated code and how we can update the code to meet our requirements. As a heads up, SharePoint Framework SpFx uses TypeScript a lot. You may want to check out this amazing book on Amazon – TypeScript Essentials