DEV Community

Cover image for Adding Bootstrap to a Phoenix 1.6 project
Oliver Andrich
Oliver Andrich

Posted on

Adding Bootstrap to a Phoenix 1.6 project

Many people are using Tailwind CSS, and Mike Clark wrote a great post about adding Tailwind CSS to a Phoenix 1.6 project. Today, I helped a friend to port a Bootstrap 4 project to Bootstrap 5 and wondered if it is as simple to Bootstrap 5 to a Phoenix project as it is with Tailwind CSS.

Of course, just adding the links for the pre-built CSS and JavaScript is easy, but I wanted to be able to tweak Bootstrap using Sass and also embed only the required JavaScript components. It turned out to be straightforward using the wonderful dart_sass package.

The steps of this recipe follow mostly the steps Mike takes in his tutorial.

Install Bootstrap

First, we need to install Bootstrap and its sole peer-dependency Popper inside the assets folder.

cd assets
npm init -y 
npm i bootstrap @popperjs/core
Enter fullscreen mode Exit fullscreen mode

Include Bootstrap in the CSS

As we will be using Bootstrap, we can remove the files assets/css/app.css and assets/css/phoenix.css.

cd assets
rm css/app.css
rm css/phoenix.css
Enter fullscreen mode Exit fullscreen mode

I said in the introduction, we want to use Sass to be able to tweak Bootstrap in our project. So, we can create a new file assets/css/app.scss with the following content.

@import "../node_modules/bootstrap/scss/bootstrap";
Enter fullscreen mode Exit fullscreen mode

To tweak Bootstrap for real, we would create a more fine-grained Sass file, like described in the Bootstrap documentation on lean Sass imports.

Remove CSS from the Esbuild Pipeline

We will be building our CSS files using Sass, so we have to remove it from the Esbuild pipeline, which is the new standard in Phoenix projects.

Just remove the following lines at the beginning of assets/js/app.js.

// We import the CSS which is extracted to its own file by esbuild.
// Remove this line if you add a your own CSS build pipeline (e.g postcss).
import "../css/app.css"

Enter fullscreen mode Exit fullscreen mode

Include Bootstrap in the JavaScript

Bootstrap also contains a certain amount of JavaScript code to power its built-in components. To integrate this into the Esbuild pipeline of our new Phoenix project, we just have to add the following lines at the end of assets/js/app.js.

// Imports for Bootstrap
import 'bootstrap';
Enter fullscreen mode Exit fullscreen mode

To tweak Bootstrap JavaScript for real, we can import individual components as describe in the lean JavaScript section of the documentation.

Add and configure the Sass Compiler

For JavaScript and CSS, Phoenix is using esbuild as the new default bundler. To support Sass, we need to add a Sass compiler to the project. The dart_sass package is based on the official esbuild package created by Wojtek Mach and José Valim and integrates the official Sass compiler as a build tool.

Add the Import to mix.exs

def deps do
  [
    # ...
    {:esbuild, "~> 0.2", runtime: Mix.env() == :dev},
    {:dart_sass, "~> 0.2", runtime: Mix.env() == :dev},
    # ...
  ]
end
Enter fullscreen mode Exit fullscreen mode

Configure dart_sass in config/config.exs

Next up, we have to tell dart_sass which version of the Sass compiler we want to use and which input file should be compiled to what output location.

config :dart_sass,
  version: "1.43.1",
  default: [
    args: ~w(css/app.scss ../priv/static/assets/app.css),
    cd: Path.expand("../assets", __DIR__)
  ]
Enter fullscreen mode Exit fullscreen mode

Add a Watcher for Development in config/dev.exs

Add the following snippet to the watchers section in config/dev.exs just below the esbuild watcher.

sass: {
    DartSass,
    :install_and_run,
    [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]
}
Enter fullscreen mode Exit fullscreen mode

Building CSS in Production

Finally, we have to change the assets.deploy mix task in mix.exs to use the Sass compiler too.

"assets.deploy": [
  "esbuild default --minify",
  "sass default --no-source-map --style=compressed",
  "phx.digest"
]
Enter fullscreen mode Exit fullscreen mode

Demo Project

I have created a demo project which is available on GitHub for your reference. It contains a more versatile version of the app.js and app.scssfiles.

GitHub logo oliverandrich / bootstrap_phoenix_project

A small demo project showing how to integrate Bootstrap with Phoenix 1.6.

And I like to promote another package that might be handy for you.

GitHub logo oliverandrich / bootstrap_icons_elixir

Include Heroicons as SVG-strings in your Elixir/Phoenix project!


Photo by Mayur Gala on Unsplash

Discussion (2)

Collapse
lurnid profile image
Max Mahmoud Wardeh

Thanks for the post!

Collapse
miguelcoba profile image
Miguel Cobá

Hey Oliver, great tutorial. Thanks for writing it! Bookmarked for future reference!