Setting up Developer Environment for SharePoint Framework (SPFx)

Blog written by:
Dhaval Shah
SharePoint & .Net Consultant

Intro

In the previous article about SharePoint Framework, we discussed the open source tools used to develop client-side web parts. In this article you’ll learn to set up your developer environment to develop the SharePoint Framework client-side web parts. You’ll go through the installation and configuration of the various tools described in the previous article.

Environment

You’ll use the SharePoint online tenant for developing the SharePoint Framework web parts. But you can build, develop and test the web parts in the SharePoint workbench. Once ready, you can test and deploy in the SharePoint online developer site.

SharePoint Workbench—SharePoint workbench is a locally hosted page to host your client-side web parts. So, you don’t need to deploy it in your SharePoint online site every time you have to test your web part. It won’t return the real time data from the SharePoint, but you can mock the data locally. You’ll find those steps in detail in subsequent articles.

https://your-sharepoint-site/_layouts/workbench.aspx

 

Creating an App Catalog Site—This is where you’ll upload the generated package for the SharePoint client-side web parts. If there’s no app catalog site created for your Office 365 tenant, you can do it from your SharePoint admin center -> apps -> App Catalog -> create a new app catalog site. Note the url of the newly created app catalog site.

App Catalog Site - Dhaval Shah

 

Fill out the required details and note the url of the newly created app catalog site.

Create App Catalog SiteCreate App Catalog Site

If you have the app catalog site created already, you can view the url from the Apps section under SharePoint Admin Center as shown below

SharePoint Admin Center - Dhaval Shah

Creating a Developer Site—This is where you’ll run the client-side web parts and test them.

Developer Tools

Now that you have the SharePoint environment configured, you can go ahead and configure the developer environment. In the previous article you learned about the tools to use to develop client-side web parts. All those tools are built on top of node.js, so the first step is to install node.js

Install Node.js

You can download the node.js specific to your environment from the link below. I used the Windows Installer because my OS is Windows, but you can download the installer for your preferred environment.

Node.js Download: https://nodejs.org/en/download/

Run the downloaded installer file, which will launch the Node.js setup wizard. The wizard is pretty straightforward and should install node.js successfully.

Install Node js - Dhaval Shah

 

You can check if the node.js installed successfully by opening the command prompt and executing the command below .

node –v

This will show you the current version of the node.js. Also, execute the command below to check the version of NPM.

npm –v

Note: Please make sure the NPM version is higher than 3.

install node js command - Dhaval Shah

Some packages that can help the development follow.

npm install –g source-map-explorer nodetree http-server nodemon typescript

For a Windows environment you must install some additional tools.

Windows Build tools will install Visual C++ Build Tools 2015, Python, etc.

Note: Run the following command in Windows PowerShell as administrator

npm install  -g –production windows-build-tools

Install Window Build tools - Dhaval Shah

It will take a while for the command to get fully executed.

Installing Yeoman Generator

Yeoman is built on top of Node.js, and it will install on the machine as npm global package.

You can install the yeoman using the NPM by using the command below.

npm install -g yo

 

Installing the SharePoint Framework Yeoman Generator

Microsoft has provided the yeoman SharePoint framework generator to create SharePoint client-side web parts.

https://www.npmjs.com/package/@microsoft/generator-sharepoint

Execute the command below to install the yeoman template for SharePoint framework.

npm install -g @microsoft/generator-sharepoint

 Installing Gulp

Gulp is a task runner that helps you perform tasks like uploading, linting files, running automated tests, minifying the files, etc., which you can define using JavaScript.

You can install Gulp using global npm packages

Execute the command below.

npm install –g gulp
Install Gulp Command - Dhaval Shah

Installing Webpack

Webpack is module runner you should execute before you package the SharePoint framework client web part. It takes all the modules that are dependent on the web part and bundles all the files, including the js, css, images, etc. resource files of the web part. Again, webpack is built on top of node.js, but you don’t need to install the webpack separately since the yeoman SharePoint framework will install it for us.

We installed several modules and tools to find out what’s on this server. To do this, globally execute the command below.

npm list –g  –depth=0

Get Installed NPM Package - Dhaval Shah

Installing Visual Studio Code

As discussed in an earlier post, we use Visual Studio Code to develop our client-side web parts. The reasons for using this code are

  1. Extremely light weight
  2. Open source
  3. Microsoft recommends!
  4. Lot of extensions available to make development easier
  5. Built-in support for node.js, JavaScript/typescript, JSX/React, HTML, CSS, Less, Sass, JSON and so on.

You can download Visual Studio Code for Windows OS from the link below.

https://code.visualstudio.com/docs/setup/windows

Conclusion

Now, you’ve learned how to install various tools and IDE for your development. Next, you’re ready to build your first client-side web part using SharePoint Framework (SPFx).

Do you use SharePoint? Try our toolkit
Download SharePoint Essentials Toolkit Now
Download the SharePoint Essentials Toolkit
Follow me

Dhaval Shah - MCD, MCSD

SharePoint and Dot Net Consultant at QiPoint
Dhaval Shah (Houston, TX USA) has more than 9 Years of professional experience working as a SharePoint and Dot Net Consultant. He has worked on 30+ projects dealing with more than 15+ clients. He has a special focus on developing and implementing enterprise-level business solutions, built on SharePoint, Dot net and the Microsoft technology stack involving MVC apps, Web API and REST services.

View his professional profile on linked in
https://www.linkedin.com/in/dhavalshah27/
Follow me

Latest posts by Dhaval Shah - MCD, MCSD (see all)

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.