Jake Worth

Jake Worth

Adding jQuery to Phoenix

Published: January 05, 2017 2 min read

  • 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.


Get better at programming by learning with me. Subscribe to my newsletter for weekly ideas, creations, and curated resources from across the world of programming. Join me today!