Modern Page Provisioning in the SharePoint Framework (SPFx)

This article explains how to implement modern page provisioning using PnPjs in the SharePoint Framework (SPFx).
With PnPjs, developers can create, edit, and format modern SharePoint pages dynamically within web parts.

⚙️ Install Required Dependencies

Install PnPjs libraries:

npm install @pnp/sp --save

🧩 Configure the Custom Properties

Create a new source code file under the /src/webparts/<webpartname>/components/ folder.

Define the TypeScript interface:

export interface ISpfxPnppageprovisioningState {
  name: string;
  status: string;
}

⚛️ Implement the Main React Component

Below is the main React component that handles page creation via PnPjs.

@autobind
private async _CreatePage() {
  let site = this.props.context.pageContext.web;
  const pageName = this.state.name + ".aspx";

  const page = await site.addClientSidePage(pageName, this.state.name, "Article");
  const section = page.addSection();
  const column = section.addColumn(12);
  const partDefs = await sp.web.getClientSideWebParts();

  // Add sample text
  column.addControl({
    controlType: 3,
    webPartId: partDefs[0].Id,
    emphasis: 0,
    displayMode: 2,
    properties: {
      title: "New Text Section",
      text: "This is dynamically created using PnPjs!"
    }
  });

  await page.save(true);
  this.setState({ status: "Page created successfully!" });
}

🧠 Explanation

• PnPjs provides simple APIs for creating and managing modern SharePoint pages.
• The method addClientSidePage creates a new .aspx page.
• You can then dynamically add sections, columns, and web parts.
• The example uses a basic text section, but other web parts can also be added dynamically.

🎨 Render the Web Part

public render(): React.ReactElement<ISpfxPnppageprovisioningProps> {
  return (
    <div className={styles.spfxPnppageprovisioning}>
      <TextField label="Page Name" onChange={this._onChange} />
      <PrimaryButton text="Create Page" onClick={this._CreatePage} />
      <Label>{this.state.status}</Label>
    </div>
  );
}

🚀 Deploy the Solution

Once implemented, build, bundle, and deploy the solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to your App Catalog, deploy the solution, and add the web part to a modern SharePoint page.

📂 GitHub Source

✅ Summary

With PnPjs and SPFx, developers can automate modern page creation in SharePoint.
This technique is useful for dynamic intranet setups, automated content deployment, or custom page templates.