Create modern team site in SPFx

Question

I found some articles which are explaining creating modern sites with CSOM. But I am not able to find in JavaScript to use in SPFx. Creating modern sites is supported with SPFx? Any PnP extension available for this?

Answer 1

You can use the PnPJS to create modern team and communication sites.

For that, simply add the below packages:

npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp --save

After that, you can add the below import statement:

import { sp } from "@pnp/sp";

And in the webpart, you can use it as below to create modern sites:

1) Modern communication sites:

sp.site.createCommunicationSite(
            "Comm Site Title",
            1033,
            true,
            "https://tenant.sharepoint.com/sites/commSite",
            ).then(d => {
                console.log(d);
            });

2) Modern team site:

sp.site.createModernTeamSite(
        "displayName",
        "alias",
        true,
        1033,
        "description",
        "",
        ["user1@tenant.onmicrosoft.com","user2@tenant.onmicrosoft.com","user3@tenant.onmicrosoft.com"])
        .then(d => {
            console.log(d);
        });

Reference - PnPJS Sites

Answer 2

You can do that with the most recent version (1.2.6) of PnPjs library:

import { sp } from "@pnp/sp";

sp.site.createModernTeamSite(
        "displayName",
        "alias",
        true,
        1033,
        "description",
        "HBI",
        ["user1@tenant.onmicrosoft.com","user2@tenant.onmicrosoft.com","user3@tenant.onmicrosoft.com"])
        .then(d => {
            console.log(d);
        });