Jake Worth

Adding jQuery to Phoenix

January 06, 20171 min read

  • elixir

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.


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"


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

Blog of Jake Worth.

© 2021 Jake Worth.