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!
