Add Bootstrap and Jquery to Phoenix 1.4 project

Search before you ask: How to install bootstrap in Phoenix 1.4?

I wrote this guide few months ago, check it out. ~ https://medium.com/wecode-ng/how-to-install-bootstrap-on-phoenix-1-4-project-c8aa724dcdeb

Thank you - I see the part where you’ve imported jquery into your webpack.config.js and I think this may solve my issue.

Thanks but I did find this and it doesn’t answer how to work with the js files I’ve downloaded, only css. I didn’t use npm to install the dependencies either.

Ah right, you can just add import 'bootstrap'; in app.js

What I’ve done so far is to use package.json. In the case of jQuery I’ve added it on assets/package.json in this way

"dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",	
    
    "jquery": "^3.4.1"
}

and then on the terminal

assets$ npm install

The jQuery library is then downloaded in assets/node_modules and available to be imported on any javascript file. If I create a script like assets/js/custom.js, I can then import jQuery like so

// assets/js/custom.js
import jQuery from "jquery"

jQuery(document).ready(function($){
  ...
})

and to include the script into the assets pipeline I have to import it in app.js

// assets/js/app.js
import "./custom"

Here is a nice video tutorial about adding Bootstrap.

I’ve consolidated all the info from the previous posts into one article, and also added info on how to add jquery (that were installed via npm).

I had the problem that I wanted to use a Bootstrap/jQuery Notify plugin and I couldn’t get it working.;

Phoenix 1.4 with Bootstrap, jQuery, Bootstrap Notify, SASS, and Webpack

Kudos to the previous posters.

That url has a typo: should be https://www.rockyourcode.com/phoenix-1.4-with-bootstrap-jquery-bootstrap-notify-sass-and-webpack/

Nice write up!

Make sure you also have popper.js as a dependency as bootstrap needs it for modals etc