Javascript

Rails 5 meets Webpack and React


Why Webpack?

JavaScript applications are getting more complex every day and developers are taking advantage of new versions of the language, new ways of coding are becoming more popular as well, that means lots of modules with dependencies, 3rd party libraries and more and more assets each day.

Webpack is a static module bundler for modern JavaScript applications, it processes your application and builds a dependency graph that includes every module, then it packages all modules into one or more bundles.

By using webpack we can take advantage of JavaScript new features included on ES6, and for React/Angular developers, things like TypeScript and JSX, it’s also possible to use webpack for CSS, images and font assets.

Webpacker

Webpacker is a ruby gem which allows us to use JavaScript pre-processor and webpack as a bundler to manage applications like JavaScript in Rails, in some cases you may not even need the Rails asset pipeline.

You can refer to the Github repo and check for updated requirements:

https://github.com/rails/webpacker

Adding webpacker to Rails

New application

# Available Rails 5.1+
$ rails new myapp --webpack

Existing Rails application

Add webpacker gem to the Gemfile:

# Gemfile
gem 'webpacker', '~> 3.2'

# OR if you prefer to use master
gem 'webpacker', git: 'https://github.com/rails/webpacker.git'

Then run:

$ bundle install
$ bundle exec rake webpacker:install

This will add some new files to your project:

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  └── src:
  │   └── application.css
  └── images:
      └── logo.svg

React joins the game

As you may know by now, React has been very popular over the last few years since its first version, and many changes and architectures have been getting popular too using it as the nuclear pieces of a puzzle, so let’s invite it to join this game:

Install react

We are using a gem called react-rails which wraps everything we need to get started with react inside our rails views, simply add the gem to the Gemfile.

gem ‘react-rails’

Then, as usual run:

$ bundle install
$ bundle exec rake webpacker:install:react
$ rails generate react:install

That will install the ReactRailsUJS setup, a directory for your components and a script for server rendering.

Use processed JavaScript

You can link the javaScript processed by webpack using the javascript_pack_tag, also if you have styles imported into your pack file, you can use stylesheet_pack_tag, in my case I just added javaScript inside app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Rails 5 + Webpack</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Generate new components

Just run this command:

$ rails g react:component HelloWorld greeting:string

It is added to app/javascript/components/

To render this component into a Rails view:

<%= react_component("HelloWorld", { greeting: "Hello" }) %>

Write some CSS

Eventually you may want to write your own CSS using a preprocessor like SASS inside your application, it’s easy to get webpack bundling all our stylesheets.

Adding CSS generated by webpack

This is a simple step, add the “ helper to your view:

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>UppyUploader</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application' %>
    <%= stylesheet_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Also, rename your application.css to application.scss if needed.

In this step you can add third party libraries css as well if needed it, this could be done using npm packages.

app/javascript/stylesheets/application.scss

@import 'uppy/dist/uppy.min.css';

Now, if you also want to bundle your scss using webpack, you must include the styles inside your application.js

app/javascript/packs/application.js

var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

import 'styles/application.scss';

Once you’ve done this, you can use the application.scss as the application entry point for all your SCSS imports and partials.

app/javascript/stylesheets/application.scss

@import 'uppy/dist/uppy.min.css';
@import 'colors';
@import 'global';
@import 'example-selector';

Conclusion

Now you can start building react components and give them nice and cool styling if you want. I wrote this post because even if you have everything you need to get these two things working, it can be hard to figure out how to wrap up everything the way you want. Personally, I don’t like to have css files spread across different folders. I want to keep everything well organized in an entry file and importing everything as partials; how about you? It’s your call how you do it at the end, but it’s important to know that there are other ways to build an application. I learnt this while I was coding a working example for Transloadit’s Uppy File Uploader.

I hope you’ve enjoyed this quick intro and I also hope this helps you coding.

See you!

Community
Being a remote developer and not die trying
Beginner
Administrate review
Android
Setup your CI and CD for React Native Part 1