SPFx Interview Questions With Answers

In this article, we are going to discuss interview questions related to the SPFx (SharePoint Framework Development ). It will help you to prepare for the interview and in getting clarity on the core concepts of SPFx development.

What is SPFx?

SPFx, short for SharePoint Framework, SPFx allows us for client-side SharePoint development, we can easily connect with SharePoint data and it also supports for open source tools.

What is the major difference between SPFx web part and the SharePoint app?

Both the development model supports client-side development but the major difference between these two is that the SharePoint app(add-in) runs on the iframe.

What you can build with SPFx?

Using SPFx framework we can customize the SharePoint pages. We can build things mentioned below using the SharePoint Framework(SPFx).

Web parts, Extensions, Adaptive Card, Library Component

How many types of extensions we can create using SPFx?

SPFx has three extension types:

Application Customizers:

• Using the application customizer we can render custom HTML at different placeholders for ex. we can create a custom header/footer using it.
• Allows us to inject custom scripting files, and styling files(It's not best practice, and Microsoft does not recommend injecting custom script files).

Field Customizers:

Allow us in modifying views in a list, we can also use it with columns to change its representation.

Command Sets:

ListView Command Set enables expanding SharePoint's command surfaces to include new actions. The toolbar and context menu are supported.

What technology SharePoint Framework(SPFx) supports?

In the SPFx, we can develop the solutions using the Java Script and it also allows us to use the frontend frameworks like react.

Which frameworks are supported with the SPFx?

You can create web parts using well-liked web frameworks like React, Angular, Vue.js. you can quickly build experiences based on the same components used in Microsoft 365 by combining React with components from Fluent UI.

What is a gulp?

gulp is a task runner. In the SPFx it's also part of the toolchain. Some tasks which performed in the SPFx are bundling and minifig the JS and CSS files.

What is a Yeoman generator?

SharePoint Online SPFx Yeoman Generator helps to create a SharePoint client-side solution project with the right toolchain and project structure. 

Can SPFx work with multiple node versions?

Yes, You can work with SPFx with multiple node versions but you need to install SPFx dependencies with the compatible versions.  Click the link for more information

What is the extension of SPFx web part package?

The extension of the SPFx web part is ".sppkg". It's necessary to build a package of the SPFx client-side solution for deployment.

How can we create a package of the SPFx client-side solutions?

To create a package of SPFx client-side solutions, we need to run the following commands.

gulp bundle --ship

gulp package-solution --ship

How can we change the SPFx web part and client-side solution name?

You can change name of your webpart from the webpart.manifest.json file.

You can change the name of your client-side solution from the package-solution.json file.

Click this link for more information

What is the URL of the local workbench of SPFx?

If you want to test at the local environment "https://localhost:5432/workbench.aspx".

To test with the SharePoint site the URL will be https://YourTestSite/_layouts/15/workbench.aspx.

From where did you set the initial page URL?

In the project structure under the config folder in the serve.json file, you can set the initial page.

This page will run first when you debug the solution.

How will you make the web part support the full-width column?

By default, SPFx client-side web parts can't be placed in full-width column. To enable the full-width column support, you need to set supportsFullBleed property to true in the webpart.manifest.json file.

Note:  The SPFx workbench doesn't support testing web parts in the full-width column layout.

How can you check the version of the SPFx generator version installed in your system?

To check the SPFx generator installed in your system. You need to run the npm command mentioned below.

npm ls -g --depth=0 @microsoft/generator-sharepoint

What is the role of package-solution.json and config.json file?
package-solution.json:
This file contains the client-side solution name, ID, version, and the location where the package will be created. The file also includes solution path configuration.
config.json:

This file contains the bundling information and details of all the components used in the solution.

The entry point of the solution. All the external references and localization resources are stored in this file.

Can we install the SPFx solution by applying the site template in modern SharePoint?

Yes, we can install the SPFx solutions using the Site Template.  To do this we need to add a verb in the Site script with the Id of the solution and when we apply the site template solution gets installed.

To get more info on site templates, site scripts and site designs click here.

For more Interview questions on SPFx : Click this link for more SPFx Interview questions.