Skip to content

Rodrigo Urubatan – About Code

Helping ruby developers to use the best tools for each job so they can solve hard problems, with less bugs and have more free time.

Menu
  • Home
  • My last presentations
  • About
  • Privacy Policy
Menu

WebPack on Rails! – the easiest way to use the new Javascript syntax on your rails apps with the newest frameworks

Posted on 2018-02-28 by Rodrigo Urubatan

I had some rails projects that needed a better UI or a different feature in the UI, and there was the perfect javascript library, the problem was that it needed “require.js” and it is not really easy to integrate require.js in asset pipeline.

The good news is that there is a webpack gem that will do all the work for us…

And after rails 5.1 you can just

rails new myapp --webpacker

but lets assume you have an existing app, the changes are a little bigger, but we can use both the old asset pipeline and the new webpacker.

Lets start adding the webpacker gem to the Gemfile

gem 'webpacker'

Then just run:

bundle install
rails webpacker:install

After this, you have a new file, called app/javascript/packs/application.js where you can use

var mylib = require('myjslibrary');

You’ll be able to require there any javacript you create in the app/javascript directory (instead of app/assets/javascript), and any library you add to the application using the yarn executable.

To add a library requirement use:

yarn add myjslibraryname

And do no forget to run in your deploy server:

yarn install

After commiting the yarn.lock file of course, that file will make sure you have the same library versions in all the machines your project is running.

And last, but not least, do not forget to add the the script tag to call that file to your layout using the code:

<%= javascript_pack_tag 'application' %>

And of course you do not need to remove the old javascript_tag file, allowing you to keep using both asset pipeline version and the new webpacker version.

In this new file, you can use the all new requirejs syntax, and of course that is not all, you can add css to the app/javascript directory and insert in the layout with the <%= stylesheet_pack_tag ‘application’ %>, and the gem has shortcuts to use all the new and fancy javascript APIs, for example:

rails webpacker:install:angular          # Install everything needed for Angular
rails webpacker:install:coffee           # Install everything needed for Coffee
rails webpacker:install:elm              # Install everything needed for Elm
rails webpacker:install:erb              # Install everything needed for Erb
rails webpacker:install:react            # Install everything needed for React
rails webpacker:install:stimulus         # Install everything needed for Stimulus
rails webpacker:install:typescript       # Install everything needed for Typescript
rails webpacker:install:vue              # Install everything needed for Vue

Any of these shortcuts will install the required files to use the specified library in your existing rails app.

This is it for now, it is a good start I think.

Please comment any questions you have and I’ll answer it the fastest I can!

Related

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent posts

  • Why Embrace Nesting in Ruby Modules?
  • An easy way to have a local “Github Copilot” for free
  • SPA without touching Javascript – The magic of Ruby on rails and Hotwire
  • I see Dead Jobs everywhere (sidekiq DeadSet)
  • Quick tips that help: rails notes

Arquives

  • May 2024
  • April 2024
  • February 2023
  • January 2023
  • December 2022
  • June 2021
  • March 2020
  • January 2020
  • July 2019
  • June 2019
  • May 2019
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • February 2018
  • January 2018
  • November 2017
  • August 2015
  • August 2014
  • July 2014
  • August 2007

Categories

  • AI
  • articles
  • cfp
  • firebase
  • gems
  • git
  • opinion
  • presentations
  • projects
  • rails6
  • ruby
  • Sem categoria
  • server-api
  • tutorials
  • Uncategorized
© 2025 Rodrigo Urubatan – About Code | Powered by Minimalist Blog WordPress Theme