Ember + Bootstrap 5

Today I welcome a new template for my blog by returning to write a post after a very long time!

This WordPress theme is built on top of the latest Bootstrap release, Bootstrap 5 and with this post I would like to explain you how to use this hugely popular front-end framework in an Ember app.

With this major new release the developers have focused most of their efforts towards removing jQuery as a dependency of the framework to make it lighter and usable by a wider audience now interested in saving as much kb as possible.

For those who knows and uses the previous Bootstrap version (v4) I suggest to dive into the migration guide, to understand what breaking changes were made in this new update.

As an experiment (I will tell you later about what I am working on in my spare time) I've tried to use Bootstrap 5 in a new Ember Octane app and thank to the release of the bootstrap npm package this turned out to be tremendously simple.

Let's see the steps:

First you have to install the bootstrap npm package:

npm install --save-dev bootstrap

Then you have to modify your ember-cli-build.js file:

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
    sassOptions: {
      includePaths: ['node_modules/bootstrap/scss'],
    },
  });
  app.import('node_modules/bootstrap/dist/js/bootstrap.bundle.min.js');
  return app.toTree();
};

The last few steps are required to be able to import bootstrap SCSS files.

First you have to install ember-cli-sass addon:

ember install ember-cli-sass

Then you have to rename your app style app.css to app.scss and insert the line to import the bootstrap files:

@import 'bootstrap';

You are now ready to use Bootstrap 5 in your Ember app!

Comments

[Jeldrik Hanschke]

You now have Bootstrap CSS and JavaScript in your application bundle. But how to use the Bootstrap components? As one of the maintainers of Ember Bootstrap I would be glad, if it would be that simple...

[Davide]

Do you mean how to display a modal (for example) from Javascript?

[Jeldrik Hanschke]

For example. More general speaking: How to wrap a component provided by Bootstrap into a reusable component in Ember framework. How to integrate the lifecycle etc.

[Davide]

I haven't tried yet but in my ideas I had imagined using ember-render-modifiers since the first parameter of the function associated with the did-insert function and the did-update is the html element to which you associate them

[Davide]

@jelhan I was thinking of something like this with @ember/render-modifiers: codepen.io/davideferre/pen/vYmBVJG