Skip to main content

Create Your First SharePoint Framework (SPFx) Web Part in 15 Minutes

SharePoint Online is a cloud-based service that helps teams share, manage, and seamlessly collaborate on content across the whole organization. It provides many out-of-the-box tools to enable developers to quickly build and deploy a site; however, a range of requirements occur as a business adapts and changes, and users will want to customize their site, to provide a genuinely unique solution for their organizations. Using SharePoint Framework (SPFx) would be one of the best practices to meet such needs.

Create Your First Web Part Project

  1. Install an LTS version of Node.js V14 from here
  2. Create a new project directory for your web part and open a console from this folder.
  3. In the Command Prompt, input the following command to create a new project: #Console yo @microsoft/SharePoint
  4. The SharePoint Online SPFx Yeoman Generator will help you to create a web part by asking some questions:

5. Yeoman will create a project source code in your folder in one to three minutes. After installing, please ignore the npm warning and use VS Code (https://code.visualstudio.com/download) to open this project.

Test Your Web Part Via SharePoint Workbench

  1. Locate and open ./config/serve.json in your project.
  2. Change the property initial page to your SharePoint tenant and test site:
  3. Execute the following commands in the console:
    #Console
    gulp trust-dev-cert
    gulp serve
  4. It will open your web browser with the “initial page” URL, and you can add your web part from the toolbox to test.

Package Your Web Part

  1. Locate and open ./config/package-solution.json in your project.
  2. You don’t have to change any properties here for packaging a web part, but you can edit the “version” and “name” properties under “solution” for the version and display the name in SharePoint later, and the “zippedPackage” property under “paths” will decide the package name on your local device.
  3. Execute the following commands in the console to package a web part:
    #Console
    gulp bundle –ship
    gulp package-solution –ship
  4. Now, you can find a package in the following path: ./sharepoint/solution/hello-world.sppkg

Deploy Your Web Part to The App Catalog

  1. Confirm with IT that you have “SharePoint Administrator” permission or above.
  2.  Click the “App Launcher” icon on your SharePoint site and choose “Admin” -> “Show All” -> “SharePoint” to access the SharePoint admin center.
  3. Click “More features” and choose “Open” in the Apps section. Then, drag your package to the website, select the “Only enable this app” option, and click the “Enable app” button

Install Your Web Part on The Site

  1. Go back to your test SharePoint site. On the “Site contents” page, click “New” -> “App” to access the SharePoint apps page, find your package, and click the “Add” button to add it to the current site.
  2. Go to your test SharePoint site again. If you can see the App on the view, you have added it successfully.
  3. Create a test page and add your web part from the toolbox:
    Congratulations! Now you have an overview of the entire SPFx development and deployment workflow. If you already have experience with modern web development, you can start using familiar front-end frameworks (e.g., React, Angular and Vue.js) to create custom web part components with special features. SPFx supports the popular open-source toolchain such as NPM, TypeScript, Yeoman, webpack and gulp. It will make it easier for you to speed up the process of SPFx web part development. We wish you luck mastering SPFx web part development and hope you enjoy the SharePoint discovery journey!

References:

  • Microsoft. (2021, September 15). Overview of the SharePoint Framework (SPFx) | Microsoft Docs. Retrieved May 28, 2022, from here.

Need help making sense of all this information?
Imaginet is here to help.

With over 20 years of experience working with Microsoft Technologies, Imaginet can help you choose the right Microsoft 365 solution to adopt an effective hybrid workplace model and improve employee engagement. Contact us to get your free virtual consultation.

Let's Talk

Check out our recent articles.

June 7, 2022 in All Posts, Application Development, Cloud, Managed Services, Office 365, Productivity, SharePoint, Teams

Create Your First SharePoint Framework (SPFx) Web Part in 15 Minutes

Imaginet has adopted a hybrid workplace model for a very long time without any issues, even before the pandemic. Imaginet’s focus has always been its employees and their work-life balance. Transitioning to a complete work-from-home environment during the pandemic has been seamless for us. With over 20 years of experience working with Microsoft Technologies, Imaginet can help you choose the right Microsoft 365 solution to adopt an effective hybrid workplace model and improve employee engagement.…
Read More
June 1, 2022 in All Posts, Application Development, Enterprise Mobile, Productivity

Should Your Next Mobile App be Built With Flutter?

Imaginet has adopted a hybrid workplace model for a very long time without any issues, even before the pandemic. Imaginet’s focus has always been its employees and their work-life balance. Transitioning to a complete work-from-home environment during the pandemic has been seamless for us. With over 20 years of experience working with Microsoft Technologies, Imaginet can help you choose the right Microsoft 365 solution to adopt an effective hybrid workplace model and improve employee engagement.…
Read More
April 18, 2022 in Application Development, Azure, DevOps

Why You Should Use Azure DevOps For Your Next Application

DevOps has a different meaning to everyone, but most would agree, at its core, that it is a set of practices to deliver a higher quality product. Recently, one of our clients modernized a full suite of their applications to better manage their long-term needs. Among the expected technical challenges of updating a handful of projects in parallel came the desire to minimize downtime between projects. It became apparent that effective collaboration would be a…
Read More
December 15, 2021 in Application Development, Application Lifecycle Management, Consulting, Productivity

Managing Open-Source Dependencies with JitPack

As you can see, we have some options when dealing with problematic open-source dependencies. What I demonstrated above is not specific to GitHub or JitPack or even Android development. Not only do these tools allow us to keep our codebase and dependencies tidy, but also allow for one other often unappreciated benefit; it allows us to effortlessly give back to the open-source community.
Read More
Imaginet

Imaginet is your trusted technology partner who turns your business innovation ideas into reality. 20+ years | 1200+ satisfied customers | 2500+ successful engagements. Located in the United States and Canada. Services offered worldwide. Contact us today at info@imaginet.com or 1-800-989-6022.

Let‘s Talk.

Let's talk!