How to setup new SharePoint Framework (SPFx) development Environment & Build your First Client Side Webpart?

Note: As per Microsoft site, The SharePoint Framework is currently in preview and is subject to change. SharePoint Framework client-side web parts are not currently supported for use in production environments.

The SharePoint Framework (SPFx) is the next evolution in SharePoint development

Below are some steps required to setup new SharePoint Framework & Create your first client web part from you client PC

1. Install Node JS

   • Install NodeJS Long Term Support (LTS) version from here
   • After installation, Typ npm -v to verify the version. Make sure you are running V3 version of npm.
   • You can use nodejs commandline or  CMDER or Windows powershell tool to run npm in windows.

2. Install Yeoman

   Yeoman is the modern scaffolding tool. It helps you kick-start new projects, and prescribes best practices and tools to help you stay productive.

   • Type npm install -g yo to install Yeoman
   • It is a good idea to check that everything is installed as expected by running commonly used Yeoman commands like below::yo –version

3. Install Gulp

   Gulp is a javascript task runner that lets you automate tasks such as Bundling and minifying libraries and stylesheets,Refreshing your browser when you save a file,Quickly running unit tests, Copying modified files to an output directory etc.

   • Install the gulp command npm install –global gulp-cli

4. Install Yeoman SharePoint Generator

   The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.

   • Enter the following command to install the Yeoman SharePoint generator:
     npm install -g @microsoft/generator-sharepoint

5. Build your First Client Side Webpart

   1. Open CMDER or Node.js command line
   2. Navigate to your favorite projects folder
   3. Create New Project directory
      md myFirstClientWebpartFolder
   4. Navigate to newly created project directory
      cd myFirstClientWebpartFolder
   5. Create a new Client side webpart by running  Yeoman SharePoint Generator by running below command
      yo @microsoft/sharepoint
      
      When prompted:
      1. What is your solution name? myFirstClientWebpart
      2. Where do you want to place your files? Use current folder
      3. what is your webpart name?Helloworld
      4. what is your webpart description? Helloworld  description
      5. what framweork would you like to start with? (Use arrow keys to select)
   6. At this point, Yeoman will install the required dependencies and scaffold the solution files along with the HelloWorld web part. This might take a few minutes.
      When the scaffold is complete, you should see a Congratulations message.

6. Run application using Gulp

   To run the application type  gulp serve to play with it.

7. Open application in code editor

   Use your favorite code editor to explore the new file structure and code
   my recommendation is to use Visual Studio Code which is a  lightweight but powerful source code editor from Microsoft which runs on your desktop and is available for Windows, Mac and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtimes

8. End of Initial Setup!

   • You are done!
   • Start experimenting new SharePoint development model and build amazing solutions.
   • Happy Coding…Cheers