SharePoint Framework SpFx Setup

Local Setup

Step 1: First of all, lets download and install the NodeJS LTS version. Once it is installed you can run
node -v
which 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

yo @microsoft/sharepoint

Running this command will ask many scaffolding questions. If you want to select the defaults, just hit enter for each question.

We can accept all the default values for now, including the ‘No javascript web framework’.  This will create the code for plain vanilla JavaScript. The scaffolding will take some time, you can take a coffee break and come back 🙂

Once it is completed you should see a success message.

SharePoint Framework SpFx scaffolding complete!

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.

gulp trust-dev-cert

We are now ready to start the node server

gulp serve

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.

SharePoint Framework SpFx Local Workbench

 

Helloworld webpart added to local workbench

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

Leave a Reply

Your email address will not be published. Required fields are marked *