Jake Worth

• elixir
• javascript

We’ve been building a Phoenix application lately; here’s the backstory.

Today I stared porting the Sprinkles of JavaScript™ to our ongoing Phoenix port, which is now alive. Some of that legacy JavaScript code required jQuery, so I needed to figure out how to get that library into the project.

Here are the steps I took.

Setup

Add jQuery as a dependency to your package.json.

// package.json

"dependencies": {
  "jquery": ">= 2.1"
}

Install and save with:

$ npm intstall --save

Next, expose jQuery globally:

// brunch-config.js

npm: {
  enabled: true,
  globals: {
    $: 'jquery',
    jQuery: 'jquery'
},

Finally, import your $ into the application assets, above any other imported JavaScript that may use it:

// web/static/js/app.js

import $ from "jquery"

Conclusion

That’s it! Enjoy jQuery in your Phoenix application. Here’s the commit where I made these changes.