Frontend Fun with Rails 5.1 and Webpacker
Client side frameworks for more responsive web apps are en vogue, and have been for a number of years now. The frameworks themselves change in popularity - to begin with it was Backbone, then Ember and Angular - more recently, frameworks like Vue and React have become the most popular choices.
Let it never be said that Rails doesn't move with the times though, as Rails 5.1 introduced the Webpacker gem, providing a smarter interface to allow you to use Webpack config for bundling JavaScript packages on the client side of your Rails web app. This means easier access to stable versions of client side frameworks, and easier maintainability for those dependencies going forward. It's a separate gem too, allowing you to also use it in Rails 4.2+ apps if needed.
Let's take a look at just how easy it is in Rails 5.1 now to setup Vue.js and React. Make sure you have the latest version of Rails installed, and then we'll setup a new empty app:
rails new frontend-fun
You can also specify to use webpack as part of this command and skip the next couple of steps:
rails new frontend-fun --webpack
However, if you're looking to add this to an existing Rails app, these next two steps will allow you to add Webpacker ready to use.
Within the app, add the webpacker gem to Gemfile:
gem "webpacker"
Then run bundle from a terminal in the root directory of the project to install the gem:
bundle install
At this point, we'll now have some additional commands available to us courtesy of the webpacker gem, to install frontend packages. We'll get things rolling with the initial command to prep our webpacker config:
bin/rails webpacker:install
With that done, we should probably setup a basic page for testing, so create a new controller app/controllers/site_controller.rb, with the following Ruby code in it:
class SiteController < ApplicationController
end
Then we'll create a template for our content, at app/views/site/index.html.erb:
<h1>FrontendFun</h1>
Finally, in our config/routes.rb file, we'll add a reference for the root of our app to the new controller and action:
Rails.application.routes.draw do root "site#index"
end
If you test our app now, you'll see the FrontendFun header. Last thing we now need to do is hook in our webpacker JS, with a reference from our layout template. In app/views/layouts/application.html.erb, below the javascript_include_tag reference in the <head>, add:
<%= javascript_pack_tag 'application' %>
Now if you reload the page, and look in the JavaScript console, you should see:
Hello World from Webpacker
Webpacker - it's alive!
Vue.js
To install Vue.js, run the following commands:
bin/rails webpacker:install:vue
bin/yarn install
This will install the Vue.js packages. We'll then hook up the Hello Vue pack that is setup by default, by modifying our javascript_pack_tag line in app/views/layouts/application.html.erb:
<%= javascript_pack_tag 'application', 'hello_vue' %>
Reload our page, and you'll now see Hello Vue! in our page body, which is coming directly from Vue.js!
React
Now, in a production application, you're unlikely to want to use more than one frontend framework, unless you were transitioning from one to another. But, this is FrontendFun, so we're going to add React too!
By now, this should be fairly straightforward, we run:
bin/rails webpacker:install:react
bin/yarn install
This will install the React packages now, and setup a base HelloReact component similar to our HelloVue. So we'll just need to modify our javascript_pack_tag one more time to reference our React pack:
<%= javascript_pack_tag 'application', 'hello_vue', 'hello_react %>
Once more, reload our page, and behold - Hello Vue! and Hello React!.
Two frontend frameworks, setup very easily, co-existing in the same HTML page in our Rails app. The possibilities are practically endless!
Next steps
From here, you can edit either app/javascripts/packs/hello_vue.js and app/javascripts/app.vue if you want to use Vue.js, or app/javascripts/hello_react.jsx for React, adding new components and interactions to build out your frontend, and integrate it with whatever backend functionality your Rails app might offer. You can check out the simple demo Rails app that we've just built up here.
