Implementing Bootstrap and Font-awesome in SharePoint Framework webparts using React

Responsive Design has been a biggest driving factor for SharePoint framework (SPFx) solutions. In a current SPFx project using React, we are building a component with SharePoint framework that uses bootstrap elements and font-awesome icons for responsive look and feel. While building the UI piece, we resolved many issues during the initial set up, so writing this blog with detail steps for 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) bit but only the UI bit. The functionality bit will be part of another post. So here we go..

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 reference from within node_modules (why jQuery? because it is needed for some of the other functionality, not related to bootstrap directly)

   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 are installed successfully

3. Now locate config.json file in config folder and add the below bit 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 .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 you have already imported them 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 your html to the .tsx file in 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 above CSS libraries, you will receive Typescript errors saying that loader module was not found for WOFF2 font type. So to resolve that we 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 where that 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.