Add Bootstrap and Jquery to Phoenix 1.4 project

Phoenix Forum Questions / Help
,
1

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
2

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

1 Like
3

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
5

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

6

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.

7

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

2 Likes
8

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"
2 Likes
9

Here is a nice video tutorial about adding Bootstrap.

1 Like
10

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.

2 Likes
11

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!

12

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

13

Whoopsie. I recently changed to Hugo for my website. Looks like some links broke. Thanks for pointing that out, @Joep .

@evomedia247 I added your node about popper.js to the blog post. Thanks.