Create modern team site in SPFx











up vote
4
down vote

favorite
1












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?










share|improve this question




























    up vote
    4
    down vote

    favorite
    1












    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?










    share|improve this question


























      up vote
      4
      down vote

      favorite
      1









      up vote
      4
      down vote

      favorite
      1






      1





      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?










      share|improve this 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?







      sharepoint-online javascript spfx spfx-webparts modern-experience






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 7 at 12:35









      Gautam Sheth

      23.7k12047




      23.7k12047










      asked Dec 7 at 12:27









      Mihir

      75151942




      75151942






















          2 Answers
          2






          active

          oldest

          votes

















          up vote
          7
          down vote



          accepted










          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






          share|improve this answer

















          • 1




            I don't see the point to have two identical answers.. so deleted mine despite I answered a bit earlier than you...
            – Sergei Sergeev
            Dec 7 at 14:52


















          up vote
          5
          down vote













          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);
          });





          share|improve this answer





















            Your Answer








            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "232"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: false,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsharepoint.stackexchange.com%2fquestions%2f253918%2fcreate-modern-team-site-in-spfx%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            7
            down vote



            accepted










            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






            share|improve this answer

















            • 1




              I don't see the point to have two identical answers.. so deleted mine despite I answered a bit earlier than you...
              – Sergei Sergeev
              Dec 7 at 14:52















            up vote
            7
            down vote



            accepted










            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






            share|improve this answer

















            • 1




              I don't see the point to have two identical answers.. so deleted mine despite I answered a bit earlier than you...
              – Sergei Sergeev
              Dec 7 at 14:52













            up vote
            7
            down vote



            accepted







            up vote
            7
            down vote



            accepted






            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






            share|improve this answer












            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







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Dec 7 at 12:33









            Gautam Sheth

            23.7k12047




            23.7k12047








            • 1




              I don't see the point to have two identical answers.. so deleted mine despite I answered a bit earlier than you...
              – Sergei Sergeev
              Dec 7 at 14:52














            • 1




              I don't see the point to have two identical answers.. so deleted mine despite I answered a bit earlier than you...
              – Sergei Sergeev
              Dec 7 at 14:52








            1




            1




            I don't see the point to have two identical answers.. so deleted mine despite I answered a bit earlier than you...
            – Sergei Sergeev
            Dec 7 at 14:52




            I don't see the point to have two identical answers.. so deleted mine despite I answered a bit earlier than you...
            – Sergei Sergeev
            Dec 7 at 14:52












            up vote
            5
            down vote













            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);
            });





            share|improve this answer

























              up vote
              5
              down vote













              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);
              });





              share|improve this answer























                up vote
                5
                down vote










                up vote
                5
                down vote









                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);
                });





                share|improve this answer












                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);
                });






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Dec 7 at 12:31









                Sergei Sergeev

                9,80352342




                9,80352342






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to SharePoint Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.





                    Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                    Please pay close attention to the following guidance:


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsharepoint.stackexchange.com%2fquestions%2f253918%2fcreate-modern-team-site-in-spfx%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    How to change which sound is reproduced for terminal bell?

                    Can I use Tabulator js library in my java Spring + Thymeleaf project?

                    Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents