Adding Bootstrap to SPFx web parts

Hi Folks

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 in the ‘plumbing’ section of our code as the actual ‘doing’ sction 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 all 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 to the ThinkingWebPart.tsc the following:

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 at 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

Sebastian