Getting started with Brunch, Bower and Babel

TL;DR: Brunch skeleton with Bower & Babel is available here

If you are setting up tools for frontends after a few months or a year, you’ll feel pretty outdated. Finding tools that complement or compete with each other is where the confusion starts. This is my attempt at brushing my frontend skills with newer tools.

The tools

Brunch

• Tool to concatenate & minify javascript and CSS
• Copies that along with images (and fonts and other assets) to a separate dir
• Usebrunch-config.js file in your project’s root to configure Brunch

Bower

• Package manager for frontend libraries
• No more adding third-party libraries to your repo, unless absolutely necessary
• Specify dependencies like jquery, d3, etc in bower.json
• Upon running bower install, the dependencies are downloaded for into bower_components dir

Babel

• Allows you to use ES6 today. And as of the time of this writing, the latest release supports some proposed features for ES7 too. Future? Yeah sure, lets go.
• Compiles ES6 stuff down to ES5 that runs in browsers as of now

Using the tools

Brunch is a build tool. Brunch projects are generated with a “skeleton”. There are a LOT of skeletons available. I couldn’t find one that suits my requirements. I’ve made my own skeleton with Bower & Babel setup.

• Ensure you have brunch and bower installed

  npm install -g bower brunch
  

• Create a project called my-project

  brunch new https://github.com/HashNuke/brunch-bower-babel-starter my-project
  

• cd into your project directory and install dependencies

  npm install --save brunch bower babel sass-brunch babel-brunch javascript-brunch
  

Run brunch build to build the app once. The files will be available in the public dir. Run brunch watch --server, to tell Brunch to watch for files and compile them when it changes. This way you can also visit http://localhost:3333 and view the app.

If you open the console, you should see a log message that reads “App initialized”. That is output when the one-line javascript in app/assets/index.html is run

require('application').init()

The require function returns the module defined in application.js. This file is available in app/application.js. It has a function called init which logs to the console.

From here on organizing your app is totally upto you.

That is sufficient random details for a part-1.

Credits

• Thanks to Julian Godesa for pointing out the typo in the brunch watch --server command.