Как использовать Bootstrap в серверном приложении React?

Question

У меня есть Express API, который включает приложение React для отображения html для документации. Это простая страница без маршрутизации или чего-либо сложного. Я интегрировал React на стороне сервера с «express -react-views» (хотя я открыт, чтобы следовать любым другим способом). Это в настоящее время работает, это отдает ожидаемое html. См. Простую версию кода ниже.

Мой вопрос заключается в том, как использовать / импортировать bootstrap здесь на стороне сервера для html, сгенерированного компонентом React?

сервер / сервер. js

require('./config/config');
const { createEngine } = require('express-react-views');
const express = require('express');

const app = express()

app.use('views', express.static(path.resolve(__dirname, '../views')));

app.set('view engine', 'jsx');
app.engine('jsx', createEngine());

app.get('/', (req, res, next) => {
    res.render('index.jsx');
});

app.use(require('./routes/index'));


app.listen(process.env.PORT, () => {
    console.log(`Listening to port `, process.env.PORT)
})

views / index.jsx

const React = require("react");
const data = require("./data");

// THINGS I HAVE TRIED IN ORDER TO IMPORT BOOTSTRAP (some of them result in errors, others does not have effect)
// const boot = require("react-bootstrap");
// import { Button, Jumbotron, ...} from "react-bootstrap";
// const Button = require("react-bootstrap/Button");
// import "bootstrap/dist/css/bootstrap.min.css";
// 

const Docs = () => {
  return (
    <>
      <div className="jumbotron">
        <h1 className="display-4">Title</h1>
        <p className="lead">Text example</p>
        <hr className="my-4" />
        {data.map(item => (
          <div
            className="container card alert-secondary"
            key={`card_${item.id}`}
          >
            <div className="container card-body">
              <div className="alert alert-success" role="alert">
                <h2 className="text-primary">{item.example}</h2>
              </div>
              <div className="container">
                <div className="container alert-dark my-2">
                  <h4>Parametros</h4>
                  {item.example2 && (
                    <React.Fragment key={`header_${item.id}`}>
                      <h5 className="text-success">Header</h5>
                      {item.example3.map((p, ind) => (
                        <li key={`liHeader_${item.id}_${ind}`}>{p}</li>
                      ))}
                    </React.Fragment>
                  )}
                  {item.body && (
                    <React.Fragment key={`body_${item.id}`}>
                      <h5 className="text-success">body</h5>
                      {item.example4.map((p, ind) => (
                        <li key={`liBody_${item.id}_${ind}`}>{p}</li>
                      ))}
                    </React.Fragment>
                  )}
                </div>
                <div className="container col-12 alert-info">
                  <h4>Respuesta</h4>
                  <div className="container col-12 text-success">
                    {item.respuesta.map(p => (
                      <p className="text-primary" key={`examples${item.id}`}>
                        {p.text.map((part, ind) => (
                          <React.Fragment key={`p_${item.id}_${ind}`}>
                            {part} <br />
                          </React.Fragment>
                        ))}
                      </p>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

module.exports = Docs;

Как уже упоминалось выше, этот код работает. Единственная проблема заключается в том, что я не могу импортировать Bootstrap и использовать его.
Обратите внимание, что, конечно, я установил response- bootstrap, а также bootstrap.

Структура проекта:

Обратите внимание, что папка publi c не используется.

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.