Node.js: v10.16.0
SPFx: 1.9.1

Bootstrap & Font Awesome are my mandatory libraries to build any site on SharePoint Online. I used it often to customise the look of SharePoint using the content editor webpart with js & css. When I tried to migrate my code to SPFx one of the challenge I faced was how to install those in the solution. Well we have several choices to add those in the framework
Before adding libraries please go through this Link from Microsoft Docs to understand how those external dependencies are loaded and handled within SPFx
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library
Global Reference Approach:
In the below code I used the global option to load those libraries so that multiple webparts can make use of the libraries.

Step :1

After finished creating the WebPart solution using Yo generator install the bootstrap and font awesome using the below

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

Step:2

Add external references to the config.json file
Locate the config.json file under the config folder and add the below entry to the file

"externals": {
"jquery": {
"path": "node_modules/jquery/dist/jquery.min.js",
"globalName": "jQuery"
},
"bootstrap": {
"path": "node_modules/bootstrap/dist/js/bootstrap.min.js",
"globalName": "bootstrap"
}
}

Step 3:

Font awesome is not recognised by default by the webpack, so the gulp has to recognise the font format before it loads it to the solution. Run the below command to install the url loader

npm install url-loader --save-dev

After installing add the below to the gulp.js file which is at the root folder

'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.module.rules.push(
{
test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: {
loader: 'url-loader'
}
}
);
return generatedConfiguration;
}
});
build.initialize(gulp);

Step 4:

Now add the entry into the .tsx file to reference the bootstrap CSS & JS and the font awesome CSS

import * as jQuery from "jquery";
import * as bootstrap from "bootstrap";
require('../../../../node_modules/bootstrap/dist/css/bootstrap.min.css');
require('../../../../node_modules/@fontawesome/fontawesome-free/css/all.min.css');