(ii) Creating a SharePoint Framework (SPFX) project using Yeoman

This blog will show you how to use Yeoman to quickly create a SPFx project, before referring to the previous blog, "(i) Configuring the SharePoint Framework (SPFx) Local development environment" To configure the local development environment.

There are two types of SharePoint Framework (SPFX) projects created by Yeoman, one for client WebPart and one for SPFx extension (Extension). Client WebPart as the name implies is a WebPart that can be added to a page, while the spfx extension provides three types of extensions for the SharePoint Online UI:

Application customizers page extensions, you can inject code into a specific location on a page to implement a custom page. The field customizers field extension allows you to customize the way fields are displayed. Command set extension, you can customize the actions on the page, such as adding buttons and so on, to implement your own code logic.

Below we use Yeoman to create WebPart and spfx extensions, respectively. Let's start with a brief introduction to what is Yeoman. Yeoman is: A generic scaffolding system that can create any type of application. Language-independent, you can use any programming language to create your own template builder. Yeoman just provides an environment and doesn't do anything. All things are done by the Template Builder (generator).

Yeoman can be understood as a collection of template tools that you want to create as an application, as long as you can quickly create a simple application using the corresponding generator provided by Yeoman. In the previous blog, we installed yeoman with NPM and a Microsoft-provided SharePoint Framework template Generator "@microsoft/generator-sharepoint". This generator will help us to quickly create a project for SPFX, which is no different from creating a SharePoint project before we open visual Studio and then choose a SharePoint project template. Just use the PowerShell command-line operation now.

First we create a WebPart. Open PowerShell, create a Folder "Firstwebpart", and then go to this folder, this folder is our project folder. All SPFX projects are created from a single line of command:

Yo @microsoft/sharepoint

This command launches the SharePoint Framework project template Builder, and the Yeoman icon and the wizard to create the SPFX project appear after the completion of the execution:

The next thing to do is to answer the wizard questions, the first question, and the first step, "What's Your solution name" is the name of the specified project, the default is the name of the current folder "Firstwebpart", you can enter a different project name, Here we use the default name, press ENTER directly to enter the next question:

The second question, "which baseline packages do you want to the target for your component (s)" is to specify the running platform for this WebPart, there are two options that can be selected using the arrow keys, The first option is SharePoint Online, and the other is SharePoint 2016 (also includes SharePoint Online), which will build the project using a different spfx version, and if you choose the first option, use the latest spfx version, Otherwise, the old version of SPFX will be used. Some people think that since the second option can support both SP 2016 and online, why the first option is also available. In fact, starting with SP 2016, all the new features were first published on online and then supported by the SP 2016 version, so the difference between the two options is not small. Here we select the first option and then enter the next question:

The third question, "Where do you want to place the files" is to specify whether to use the current folder or create subfolders to hold project files, which is much like "Create directory for Solut" When creating a project in Visual Studio Ion "option. Here we select the current folder and enter the next question:

The problem is choosing how to deploy this webpart, and if Y is selected, it will be automatically deployed to the entire SharePoint tenant when the WebPart is added to the SharePoint app catalog in the future. This webpart is available to all users. If you choose N, then it will be up to the SharePoint tenant administrator to decide which site to deploy to, and only users of a specific site can use this webpart, where we select N, where the administrator decides which site to deploy to and then enter the next question:

The question "which type of client-side component to create" is the demarcation between creating a WebPart or creating a spfx extension, where we choose the WebPart option and enter the next question:

This question needs to specify the name of the WebPart, the default is HelloWorld, the direct return key uses the default name, then the problem is to specify the description of a WebPart, use the default, and then enter the next question:

The problem is to choose a front-end frame, you can choose not to use any frame, use react or knockout, here Select the first option does not use any frame, and then enter, this time the wizard ends, Yeoman began to answer the above questions to create the project, The Yeoman icon and success message will appear after the end:

Now if we use code to open the Firstwebpart folder, we will see the structure of the project as follows:

Such a SPFX Client WebPart project is created, and the functionality of these files is explained in detail in the next blog.

Once you know how to create a WebPart project using Yeoman, it's easy to use Yeoman to create a spfx extension project (extension), which is the same as creating a WebPart project, running the "Yo @microsoft in a new folder. SharePoint command starts the wizard, answering the questions as you would create a WebPart, and note that when the wizard executes to the "which type of client-side component to create" step, select extension as follows:

After selecting extension Enter the next question, select the first of the three extension types: application customizer:

Then you specify the name and description of the page extension to begin creating the project:

Created successfully.

By using code to open the project folder, you can see that all the project structures have been created:

Similarly, if you create a field extension project, you only need to select "Field Customizer" in the "what kind of client-side component to create" issue in the wizard, if you create a command set project, in the wizard, " Select "ListView Command Set" in the "Client-side component to create" issue.

The above is the process of creating a SPFX project using Yeoman. Just one command "Yo @microsoft/sharepoint" starts the wizard and then selects the project type and provides the project information as needed. Next blog We take WebPart as an example to understand the structure and documentation of the project.