Add Bootstrap and Jquery to Phoenix 1.4 project

I’m trying to add Jquery and Boostrap.js to my project. I’m doing this by downloading the file jquery.js and bootstrap.js and placing them in my vender > js folder.

Do I need to import these files into my app.js file to get them to work? Currently they are not just by adding them to the vendor.js folder.

Do I need to alter my webpack.confid.js file? I wouldn’t think so.

Thanks!

1 Like

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

1 Like

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

3 Likes

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

2 Likes

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.

1 Like