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 includenew 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.