SPFx – jQuery , Bootstrap4 & Font Awesome

Enable the jQuery, Bootstrap4 & font awesome for the SPFx

Step 1: Create SPFx

yo @microsoft/sharepoint –solution-name “jquery-spfx” –component-name “jqueryspfx-wp” –component-description “This webpart will use the jQuery, bootstrap and font awesome.” –component-type “webpart” –framework “none” –environment “spo” –package-manager “npm” –skip-feature-deployment

Step 2: Install additional packages

npm install jquery –save

npm install @types/jquery –save-dev

npm install bootstrap@4 –save

npm install @types/bootstrap@4 –save-dev

npm install –save @fortawesome/fontawesome-free

npm shrinkwrap

npm install url-loader –save-dev

Step 3: Config.json

“externals”: {

    “jquery”: {




    “bootstrap”: {



      “globalDependencies”: [





Step 4: Gulpfile.js

const build = require(‘@microsoft/sp-build-web’);


    additionalConfiguration: (generatedConfiguration) => {


            test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,

            loader: ‘url-loader’,





        return generatedConfiguration;




Step 5: webpart ts file

import * as $ from “jquery”;

import * as bootstrap from “bootstrap”;




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s