How To Use Rails Assets Directly In Your JS Files With RWR View Helpers

Yashu Mittal

Here at CodeCarrot, we love working with both Rails and React on our tech stack, and lately we’ve found ourselves using them more and more. But there has always been a problem with using image paths (rails adding digest hashes) in our React components - we had to pass it as a prop from views to redux containers and from there to our dumb components. That involves a lot of redundant steps, making it more likely that something will go wrong; this is why we came up with rwr-view-helpers, which makes it possible for developers to access Rails assets directly in javascript.

1. How does it work?

When we start our Rails server, the first request will generate a cache for rwr-view_helpers in the form of json & js files with hash mapping assets’ urls to urls with a generated digest-hash.

The .gif, .jpg, .png file extensions are supported by default. More can easily be added, according to the user’s needs.

2. How to install it?

The installation of helpers is really straightforward, all you have to do is:

$ npm install --save rwr-view-helpers
$ gem 'rwr-view_helpers'
//=require rwr_view_helpers`

3. How to use it?

Using helpers is extremely easy - they’re simply exported as a function from our node module:

import React from 'react';
import { imagePath } from 'rwr-view-helpers';
import { facebookIcon } from 'constants/icon-urls';

export default ({ alt }) => (
  <img alt={alt} src={imagePath(facebookIcon)} />

The only thing you need to remember at this point is to generate a new cache by running the rake task each time you add new assets to your project and want to use them in your javascript files.

$ rake tmp:clear

Response to “How To Use Rails Assets Directly In Your JS Files With RWR View Helpers”

Stay current

Sign up for our newsletter, and we'll send you news and tutorials on business, growth, web design, coding and more!