Adding Bootstrap to SPFx Web Parts

So we have an SPFx web part that shows how to integrate the React ‘Thinking’ tutorial with the SPFx tutorial but it looks pretty nasty:

What we need is to make it look good and we are going to do this by using Bootstrap.

In order to do this, we can follow the instructions in the SPFx framework tutorial Add jQueryUI Accordion to your SharePoint client-side web part.

First, we need to add support for dynamically loading files from a CDN. This belongs to the ‘plumbing’ section of our code as the actual ‘doing’ section should not care how the CSS is made available. So in the ThinkingWebPart.ts, add the following line:

import importableModuleLoader from '@microsoft/sp-module-loader';

This gives us access to a dynamic module loader so we can pull external content.

Where should we pull it from the obvious options are:

• From the current SharePoint root site, say the Site Assets folder.
  • Good in that it means no security boundaries are passed
  • However, this is tricky as SharePoint needs a server relative URL to get this, we can derive this from _spConfigInfo
  • Also, we need multiple copies of the file, one per site collection
• From the root site of the SharePoint tenancy.
  • Good in that there is only one copy of the file per tenancy
  • Bad in that security boundaries are passed
  • Also, bad as we have to give access to this site to everyone potentially allowing members of one site collection to see who is in another site collection
• From an external location, a Content Delivery Network (CDN)
  • Good in that there is only one copy of the file for ll tenancies
  • Bad in that security boundaries are passed
  • Worse in that the tenancies are linked
  • Better in that the browser can cache the file so after the first page it will be faster.

There is no actual answer, but for our purposes, we will use a CDN as this is a demo. In practice, I’d probably use a CDN but might think about hosting my own private CDN so that I can control what goes on it.

So add the following to the ThinkingWebPart.tsc:

public constructor(context: IWebPartContext) {
super(context);

importableModuleLoader.loadCss
(‘https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css’);
}

Then compile with:

gulp serve

This will fail with the following error messages:

Error – typescript – node_modules\@microsoft\sp-module-loader\lib\SPModuleLoader.d.ts(1,28): 
error TS2307: Cannot find module ‘combokeys’.

Error – typescript – node_modules\@microsoft\sp-module-loader\lib\importableSpModuleLoader.d.ts(1,28): 
error TS2307: Cannot find module ‘combokeys’.

Don’t worry. This is an issue with not having the correct typings installed.

As per the SPFx tutorial all you need to do is run:

tsd install combokeys --save

This will get you a running webpart that dynamically loads the Bootstrap CSS.

We need more though, we need the jQuery library to add the functionality.

However, this is not necessarily a good idea as jQuery and React overlap a lot and there are the good people who have implemented BootStrap in React. We will use this instead.

npm install react-bootstrap --save

Now, we have bootstrap available but we still need to tell our project about it.

• Install the typings file for it

  typings install dt~react-bootstrap –save –global

• In package.json, make sure the following is part of the ‘dependencies’

  “react-bootstrap”: “^0.30.3”,

• In config/config.json, make sure that the following is part of the ‘externals’

  “react-bootstrap”: “node_modules/react-bootstrap/dist/react-bootstrap.min.js”

Now we can make the desired changes to the FilterableProductTable.ts to reference react-bootstrap components.

There is quite a lot involved in this so I suggest you pull the correct version from GitHub.

git checkout tags/v1.1

Highlights are:

• React-Bootstrap and ES6 are not quite a natural fit you need to use .bind(this) rather than the => syntax.
• You need to use Controlled Components rather than the uncontrolled ones used in Thinking in React.

So give it a go and see what you think.

Cheers!

Filed under: CodeProject, Development, Office 365, SharePoint 2016, Uncategorized