Ember + Boostrap 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!

Uno script Gulp per automatizzare la compilazione dei files Sass (scss)

Gulpjs

Gulp js è una libreria javascript che permette di automatizzare svariate tipologie di noiose procedure che gli sviluppatori normalmente fanno “a mano”.

Proprio in questa direzione ho deciso di scrivere un breve script gulp che consente di automatizzare la ricompilazione dei fogli di stile SASS (scss), per evitarmi di lanciare, ad ogni modifica dei files, il comando sass sorgente.scss destinazione.css.

L’unico prerequisito per utilizzare gulp è di aver installato Nodejs ed il suo package manager npm (che viene installato di default insieme a node). Una volta installato node e scaricati i sorgenti del mio script basterà lanciare:

sudo npm install

…ed npm installerà per voi tutte le dipendenze necessarie!

Lo script prevede due modalità di esecuzione tramite i seguenti comandi:

  • gulp: compila i vostri scss presenti nella sottocartella src in un unico css nella root directory minifizzato (sass –style compressed)
  • gulp dev: compila gli scss in modalità espansa (sass –style expanded)

Questi due comandi avviano un task che rimane “in ascolto” e ad ogni modifica di un file scss rilancia il comando evitando il noioso compito di lanciare ogni volta la compilazione dei files per vedere le modifiche allo stile delle vostre web app/siti. In questo modo potrete scrivere le direttive di stile come si faceva prima dell’avvento di SASS/LESS e vedere immediatamente le nuove modifiche “live”.

Ho previsto un repository github “gulp-for-sass” con questo mini-progetto, scaricabile e modificabile liberamente!