SharePoint | Online | Best Practice | install Modern Script Editor Web Part for SharePoint Online Modern Site. RRS feed

  • General discussion

  • Currently, for SharePoint Online Modern Pages, there is no OOTB Script Editor Web Part. So if we need to insert some Js or CSS code, we need to use the Open Source Script Editor Web Part from GitHub.

    Here are the installation steps:


    Download the zip package from GitHub:


    Install Node.js

    Run "npm install -g yo gulp" to install Yeoman and gulp

    Run "npm install -g @microsoft/generator-sharepoint" to install Install Yeoman SharePoint generator

    Detailed steps please refer the official document below:

    Set up your SharePoint Framework development environment


    Unzip the package and in the Node.js command prompt, navigate to the React Script Web Part folder in Node Command, run "npm install", then run "gulp serve" for a local testing:


    Edit Write-manifests.json in the folder: sp-dev-fx-webparts-master\samples\react-script-editor\config

    Edit this json file using a text editor,add your own site asserts folder path like this:

    "cdnBasePath": "https://tenant.sharepoint.com/sites/dev/SiteAssets/SPFX"

    This folder is used to store some Js, CSS file which Script Editor Web Part needs to use.(Make sure you have create the folder inside Site Asserts before input)

    Step 4:

    Run "gulp -ship" in Node.js Command Prompt in Node Js Command Prompt.

    Run "gulp package-solution -ship" in Node.js Command Prompt in Node Js Command Prompt.

    Step 5:

    Copy contents of temp\deploy to the CDN folder created above:

    Step 6:

    Upload .sppkg file from sharepoint\solution to your tenant App Catalog

    Step 7:

    Back to a site and add this App from Site Contents:

    Create a new Modern Page and then try to add the Script Editor Web Part and then it will work:


    Best Regards

    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Wednesday, December 26, 2018 9:39 AM