How to create a SPFx Project

To begin with the development, just make sure that you have the latest node,yeoman, gulp and yeoman SharePoint generator are installed in your machine. These are needed to ensure your machine’s suitability for the development of SharePoint framework offered by Microsoft.

In you don’t have it follow the steps below to install it

Configure development environment

Install NodeJS

Install NodeJS LTS version.

If you are in Windows, you can use the msi installers in this link for the easiest way to set up NodeJS.
If you have NodeJS already installed, check if you have the latest version by using node -v. It should return the current LTS version.
If you are using a Mac, we recommend that you use homebrew to install and manage NodeJS

Install Yeoman and Gulp

Yeoman helps you kick-start new projects, and prescribes best practices and tools to help you stay productive. SharePoint client-side development tools include a Yeoman generator for creating new web parts. The generator provides common build tools, common boilerplate code, and a common playground website to host web parts for testing.

Enter the following command in powershell to install Yeoman and gulp:

npm install -g yo gulp

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.

To install the SharePoint Framework Yeoman generator globally, enter the following command in powershell:

npm install -g @microsoft/generator-sharepoint

If you need to switch between the different projects created by using different versions of the SharePoint Framework Yeoman generator, you can install the generator locally as a development dependency in the project folder by executing the following command in powershell:

npm install @microsoft/generator-sharepoint –save-dev

Once you are done with the installation, you will be able to create new webparts using SharePoint framework.

Install a code editor

You can use any code editor or IDE that supports client-side development to build your web part, such as:

The steps and examples in this documentation use Visual Studio Code, but you can equally use any editor of your choice.

How to create New webpart Project

  1. Open windows powershell as administrator
  2. Create a directory to store the files using powershell by running the following command

       md <folder name>

      3.  Navigate to the new folder

       cd .\<folder name>\

      4.  Call yeoman SharePoint generator and create project.

       yo @microsoft/sharepoint

project creation using spfx

       5.  This will request a couple of details, enter all of those, and that will create the new project for you.

            a.  What is the name of your project

             Project solution

            b.   What is the SharePoint version

                         sharepoint versions

          c.    Select if the admin should have the option to deploy this app to all site or not.

             spfx sharepoint framework deploy widley

 

          d.     Select the type of client side component.

        spfx sharepoint framework webpart or extention

 

          e.    Enter the webpart name

 spfx sharepoint framework webpart name

           f.   Enter the webpart description

spfx sharepoint framework webpart description

           g.  Select the framework of the webpart, this is just for scaffolding purpose

spfx sharepoint framework webpart framework

 

          h.  All Settings to be done in one screen

spfx sharepoint framework webpart framework full configuration.

After the configuration, there is a confirmation message like the following.

spfx sharepoint framework webpart framework configuration done

 

 

       6.  Once you are done with that, enter the following powershell command to open the code in visual studio code.

       Code .

            

Leave a Comment

Do you want us to set up free intranet for SharePoint for you?
WAIT!

I am so confident that you will benefit from the Intranetbee! I would like to present to you a 100% discount off the original price!

Subscribe and get free SharePoint Intranet software right now!
Thanks for your interest on Intranetbee! We will get back to you with installation instructions!