Provisioning SharePoint Lists and Libraries with SPFx: A Complete Technical Guide

Provisioning SharePoint components like lists and document libraries directly within your SPFx (SharePoint Framework) solution can significantly streamline your deployment process. Instead of manually creating resources post-deployment or relying on external scripts, you can include everything—web parts, list definitions, fields, and content types—within one cohesive package.

In this article, we’ll walk step-by-step through how to achieve this using the Feature Framework, integrating the experience from Vitaly Zhukov’s excellent guide. We’ll expand on that knowledge and adapt it for a practical enterprise scenario.

🧩 Why Provision with SPFx?

Provisioning lists and libraries inside your SPFx solution offers:

🔄 Consistency across environments (Dev, Test, Prod).
🚀 Automation for faster deployments.
🔐 Governance: Enforcing naming, structure, and security.
⚙️ Modularity: Everything is bundled in the SPFx package.

🏗️ Step 1: Create the SPFx Solution

Create your solution using the Yeoman generator:

bashCopyEdityo @microsoft/sharepoint

Choose:

WebPart (or Extension if desired)
Framework: React (or None, depending on your stack)
Deployment: Yes
Include Feature Deployment: Yes ✅ (this is critical!)
Package solution for each site: Optional

📁 Step 2: Define a Feature for Provisioning

Navigate to the sharepoint/assets folder. Create or edit the file: elements.xml.

This file defines the structure of the list/library to be provisioned.

xmlCopyEdit<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <ListInstance 
    Title="Projects"
    Description="Project tracking list"
    TemplateType="100"
    Url="Lists/Projects"
    EnableContentTypes="TRUE"
    />
</Elements>

Optional Enhancements

Add <Field> elements to define custom columns.
Use <ContentType> elements for structured item types.
Attach views, forms, or default content using CAML.

🧩 Step 3: Link Feature to Solution Package

Edit the package-solution.json file to include your new feature:

jsonCopyEdit{
  "solution": {
    "features": [
      {
        "title": "Provision Projects List",
        "description": "Creates the Projects list on activation",
        "id": "your-feature-guid",
        "version": "1.0.0.0",
        "assets": {
          "elementManifests": [
            "elements.xml"
          ]
        }
      }
    ]
  }
}

🧠 Note: Use a new GUID. You can generate one using PowerShell:

powershellCopyEdit[guid]::NewGuid()

📦 Step 4: Package and Deploy

Build the solution:

bashCopyEditgulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file from /sharepoint/solution to your App Catalog.

Upon adding the app to a site, the list will be provisioned automatically via the feature activation.

🔁 Testing and Troubleshooting

Make sure:

Your app is site-scoped if the list is site-specific.
You enable feature activation when prompted.
Use ULS logs or browser console to inspect provisioning errors.

🧪 Bonus: Add List Fields and Views

You can extend your elements.xml to include fields:

xmlCopyEdit<Field ID="{guid}" Name="ProjectStatus" DisplayName="Status" Type="Choice">
  <CHOICES>
    <CHOICE>Planned</CHOICE>
    <CHOICE>In Progress</CHOICE>
    <CHOICE>Completed</CHOICE>
  </CHOICES>
</Field>

And add the fields to your list via FieldRefs.

This allows you to deliver fully customized, ready-to-use SharePoint components with every deployment.

✅ Summary

Provisioning SharePoint lists and libraries inside SPFx:

Keeps your solution modular and self-contained.
Enables automatic setup without manual intervention.
Supports enterprise governance through consistency.

This process is ideal for intranets, project templates, and structured business apps.

🔗 Reference and Credits

This article builds upon the excellent technical post by Vitaly Zhukov:

“Provision Lists and Libraries with SPFx Solution”
👉 https://vitalyzhukov.com/en/provision-lists-and-libraries-with-spfx-solution