React-redux-starter-kit: Including third party libraries like bootstrap from node_modules

[frankbolviken]

Hi,

I dont want to use CDN, i want to be able to include modules from node_modules like bootstrap, jQuery, etc etc. How can I achieve this?

Frank B

[anatoliyarkhipov]

Many libraries at this moment support the CommonJS format. You can just install jQuery using npm, like this (in the root of your project):

npm install jquery --save

And then import it in some JS file:

import $ from 'jquery'

$('button').addClass('btn')

You may also want to add third-party libraries to the compiler_vendor array in this file:
https://github.com/davezuko/react-redux-starter-kit/blob/master/config/_base.js

It tells webpack to compile them to the vendor bundle instead of app.

[frankbolviken]

But what If I want to include the bootstrap.min.css from the node_modules directory.. how can I achieve this? Been trying lots of things, but nothing seems to be working.

[DonHansDampf]

You can add Modules to the build path in the build/webpack.config.js file. I am not sure if this also works with bootstrap installed via npm, but it should. Just add to line 166 'bootstrap'or what ever your module is called.

BUT: You should focus more on the code you got and work with it. It is a bad idea to use jQuery AND React AND Redux AND ... You will bloat your app. You already got one strong library. Try to focus on this. If you want some tools to handle Arrays, Objects and Strings better look into lodash. If you want do to basic HTTP Request, use axios (still not for beginners. You have to learn to use redux-thunk with its promise based response). For Bootstrap you could use bootstrap-react.

But i would highly recommend you to first learn the basics of react/redux. Load in the bootstrap-react module so you can build fancy prototypes and try to learn the mechanics. Look into the build process with webpack (files in /build)... Hope i could help.

[justingreenberg]

See: https://github.com/shakacode/bootstrap-loader

[anatoliyarkhipov]

@frankbolviken Correct me someone, if I'm wrong, but I think that in the bolilerplate you can just import CSS files. For example, add this to the main.js:

import 'bootstrap/dist/css/bootstrap.min.css'

And don't forget to remove bootstrap.css from the index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

For more information, how it's configured, see this file:
https://github.com/davezuko/react-redux-starter-kit/blob/master/build/webpack.config.js#L196

[marshallford]

@frankbolviken Look into adding bootstrap to your project via the npm package and then mimic how core.scss imports normalize.css.

@import '~normalize.css/normalize';

[davezuko]

See @marshallford 's comment. Will consider moving bootstrap to a local dependency since this is brought up fairly frequently.