Phoenix 1.4 with Bootstrap, jQuery, Bootstrap Notify, SASS, and Webpack
Tags: elixir, phoenix, sass, webpack
Published: 2019-09-22 07:42:28

---
title: Phoenix 1.4 with Bootstrap, jQuery, Bootstrap Notify, SASS, and Webpack
published: true
tags: Elixir,Phoenix, Sass, Webpack
canonical_url: https://www.rockyourcode.com/phoenix-1-4-with-bootstrap-j-query-bootstrap-notify-sass-and-webpack
---

I'm currently working through **[Mastering Phoenix Framework][masteringphoenix]** by Shankar Dhanasekrann.

The book teaches you how to build a shop application with Test-Driven Development using Phoenix.  
But the code uses Phoenix 1.3.

Phoenix 1.3 still uses [brunch][brunch] for JavaScript asset generation. And the framework ships with Bootstrap for CSS.  
In [v1.4 the authors replaced brunch with webpack](https://phoenixframework.org/blog/upgrading-from-13x-to-140). And now Phoenix uses [Milligram][milligram], a minimalist CSS framework, instead of the heavyweight Bootstrap.

But what if you want to use **Bootstrap, SASS, jquery** and **jquery plugins** like **[Bootstrap Notify][bootstrapnotify]**?

[Abdulhakim Haliru wrote a good blog post on how to install Bootstrap, etc.][medium].  
If you also want to use jquery plugins and SASS some additional steps are necessary.

# Install NPM Plugins

Navigate to your Phoenix project and find the `assets` folder.

```bash
$ cd assets
$ npm install --save font-awesome bootstrap bootstrap4-notify jquery
$ npm install --save-dev file-loader sass-loader@7.3.1 node-sass
```

[Bootstrap4-notify](https://www.npmjs.com/package/bootstrap4-notify) adds "growl-like" notifications to your web page. They are a nicer looking alternative to pop-ups.

I had problems with the latest version of `sass-loader` but version 7.3.1 works.

If you don't want to use `bootstrap4-notify`, you can **use `popper.js` for Bootstrap's "native" pop-ups**:
```bash
$ cd assets
$ npm install --save font-awesome bootstrap popper.js jquery
$ npm install --save-dev file-loader sass-loader@7.3.1 node-sass
```

# Webpack Configuration

Add this to your `webpack.config.js` in your `assets` folder:

```js
// at the top of the file where your import statements are
//...
const webpack = require('webpack')

// inside the `module.exports` object
module.exports = (env, options) => ({
  // ....
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], // needed for SCSS
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, // needed for font-awesome
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: '../fonts',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      // add jquery
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
})
```

You need `file-loader` for Font Awesome, and `webpack.ProvidePlugin` to add jquery support.

Here is a link to my [webpack.config.js](https://github.com/sophiabrandt/mango/blob/master/assets/webpack.config.js).

# Add Bootstrap and Font Awesome to CSS

Create the `app.scss` file under `assets/css` (delete `app.css`):

```css
$fa-font-path: '~font-awesome/fonts';
@import '~bootstrap/scss/bootstrap.scss';
@import '~font-awesome/scss/font-awesome.scss';

/* Phoenix flash messages */
.alert:empty {
  display: none;
}

/* Phoenix inline forms in links and buttons */
form.link,
form.button {
  display: inline;
}
```

Read more about how to use [Font Awesome with Sass/SCSS on the official website](https://fontawesome.com/how-to-use/on-the-web/using-with/sass).

# Add jquery and jquery Plugins to JavaScript

Here is an example for using Bootstrap Notify when you add an item to a cart.  
Make note of the imports at the top of the file.

The file is `app.js` under `assets/js`:

```js
import 'bootstrap'
import 'bootstrap4-notify'
import $ from 'jquery'
import css from '../css/app.scss'
import '../../deps/phoenix_html'

window.jQuery = $
window.$ = $

function ajaxHandler(e) {
  e.preventDefault()
  var post_url = $(this).attr('action') //get form action url
  var form_data = $(this).serialize() //Encode form elements for submission

  $.post(post_url, form_data, function(response) {
    // use $.notify for Bootstrap-Notify
    $.notify({
      message: response.message,
      offset: 60,
      type: 'success',
    })
    $('.cart-count').text(response.cart_count)
  })
}

var ajaxCart = {
  init: function() {
    $(function() {
      $('.cart-form').on('submit', ajaxHandler)
    })
  },
}

// init ajax
ajaxCart.init()
```

### Further Reading

- [Mastering Phoenix Framework][masteringphoenix]
- [Setup Bootstrap with Phoenix](https://github.com/Plangora/phoenix_bootstrap)
- [How to install Bootstrap on a Phoenix 1.4 project](https://medium.com/wecode-ng/how-to-install-bootstrap-on-phoenix-1-4-project-c8aa724dcdeb)
- [Elixirforum: Add Bootstrap and Jquery to Phoenix 1.4 project](https://elixirforum.com/t/add-bootstrap-and-jquery-to-phoenix-1-4-project/22498)
- [How to install popper.js with Bootstrap 4?](https://stackoverflow.com/questions/47039812/how-to-install-popper-js-with-bootstrap-4#47470007)

[masteringphoenix]: https://shankardevy.com/phoenix-book/
[brunch]: https://brunch.io/
[bootstrapnotify]: http://bootstrap-notify.remabledesigns.com/
[milligram]: https://milligram.io/
[medium]: https://medium.com/wecode-ng/how-to-install-bootstrap-on-phoenix-1-4-project-c8aa724dcdeb