Menu icon Foundation
Foundation with Browserify

Recently I decided to get up to speed and improve my front-end workflow with Browserify (http://browserify.org/). I found their documentation to be slightly less than inviting, however, so I figured I'd write a quick summary of my findings and how to get Foundation working with it.

The one-liner on Browserify's site reads: "Browserify lets you require('modules') in the browser by bundling up all of your dependencies."

To understand what this means, first think of the old way of including a js plugin: 1) Go to the plugin's site and download the latest version. 2) Copy the downloaded script into some folder in your project. 3) Add a script tag referencing the file to your layout.

That process was annoying and made it difficult to manage plugin versions, not to mention that it added an extra script tag to your layout which increases page load time. Package managers like Bower and NPM cut out a lot of these annoyances, but not all. Then came Browserify.

With Browserify, here's what the process looks like. Say you need jQuery:

1) On the command line in your project folder, install jQuery with NPM and save it as a dependency:

npm install jquery --save

2) Then in your app.js file:

var $ = require('jquery');

And that's it. You now have the latest version of jQuery saved in your node_modules folder and you can require('jquery') in any file that needs it. If you require it in multiple files, don't worry, it'll only get loaded once.

Browserify will then bundle up all of your plugins along with your script files into one production-ready compressed js file that you reference with a single script tag in your layout. You can use Gulp or Grunt to automate this bundling task. (Not familiar with Gulp / Grunt? They just run tasks that you set up, for instance compiling sass into css, minifying js, etc.).

Sometimes things get a little bit trickier when plugins depend on other plugins, like how Foundation depends on jQuery. To get Foundation working, I needed to use browserify-shim (https://github.com/thlorenz/browserify-shim) and include the following in my package.json

"browser": {
  "jquery": "./node_modules/jquery/dist/jquery.js",
  "foundation": "./node_modules/foundation-sites/js/foundation.js"
},
"browserify-shim": {
  "jquery": "$",
  "foundation": "foundation"
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
}

After that, installing and including Foundation worked perfectly:

// Command Line
npm install jquery --save
npm install foundation-sites --save

// app.js
var $ = require('jquery');
var foundation = require('foundation');

$(document).foundation();

I created a generator to scaffold out a basic project folder setup using Foundation, Gulp and Browserify, feel free to check it out: https://github.com/dougmacklin/generator-foundation-gulp-browserify

It allows you to use LibSass or Compass, Jade templating or standard HTML and include Font Awesome icons if you want. It also starts a server with LiveReload, so that you can view your changes without having to hit refresh.

If you're interested in learning more, I'd recommend this post: http://viget.com/extend/gulp-browserify-starter-faq

browserifygulpyeomangenerator

Recently I decided to get up to speed and improve my front-end workflow with Browserify (http://browserify.org/). I found their documentation to be slightly less than inviting, however, so I figured I'd write a quick summary of my findings and how to get Foundation working with it.

The one-liner on Browserify's site reads: "Browserify lets you require('modules') in the browser by bundling up all of your dependencies."

To understand what this means, first think of the old way of including a js plugin: 1) Go to the plugin's site and download the latest version. 2) Copy the downloaded script into some folder in your project. 3) Add a script tag referencing the file to your layout.

That process was annoying and made it difficult to manage plugin versions, not to mention that it added an extra script tag to your layout which increases page load time. Package managers like Bower and NPM cut out a lot of these annoyances, but not all. Then came Browserify.

With Browserify, here's what the process looks like. Say you need jQuery:

1) On the command line in your project folder, install jQuery with NPM and save it as a dependency:

npm install jquery --save

2) Then in your app.js file:

var $ = require('jquery');

And that's it. You now have the latest version of jQuery saved in your node_modules folder and you can require('jquery') in any file that needs it. If you require it in multiple files, don't worry, it'll only get loaded once.

Browserify will then bundle up all of your plugins along with your script files into one production-ready compressed js file that you reference with a single script tag in your layout. You can use Gulp or Grunt to automate this bundling task. (Not familiar with Gulp / Grunt? They just run tasks that you set up, for instance compiling sass into css, minifying js, etc.).

Sometimes things get a little bit trickier when plugins depend on other plugins, like how Foundation depends on jQuery. To get Foundation working, I needed to use browserify-shim (https://github.com/thlorenz/browserify-shim) and include the following in my package.json

"browser": {
  "jquery": "./node_modules/jquery/dist/jquery.js",
  "foundation": "./node_modules/foundation-sites/js/foundation.js"
},
"browserify-shim": {
  "jquery": "$",
  "foundation": "foundation"
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
}

After that, installing and including Foundation worked perfectly:

// Command Line
npm install jquery --save
npm install foundation-sites --save

// app.js
var $ = require('jquery');
var foundation = require('foundation');

$(document).foundation();

I created a generator to scaffold out a basic project folder setup using Foundation, Gulp and Browserify, feel free to check it out: https://github.com/dougmacklin/generator-foundation-gulp-browserify

It allows you to use LibSass or Compass, Jade templating or standard HTML and include Font Awesome icons if you want. It also starts a server with LiveReload, so that you can view your changes without having to hit refresh.

If you're interested in learning more, I'd recommend this post: http://viget.com/extend/gulp-browserify-starter-faq

Doug Macklin over 4 years ago

Hey Rafi,

Sorry for the confusion, I'm not having issues I just wanted to share what I learned about getting Browserify working with Foundation for anyone else who might be curious. I built a generator that will scaffold out a project with Foundation and Browserify if anyone wants to jump right in (https://github.com/dougmacklin/generator-foundation-gulp-browserify), but I figured some explanation to go along with it might be useful.

Thanks!
Doug

Rafi Benkual over 4 years ago

Oh, awesome Doug! Sorry, I was in fixing mode ;) This is super helpful, thanks!

Robert Wildling almost 4 years ago

Hi, thanks for this article and the yeoman generator! - I just setup a project within phpstorm with your very generator, but unfortunately I have no idea how to get automatic code completion or code hinting for foundation css to work. The app.css should contain all the Foundation CSS, right? But no hints for eg of-canvas...
Do you have any thoughts on what might be going wrong here? Thanks!

Last Templar over 3 years ago

Hi there,

I did follow your tutorial and it works, now the problem is that I also want to include jquery-ui into the project and for the life of me I can't figure out how to do it, could you please help?

Doug Macklin over 3 years ago

Hi Last Templar,

This tutorial is a little out of date as you no longer need to use browserify-shim to get everything working. Try out the updated generator, which will allow you to generate either a Foundation 5 or Foundation 6 project: https://github.com/dougmacklin/generator-foundation-browserify

After you generate a project, run the following command to install jQuery UI: 

npm install jquery-ui --save

 Then in src/main.js, import it after the jQuery import line:

var jQueryUI = require('jquery-ui');

 From there you should be all set to use jQueryUI as you see fit, ex:

$("#someElement").draggable();

 You could also import only the plugins you need like so:

var jQueryUIDraggable = require('jquery-ui/draggable');
var jQueryUIDroppable = require('jquery-ui/droppable');
etc...

Let me know if you're still having trouble! Thanks.

Last Templar over 3 years ago

Thanks for the answer! I'll definetely give it a try tomorrow.

Last Templar over 3 years ago

Worked like a charm! Thank you!

Stéphane Richin about 3 years ago

Hi !

 

I up this topic because i've this error after compilation :

 

Erreur : ReferenceError: jQuery is not defined

 

So i've edit my package.json, but no result :

 

  "browser": {
    "jquery": "./node_modules/foundation-sites/node_modules/jquery/dist/jquery.js",
    "foundation": "./node_modules/foundation-sites/js/foundation.core.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "jquery": "jQuery",
    "foundation": "foundation"
  },

 

Any idea ?