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.
Fill out the required details and note the url of the newly created app catalog site.
Create 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
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.
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.
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
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
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
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
- Extremely light weight
- Open source
- Microsoft recommends!
- Lot of extensions available to make development easier
- 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).
View his professional profile on linked in
https://www.linkedin.com/in/dhavalshah27/
- SharePoint Metadata - October 8, 2018
- SharePoint Permission Levels - August 29, 2018
- SharePoint Online User Permission Reports - March 8, 2018