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!
Top comments (5)
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...
Do you mean how to display a modal (for example) from Javascript?
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.
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
@jelhan I was thinking of something like this with
@ember/render-modifiers
: codepen.io/davideferre/pen/vYmBVJG