DEV Community: Paul-Etienne Coisne

Rails + React + ActionCable without the fuss

Paul-Etienne Coisne — Sun, 03 Jan 2021 14:44:21 +0000

The code for this article is on Github
If you've landed here I'm going to bet that you simply want to know how to add ActionCable to a Rails app running React with Webpacker, nothing more, nothing less. I also assume that you know Rails and React, so I will spare explanations.
This is meant to be the absolute bare minimum: I haven't added any gem or yarn package, no check on params, no authentication, etc. It's merely a help to jumpstart your project.

Let's cut to the chase!

$ rails new reaction_cable -T --webpack=react
$ rails g model Message content
$ rails db:setup
$ rails db:migrate
$ rails s
# In another terminal…
$ webpack-dev-server

$ touch app/controllers/messages_controller.rb
$ rails g channel messages
      create  app/channels/messages_channel.rb
   identical  app/javascript/channels/index.js
   identical  app/javascript/channels/consumer.js
      create  app/javascript/channels/messages_channel.js

# config/routes.rb
Rails.application.routes.draw do
  mount ActionCable.server => '/cable'
  resources :messages, only: %i(index create)
end

# app/controllers/messages_controller.rb
class MessagesController < ApplicationController
  def index; end
end

$ touch app/javascript/packs/messages.js
$ mkdir app/views/messages
$ touch app/views/messages/index.html.erb

Now that we have the files set up, let's fill them in:

# app/views/messages/index.html.erb
<%= javascript_packs_with_chunks_tag 'messages' %>

// app/javascript/packs/messages.js
import 'channels'
import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'
import MessagesChannel from 'channels/messages_channel'

const MessagesBoard = () => <div>Empty</div>

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(<MessagesBoard />, document.body.appendChild(document.createElement('div')))
})

At this point, http://localhost:3000/messages should be browsable, albeit empty :-)

Export the channel subscription in order to use it in the Messages component.

// app/javascript/channels/messages_channel.js
import consumer from './consumer'

const MessagesChannel = consumer.subscriptions.create('MessagesChannel', {
  connected() {
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    // Called when there's incoming data on the websocket for this channel
  },
})

export default MessagesChannel

// app/javascript/packs/messages.js

import 'channels'
import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'
import MessagesChannel from 'channels/messages_channel'

const MessagesBoard = () => {
  const [messages, setMessages] = useState([])
  const [message, setMessage] = useState('')

  useEffect(() => { 
    MessagesChannel.received = (data) => setMessages(data.messages)
  }, [])

  const handleSubmit = async (e) => {
    e.preventDefault()
    // Add the X-CSRF-TOKEN token so rails accepts the request
    await fetch('http://localhost:3000/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('[name=csrf-token]').content,
      },
      body: JSON.stringify({ message }),
    })
    setMessage('')
  }

  return (
    <div>
      <input type="text" value={message} onChange={({ target: { value } }) => setMessage(value)} />
      <button onClick={handleSubmit}>Send message</button>

      <ul>
        {messages.map((message) => (
          <li key={message.id}>{message.content}</li>
        ))}
      </ul>
    </div>
  )
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(<MessagesBoard />, document.body.appendChild(document.createElement('div')))
})

# app/channels/messages_channel.rb

class MessagesChannel < ApplicationCable::Channel
  def subscribed
    stream_from 'messages'

    ActionCable.server.broadcast('messages', { messages: Message.all })
  end

  def unsubscribed; end
end

Add a #create method in your MessagesController:

  def create
    Message.create(content: params[:message])
    ActionCable.server.broadcast('messages', { messages: Message.all })
  end

You should now have a working Rails+React+ActionCable app 🚀
Please let me know in the comments if you'd like to know more about React+Rails+ActionCable!

Painless i18n for Moment.js

Paul-Etienne Coisne — Thu, 24 Dec 2020 10:31:22 +0000

You serve a multi-lingual JS app, use Moment.js and need to internationalize how times are displayed? Why bother with an expansive new NPM package where you could do it yourself in just a few lines of code?

First create a file that'll store the various formats you need, as well as the function that'll pass them to your custom Moment.js localize function:

// First find a way to determine the user's locale
const getLocale = () => window.locale || 'fr'

// Define as many formats as you wish.
const formats = {
  'ddd DD': {
    fr: 'ddd DD',
    de: 'ddd Do',
    en: 'ddd Do',
    'en-US': 'ddd Do',
    it: 'ddd DD',
  },
  'D MMM YYYY à HH:mm': {
    fr: 'D MMM YYYY à HH:mm',
    de: 'Do MMM YYYY [um] H:mm',
    en: 'D MMM YYYY [at] H:mm',
    'en-US': 'MMM Do YYYY [at] H:mm',
    it: 'D MMM YYYY [alle] HH:mm',
  },
}

// Whether you want the function to fail or not if the name doesn't exist is up to you. 
const i18nFormat = (name, locale = getLocale()) => {
  if (typeof formats[name] !== 'object') {
    console.log(`Unknown format definition for "${name}"`)

    return name
  }

  if (!formats[name][locale]) {
    console.log(
      false,
      `Missing format definition for "${name}" in locale "${locale}"`
    )

    return name
  }

  return formats[name][locale]
}

export default i18nFormat

Now you can create a file defining your localize function...

import moment from 'moment'

moment.fn.localize = function localize(inputString) {
  return this.format(i18nFormats(inputString))
}

...and import it at the root of your project. You're hot to trot!

import React from 'react'
import './setupMoment'
import moment from 'moment'

const App = () => (
  <div className="App">
    <h1>Internationalize Moment.js the easy way</h1>
    <h2>'dddd': {moment().localize('dddd')}</h2>
    <h2>'D MMM YYYY à HH:mm': {moment().localize('D MMM YYYY à HH:mm')}</h2>
  </div>
)

export default App

Functional demo on Codesandbox

Loading Chrome extensions in Capybara integration tests

Paul-Etienne Coisne — Tue, 11 Feb 2020 15:55:19 +0000

Ever dreamt of loading Chrome extensions in your capybara integration tests' windows ? Here are the steps:

Get the extension

Browse chrome://extensions
Locate the extension and its ID
Click on the "Pack extension" button at the top left of the window.
- Either use your terminal and find the extension folder using its ID. If you're on OSX it should be something like this: /Users/<your_user>/Library/ApplicationSupport/Google/Chrome/Default/Extensions/<extension_ID>. Once you're in this folder, get the full path to the extension's version. Here's mine right now: /Users/my_user/Library/ApplicationSupport/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.4.0_0 Paste that path into the Extension root directory field.
- Or if you have enabled visibility of hidden files in your folder, simply browse to the extension's folder through the Finder.
Click on "Pack extension"

Voilà! You should have a modal letting you know the extension was packed successfully, along with its path, which you could use to mv it to your Rails project.

Configure Rails

Assuming that you have the capybara and selenium-webdriver gems.

Move the .crx extension to your rails project
Wherever you instantiate your Capybara Selenium driver, simply add the extension to the options passed to the driver!

options = Selenium::WebDriver::Chrome::Options.new

unless ENV['CI']
  options.add_extension(
    Rails.root.join('test', 'browser_extensions', 'react_devtools_chrome.crx')
  )
end

Capybara.register_driver :chrome do |app|
  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end

That should have done the trick! The next time you launch an integration test in Chrome the extension should be available 🚀