Implementing Bootstrap and Font-awesome in SharePoint Framework solutions using React
Rate this post

Responsive Design has been the biggest driving factor for SharePoint framework (SPFx) solutions. In a recent SPFx project for a customer, we developed a component using React, Bootstrap and Font-awesome icons for a responsive look and feel. While building the UI piece, we encountered many issues during the initial set up, so I am writing this blog with detail steps for future reference. One of the key fixes mentioned in this post, is for the WOFF2 font-type file which is a component in font-awesome and bootstrap.
In this blog post, I will not be detailing the technical implementation (business logic and functionality) just focusing on the UI implementation. The following steps outline how to configure SPFx React client side web parts to use Bootstrap and Font-awesome CSS styles
Steps:

  1. Create a SharePoint Framework project using Yeoman. Refer this link from Microsoft docs for reference.
  2. Next, install JQuery, Bootstrap and Font-awesome using npm so that it can be available from within node_modules
    npm install jquery --save
    npm install @types/jquery --save-dev
    npm install bootstrap --save
    npm install @types/bootstrap --save-dev
    npm install jquery --save
    npm install @types/jquery --save-dev
    

    Check the node_modules folder to make sure they got installed successfully

  3. Now locate config.json file in config folder and add the entry below for third party JS library references.
    "externals": {
          "jquery": {
          "path": "node_modules/jquery/dist/jquery.min.js",
          "globalName": "jQuery"
        },
        "bootstrap": {
          "path": "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "globalName": "bootstrap"
        }

    Then reference them in the .ts file in the src folder using import

    import * as jQuery from "jquery";
    import * as bootstrap from "bootstrap";
    
  4. For CSS reference, we can either refer to the public CDN links using SPComponentloader.loadCss() or else refer to the local version as below in the .tsx file
    Note: Don’t use ‘require’ for js scripts as they are already imported in above step. If included again it will cause a component load error.

    require('../../../../node_modules/bootstrap/dist/css/bootstrap.css');
    require('../../../../node_modules/bootstrap/dist/css/bootstrap.min.css');
    require('../../../../node_modules/bootstrap/dist/css/bootstrap-theme.css');
    require('../../../../node_modules/bootstrap/dist/css/bootstrap-theme.min.css');
    require('../../../../node_modules/font-awesome/css/font-awesome.css');
    require('../../../../node_modules/font-awesome/css/font-awesome.min.css');
    
  5. When using React, copy the html to the .tsx file in the components folder. If you want to use the HTML CSS classes as-is and not the SASS way, refer to this blog post. For image references, here is a good post to refer.
    For anyone new to React as me, few tips below for styling:
    1. Use className instead of HTML class attribute
    2. In order to use inline styles, use style={{style attributes}} or define an object, since everything in JSX are elements
  6. When ready, use gulp serve to launch your solution in local workbench.
    Important: If you’re using custom icons or fonts from the above CSS libraries, you will receive Typescript errors saying that loader module was not found for WOFF2 font type. Here, you will need to push the custom loader for WOFF2 font type through gulpfile.js as below.First install url-loader from npm.

     npm install url-loader --save-dev

    Then modify gulpfile.js at the root directory to load the custom loader.

    build.configureWebpack.mergeConfig({
      additionalConfiguration: (generatedConfiguration) => {
        generatedConfiguration.module.loaders.push([
          { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff2'} }
        ]);
        return generatedConfiguration;
      }
    });
    

    Now gulp serve your solution and it should work fine.

You might still face CSS issues in the solution as the referring CSS doesn’t exactly match the HTML-CSS implementation. To resolve any conflicts, use CSS Override (!important) wherever necessary.
In this post I have shown how we can configure bootstrap and font-awesome third party CSS files to work with SharePoint Framework solutions while leveraging React Framework.

Category:
Office 365, SharePoint, Uncategorized

Leave a Reply

  Subscribe  
newest oldest most voted
Notify of
Ravinder
Guest
Ravinder

Hi Asish,
I am facing issue with loaders.push() method.
[10:13:26] Starting subtask ‘configure-webpack’…
[10:13:28] Error – [configure-webpack] TypeError: Cannot read property ‘push’ of
undefined
[10:13:28] Error – ‘configure-webpack’ sub task errored after 1.92 s
Cannot read property ‘push’ of undefined
[10:13:28] ‘serve’ errored after 17 s
[10:13:28]
here my gulpfile.js code
‘use strict’;
const gulp = require(‘gulp’);
const build = require(‘@microsoft/sp-build-web’);
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.module.loaders.push([
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: ‘url-loader’, query: { limit: 10000, mimetype: ‘application/font-woff2’} }
]);
}
});
build.initialize(gulp);
Can you please provide me solution ASAP

Ravinder
Guest
Ravinder

1. I have already installed url-loader and its available under node_modules 2. return generatedConfiguration is there in my code. and tested with proper code but still getting the 10:13:28] Error – [configure-webpack] TypeError: Cannot read property ‘push’ of undefined [10:13:28] Error – ‘configure-webpack’ sub task errored after 1.92 s Cannot read property ‘push’ of undefined error 3. Done gulp clean 4. used gulp serve -verbose but got the below error D:\Ravinder\Dev\SPFx\TestWebpart>gulp serve -verbose Build target: DEBUG [07:40:58] Using gulpfile D:\Ravinder\Dev\SPFx\TestWebpart\gulpfile.js [07:40:58] Task ‘-verbose’ is not in your gulpfile [07:40:58] Please check the documentation for proper gulpfile formatting [07:40:58] Task ‘-verbose’… Read more »

Ravinder
Guest
Ravinder

Hi Ashish,
For your info i am using gulp tool and gulp serve –nobrowser commands to run thecode but still getting the push undefined error and as per you suggestion
i used gulp serve –verbose and getting the same error like below
[07:59:44] Starting subtask ‘configure-webpack’…
[07:59:46] Error – [configure-webpack] TypeError: Cannot read property ‘push’ of
undefined
[07:59:46] Error – ‘configure-webpack’ sub task errored after 1.45 s
Cannot read property ‘push’ of undefined
[07:59:46] ‘serve’ errored after 7.18 s
Please help me out issue

David Mitchell
Guest
David Mitchell

The following link shows how to fix this issue:
https://github.com/SharePoint/sp-dev-docs/issues/927
Basically change:
generatedConfiguration.module.loaders.push
to:
generatedConfiguration.module.rules.push
It has to do with a change made between Webpack V1 and V2

Follow Us!

Kloud Solutions Blog - Follow Us!