SharePoint Framework: How To Prepare Environment For Development
Microsoft has introduced another development methodology called SharePoint Framework, which is claimed more flexible than earlier approaches like Farm Solutions, Sandbox Solutions, and SharePoint Add-ins.
SharePoint Framework is compatible with a complete Web Development Stack with an inherent support to all modern JavaScript frameworks like React, Knockout, Type Script and so on.
In order to get better insight, it's recommended you to refer to the Webinar by Andrew Connell.
In this article, we will look at steps required to get a developer machine ready for starting with SharePoint Development using SharePoint Framework.
Following image displays the steps to set up the development machine:
https://howtodowithsharepoint.files.wordpress.com/2017/04/16.png?w=800
Step 1: Installation of Node JS
To download Node JS: https://nodejs.org/en/
As per recommendation from the Technical Community, it is advisable to go for LTS Version of Node JS.
Download the latest version available as shown below:
https://howtodowithsharepoint.files.wordpress.com/2017/04/31.png?w=800
Run the installer and follow the default options as shown below:
Click Next
https://howtodowithsharepoint.files.wordpress.com/2017/04/41.png?w=800
Accept license agreement and click Next
https://howtodowithsharepoint.files.wordpress.com/2017/04/51.png?w=800
Leave the default installation directory and click Next
https://howtodowithsharepoint.files.wordpress.com/2017/04/61.png?w=800
Continue with default features and click Next
https://howtodowithsharepoint.files.wordpress.com/2017/04/71.png?w=800
Click Install to start installation of Node JS
https://howtodowithsharepoint.files.wordpress.com/2017/04/81.png?w=800
Wait until installation has been completed
https://howtodowithsharepoint.files.wordpress.com/2017/04/91.png?w=800
Click Finish once the installation has been completed
https://howtodowithsharepoint.files.wordpress.com/2017/04/101.png?w=800
Now in order to test the installation, launch Windows PowerShell Prompt with Administrator privilege.
Type command “npm -v”. If the installation is successful you can see the version of Package Manager (NPM).
Note: NPM is the Package Manager that's used for dependency management so that you no longer have to manually download and manage your scripts.
https://howtodowithsharepoint.files.wordpress.com/2017/04/111.png?w=800
Step 2: Visual Studio Code
You can download Visual Studio Code from https://code.visualstudio.com/
Since this development environment is using Windows Server 2012 R2 as a base operating system, download the suitable version.
https://howtodowithsharepoint.files.wordpress.com/2017/04/131.png?w=800https://howtodowithsharepoint.files.wordpress.com/2017/04/141.png?w=800
Once downloaded, run the installer and proceed as follows.
Click Next to initiate the installation
https://howtodowithsharepoint.files.wordpress.com/2017/04/151.png?w=800
Accept the license agreement and click Next to continue
https://howtodowithsharepoint.files.wordpress.com/2017/04/161.png?w=800
Keep the defaults as is and click **Next **to continue
https://howtodowithsharepoint.files.wordpress.com/2017/04/17.png?w=800
https://howtodowithsharepoint.files.wordpress.com/2017/04/18.png?w=800
Select required options and click Next
https://howtodowithsharepoint.files.wordpress.com/2017/04/19.png?w=800
Click Install to start the installation
https://howtodowithsharepoint.files.wordpress.com/2017/04/20.png?w=800
Wait until installation has completed
https://howtodowithsharepoint.files.wordpress.com/2017/04/211.png?w=800
Click Finish to complete the installation process
https://howtodowithsharepoint.files.wordpress.com/2017/04/22.png?w=800
On completion, the install will launch the Visual Studio Code window to ensure installation is successful.
https://howtodowithsharepoint.files.wordpress.com/2017/04/23.png?w=800
Step 3: Install Yeoman & Gulp
Yeoman scaffolds out a new application, writing your build configuration (e.g Gulpfile) and pulling in relevant build tasks and package manager dependencies (e.g npm) that you might need for your build.
Gulp is the build System used to build, preview and test your project.
In order to install Yeoman and Gulp, launch Windows PowerShell prompt with Administrator privilege.
Enter command “npm install -g yo gulp” and Enter.
This command will perform a global installation of Yeoman and Gulp.
https://howtodowithsharepoint.files.wordpress.com/2017/04/24.png?w=800
Wait until installation has completed
https://howtodowithsharepoint.files.wordpress.com/2017/04/25.png?w=800
https://howtodowithsharepoint.files.wordpress.com/2017/04/26.png?w=800https://howtodowithsharepoint.files.wordpress.com/2017/04/27.png?w=800https://howtodowithsharepoint.files.wordpress.com/2017/04/28.png?w=800
Once done successfully it will return with command prompt without any error message.
Step: 4 Install SharePoint Yeoman Plugin (SharePoint Client Side Libraries)
In order to install SharePoint Client Side Libraries enter the following command:
**“npm install -g @microsoft/sharepoint”**
https://howtodowithsharepoint.files.wordpress.com/2017/04/29.png?w=800
Wait until the installation has completed.
https://howtodowithsharepoint.files.wordpress.com/2017/04/30.png?w=800https://howtodowithsharepoint.files.wordpress.com/2017/04/311.png?w=800
Step: 5 Install SPFX Developer Certificate
Local Workbench Site, which is used to test WebParts locally using SharePoint Context, will notify you with the error that it is not configured to load scripts from localhost.
In order to avoid this error message, we need to install SPFX Developer Certificate by using the following command:
“gulp trust-dev-cert”
https://howtodowithsharepoint.files.wordpress.com/2017/04/32.png?w=800
Wait till installation has been completed.
Click Yes on the Security Warning to accept installation of certificate.
https://howtodowithsharepoint.files.wordpress.com/2017/04/34.png?w=800
With this Step 5, SharePoint Framework and all related dependencies are installed successfully. It verifies the installation and in the following steps, we will perform validations.
Step: 6 Create SharePoint Project
Enter following command **“yo @microsoft/sharepoint”**
https://howtodowithsharepoint.files.wordpress.com/2017/04/35.png?w=800
This command will initiate the Project Configuration for SPFX based SharePoint Solution.
This command will take input from the user to configure the project attributes like project name, description, directory, development environment and so on.
https://howtodowithsharepoint.files.wordpress.com/2017/04/36.png?w=800
Input all information required and enter to proceed with Project configuration.
Wait till Project has been created.
https://howtodowithsharepoint.files.wordpress.com/2017/04/37.png?w=800https://howtodowithsharepoint.files.wordpress.com/2017/04/38.png?w=800
Once project has been created successfully, we will get command prompt returned without error.
Step: 7 Execute First Project
Now this is the time to finally run the Project and testify the SharePoint Framework.
In order to run the project enter the following command:
“gulp serve” (case sensitive so be careful)
https://howtodowithsharepoint.files.wordpress.com/2017/04/39.png?w=800
Wait until the project initializes.
https://howtodowithsharepoint.files.wordpress.com/2017/04/40.png?w=800
Once the Project initialized successfully, we can see SharePoint Workbench launch WebPart placeholder, mimicking SharePoint Web Page.
On this page, you can add the WebPart that has been deployed locally without using SharePoint context.
https://howtodowithsharepoint.files.wordpress.com/2017/04/411.png?w=800
On click of Add button we can see available WebParts listed. Select the WebPart in question and add it to the Page.
https://howtodowithsharepoint.files.wordpress.com/2017/04/42.png?w=800
Once added we can see the WebPart on the Page. This ensures that we have done all configuration as expected.
https://howtodowithsharepoint.files.wordpress.com/2017/04/43.png?w=800
In order to open the Project Code we can right-click the solution directory and choose option “Open with Code”.
https://howtodowithsharepoint.files.wordpress.com/2017/04/44.png?w=800
And we can see the Visual Studio Code launched with project dependent files.
https://howtodowithsharepoint.files.wordpress.com/2017/04/45.png?w=800
Command Summary
https://howtodowithsharepoint.files.wordpress.com/2017/04/46.png?w=800
