In create-react-app, adding Bootstrap 4?

Question

Since create-react-app hides Webpack config without having to use eject, if I want to use something like reactstrap or react-bootstrap, should I eject or will I be

Answer 1

First off, install bootstrap's latest version in your application.

//To install bootstrap 4(latest version), jQuery, popper.js
npm i bootstrap jquery popper.js --save

Note: jQuery and popper.js are the dependencies of bootstrap.

In index.js in your root directory and add the below line

//Include bootstrap's css 
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
//Include bootstrap's js
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

In webpack.config.dev.js(Look for plugins and add the below code)

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ['popper.js', 'default'] 
})

So It would look like this.

plugins: [
  ....
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ['popper.js', 'default'] 
  })
]