How to install Bootstrap on a Phoenix 1.4 project

I wanted to use bootstrap in my phoenix 1.4 project but phoenix 1.4 ships with the milligram.io by default.

I had to do something about it 😄

This was how I fixed it.

Go into the assets directory from your `Terminal`. [I use RubyMine for my elixir/phoenix projects.]

cd assets

npm install — save bootstrap jquery popper.js font-awesome

OR

npm install — save bootstrap@3 jquery popper.js font-awesome [for bootstrap 3]

npm install file-loader — save-dev

Go to your assets/js/app.js file and add the import statement 
import 'bootstrap';
Go to your assets/css/app.css and the @import statements
@import "../node_modules/bootstrap/dist/css/bootstrap.css";
@import "../node_modules/font-awesome/css/font-awesome.css";
add this line to the module object inside module.exports function in assets/webpack.config.js
{
    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: [{
        loader: 'file-loader',
        options: {
            name: '[name].[ext]',
            outputPath: '../fonts'
        }
    }]
}

I have added screenshots of the above steps from my project.

Phoenix 1.4 shipped with class-less generators for markup, hence this only integrates bootstrap into your project but does not automatically add bootstrap classes to the generated markup.

P.S.

I ran into a jQuery undefined error, I had to include the following line to my webpack.config.js file

const webpack = require(‘webpack’);
updated my plugins block to include
new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
}),

I included the below into my ~app.js file

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

Restart your server

run mix phx.server again

This solved the jquery error.