DEV Community: CodeFund

Build a real-time Twitter clone in 10 mins with Rails and StimulusReflex

Hopsoft — Wed, 29 Apr 2020 14:07:20 +0000

Demo

Learn how to build interactive real-time applications with Ruby on Rails, CableReady, and StimulusReflex. We'll create a Twitter style timeline that broadcasts updates to all users in real-time ...and we'll build the entire application in less than 10 minutes.

Conceptual Compression

These tools and techniques take conceptual compression to a new level by helping developers of all experience levels build real-time reactive applications faster than ever. We've been able to accomplish this with a sustained focus on developer happiness and productivity that has reduced much of the complexity associated with "modern" web development.

We use these tools at CodeFund to build some of the most sophisticated parts of our application.

The best part is that we're open source, so you can see exactly how we do it. For example, here's the backend reflex code used to build the form shown in the video. https://github.com/gitcoinco/code_fund_ads/blob/master/app/reflexes/campaign_bundles_reflex.rb

Keep an eye out for an in depth write up on the CodeFund blog where we'll dig into more detail. Coming soon...

CI for Ruby on Rails: GitHub Actions vs. CircleCI

Andrew Mason — Fri, 17 Jan 2020 20:34:45 +0000

CI for Ruby on Rails: GitHub Actions vs. CircleCI

This is part of a three part series where I will walk you through setting up your CI suite with GitHub Actions, CircleCI, and then comparing which you may want to use if you are setting up continuous integration for your Rails app.

Part 3: Comparison

You can find the conclusion of this series on the CodeFund Blog.

Thanks for following along!

CI for Ruby on Rails: CircleCI

Andrew Mason — Fri, 17 Jan 2020 19:50:24 +0000

CI for Ruby on Rails: GitHub Actions vs. CircleCI

Part 2: CircleCI

1. Set the CircleCI version

version: 2.1

2. Create your job(s), and choose a docker image to use.

CircleCI offers a lot of images for us to get started here. Alternatively, you can use their dockerfile-wizard to create your own custom image.

jobs:
  build:
    docker:
      - image: circleci/ruby:2.6.5-node-browsers
        environment:
          PG_HOST: localhost
          PG_USERNAME: ubuntu
          RAILS_ENV: test
          RACK_ENV: test
          DEFAULT_HOST: codefund.io
          PARALLEL_WORKERS: "1"
          REDIS_CACHE_URL: redis://127.0.0.1:6379
          REDIS_QUEUE_URL: redis://127.0.0.1:6379
          WORDPRESS_URL: 'https://codefund.io'

This tells our job that we want to run the commands we will define later inside of a container built with the circleci/ruby:2.6.5-node-browsers image, and we want the environment variables listed to be inside of that container.

3. Define services

For a typical Rails app, you are probably using Redis for caching or tools like Sidekiq, and you also probably have a database. Defining services in your config allows us to use additional containers to run these types of tools. We use Redis in the app, but it is not needed for running the tests.

jobs:
  build:
    docker:
      - image: circleci/ruby:2.6.5-node-browsers
        environment:
          PG_HOST: localhost
          PG_USERNAME: ubuntu
          RAILS_ENV: test
          RACK_ENV: test
          DEFAULT_HOST: codefund.io
          PARALLEL_WORKERS: "1"
          REDIS_CACHE_URL: redis://127.0.0.1:6379
          REDIS_QUEUE_URL: redis://127.0.0.1:6379
          WORDPRESS_URL: 'https://codefund.io'
      - image: circleci/postgres:11.2
        environment:
          POSTGRES_USER: ubuntu
          POSTGRES_DB: code_fund_ads_test

4. Now we have defined our build step, we need to set our working directory.

working_directory: ~/repo

5. Add steps

Now it is time to run commands inside of our container. We will start by checking out the code.

steps:
  - checkout

6. Add dependencies

We may need to add some additional dependencies in our container. You can do so by using run and tools like APT or curl.

- run: |
    sudo apt-get update
    sudo apt-get install -y postgresql-client
    curl -o- -L https://yarnpkg.com/install.sh | bash

7. Caching

Thankfully, CircleCI provides some good documentation for getting started with your tools of choice for caching dependencies. I recommend checking that out, which also has some examples.

Cache Documentation

The first step is to restore the cache from previous builds if it exists.

- restore_cache:
    name: Restore gem cache
    keys:
      - gem-cache-v4-{{ arch }}-{{ .Branch }}-{{ checksum "Gemfile.lock" }}
      - gem-cache-v4-{{ arch }}-{{ .Branch }}
      - gem-cache-v4-{{ arch }}
      - gem-cache-v4
- restore_cache:
    name: Restore yarn cache
    keys:
      - yarn-cache-v4-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
      - yarn-cache-v4-{{ arch }}-{{ .Branch }}
      - yarn-cache-v4-{{ arch }}
      - yarn-cache-v4
- run:
    name: Set up assets cache key
    command: find app/javascript -type f -exec md5sum {} \; > dependency_checksum
- restore_cache:
    name: Restore assets cache
    keys:
      - assets-cache-v4-{{ arch }}-{{ .Branch }}-{{ checksum "dependency_checksum" }}
      - assets-cache-v4-{{ arch }}-{{ .Branch }}
      - assets-cache-v4-{{ arch }}
      - assets-cache-v4

8. Bundle, Yarn, and Precompile Assets

Next, we will want to run Bundler and Yarn to install our dependencies if they were not restored from the cache, and precompile our assets.

- run:
    name: Install gem dependencies
    command: |
      gem install bundler:2.1.1
      bundle check || bundle install --jobs=6 --retry=3 --path vendor/bundle
- run:
    name: Install yarn dependencies
    command: yarn install --ignore-engines --frozen-lockfile
- run:
    name: Precompile assets
    command: RAILS_ENV=test bundle exec rails webpacker:compile

NOTE: You may be able to skip the asset compilation, that is up to you.

9. Caching our dependencies

Once we have installed our dependencies, we can save the cache.

- save_cache:
    name: Save gem cache
    paths:
      - vendor/bundle
    key: gem-cache-v4-{{ arch }}-{{ .Branch }}-{{ checksum "Gemfile.lock" }}
- save_cache:
    name: Save yarn cache
    paths:
      - ~/.cache/yarn
    key: yarn-cache-v4-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
- save_cache:
    name: Save assets cache
    paths:
      - public/packs-test
      - tmp/cache/webpacker
    key: assets-cache-v4-{{ arch }}-{{ .Branch }}-{{ checksum "dependency_checksum" }}

10. Setup Database

One last item we need to take care of prior to running the tests and linters is setting up our database.

- run:
    name: Set up DB
    command: bundle exec rails db:drop db:create db:structure:load --trace

11. Run Tests

Now we can finally run our tests. The first thing we do is run a Zeitwerk check. If this fails, we will want to fail the build. We have added this step due to a bug slipping out that we didn't catch and have found it useful. Next we will run our tests, and save any artifacts from that. We use the minitest-reporters gem, which will save screenshots of failing system tests, which we will want to see if the build fails. The reason we have set +e in there is so that the store artifacts step will run if the system tests fail.

- run:
    name: Run zeitwerk check
    command: bundle exec rails zeitwerk:check
- run:
    name: Run tests
    command: |
      bundle exec rails test
      set +e
      bundle exec rails test:system
- store_artifacts:
    path: tmp/screenshots
    destination: screenshots

12. Run Linters

The last step is to run any linters or other checks you want.

- run:
    name: Run standardrb check
    command: bundle exec standardrb --format progress
- run:
    name: Run ERB lint check
    command: bundle exec erblint app/views/**/*.html.erb
- run:
    name: Run prettier-standard check
    command: yarn run --ignore-engines prettier-standard --check "app/**/*.js"

Now our config is complete and should look like:

version: 2.1
jobs:
  build:
    docker:
      - image: circleci/ruby:2.6.5-node-browsers
        environment:
          CAMPAIGN_DEMO_ID: "395"
          PG_HOST: localhost
          PG_USERNAME: ubuntu
          RAILS_ENV: test
          RACK_ENV: test
          DEFAULT_HOST: codefund.io
          PARALLEL_WORKERS: "1"
          REDIS_CACHE_URL: redis://127.0.0.1:6379
          REDIS_QUEUE_URL: redis://127.0.0.1:6379
          WORDPRESS_URL: 'https://codefund.io'
      - image: circleci/postgres:11.2
        environment:
          POSTGRES_USER: ubuntu
          POSTGRES_DB: code_fund_ads_test
    working_directory: ~/repo
    steps:
      - checkout
      - run: |
          sudo apt-get update
          sudo apt-get install -y postgresql-client
          curl -o- -L https://yarnpkg.com/install.sh | bash
      - restore_cache:
          name: Restore gem cache
          keys:
            - gem-cache-v4-{{ arch }}-{{ .Branch }}-{{ checksum "Gemfile.lock" }}
            - gem-cache-v4-{{ arch }}-{{ .Branch }}
            - gem-cache-v4-{{ arch }}
            - gem-cache-v4
      - restore_cache:
          name: Restore yarn cache
          keys:
            - yarn-cache-v4-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
            - yarn-cache-v4-{{ arch }}-{{ .Branch }}
            - yarn-cache-v4-{{ arch }}
            - yarn-cache-v4
      - run:
          name: Set up assets cache key
          command: find app/javascript -type f -exec md5sum {} \; > dependency_checksum
      - restore_cache:
          name: Restore assets cache
          keys:
            - assets-cache-v4-{{ arch }}-{{ .Branch }}-{{ checksum "dependency_checksum" }}
            - assets-cache-v4-{{ arch }}-{{ .Branch }}
            - assets-cache-v4-{{ arch }}
            - assets-cache-v4
      - run:
          name: Install gem dependencies
          command: |
            gem install bundler:2.1.1
            bundle check || bundle install --jobs=6 --retry=3 --path vendor/bundle
      - run:
          name: Install yarn dependencies
          command: yarn install --ignore-engines --frozen-lockfile
      - run:
          name: Precompile assets
          command: RAILS_ENV=test bundle exec rails webpacker:compile
      - save_cache:
          name: Save gem cache
          paths:
            - vendor/bundle
          key: gem-cache-v4-{{ arch }}-{{ .Branch }}-{{ checksum "Gemfile.lock" }}
      - save_cache:
          name: Save yarn cache
          paths:
            - ~/.cache/yarn
          key: yarn-cache-v4-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
      - save_cache:
          name: Save assets cache
          paths:
            - public/packs-test
            - tmp/cache/webpacker
          key: assets-cache-v4-{{ arch }}-{{ .Branch }}-{{ checksum "dependency_checksum" }}
      - run:
          name: Set up DB
          command: bundle exec rails db:drop db:create db:structure:load --trace
      - run:
          name: Run zeitwerk check
          command: bundle exec rails zeitwerk:check
      - run:
          name: Run tests
          command: |
            bundle exec rails test
            set +e
            bundle exec rails test:system
      - store_artifacts:
          path: tmp/screenshots
          destination: screenshots
      - run:
          name: Run standardrb check
          command: bundle exec standardrb --format progress
      - run:
          name: Run ERB lint check
          command: bundle exec erblint app/views/**/*.html.erb
      - run:
          name: Run prettier-standard check
          command: yarn run --ignore-engines prettier-standard --check "app/**/*.js"

This is the configuration that we currently use for CodeFund, which you can find here.

While this setup will work great, there are some enhancements we can add like parallelism, which we will explore in a future post.

Special thanks to the team at CircleCI for their feedback on this post.

CI for Ruby on Rails: GitHub Actions

Andrew Mason — Tue, 14 Jan 2020 16:58:44 +0000

CI for Ruby on Rails: GitHub Actions vs. CircleCI

Part 1: GitHub Actions

1. Set the name for your action

name: Run Tests & Linters

2. Set what events should trigger the action to run

name: Run Tests & Linters

on:
  pull_request:
    branches:
      - '*'
  push:
    branches:
      - master

What this says is that this action will run anytime a pull_request is updated on any branch, and also on pushes to master.

3. Create your job, and choose what to run the action on

jobs:
  build:
    runs-on: ubuntu-latest

This tells our action we want to run the action on Ubuntu, and use the latest version GitHub has available, which is Ubuntu 18.04.

4. Define services

For a typical Rails app, you are probably using Redis for caching a tools like Sidekiq, and you also probably have a database. Defining services in your action allows us to use additional containers to run these types of tools.

services:
  postgres: # The name of the service
    image: postgres:11 # A docker image
    env: # Environment variables you want to use inside the service
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: postgres
    ports: ['5432:5432'] # The port that you can access the service on
    options: >- # Options for the service, in this case we want to make sure that the Postgres container passes a health check
      --health-cmd pg_isready
      --health-interval 10s
      --health-timeout 5s
      --health-retries 5
  redis: # The name of the service
    image: redis # A docker image
    ports: ['6379:6379'] # The ports that you can access the service on
    options: --entrypoint redis-server # Options for the service

5. Setup dependencies and checkout the branch

Here is where it got tricky for me. If you search for using GitHub actions with Rails, you will probably see something like this:

- uses: actions/checkout@v1
- name: Setup Ruby
  uses: actions/setup-ruby@v1
  with:
    ruby-version: 2.6.x
- uses: borales/actions-yarn@v2.0.0
  with:
    cmd: install

This particular example is from my friend Chris Oliver, who runs Go Rails (check it out!!).

This solution would have been great except:

The latest Ruby version available from GitHub is Ruby 2.6.3
The latest Node version available from GitHub is Node 12.13.1

At CodeFund, we are using Ruby 2.6.5 (about to bump to 2.7) and Node 13.0.1. There are a few solutions that have been proposed for this problem, like installing the version of Ruby you want from source with ruby build or using a tool like nvm. These may work for you but they can be slow, and they wouldn't work for a problem I would later have. Instead, I wrote my own Docker image that had everything I needed already built in. Ruby 2.6.5, Node 13.0.1, additional packages you would need for Postgres, Chrome for system tests, Bundler 2.0.2, and my generic environment variables.

I am not going to explain all of the details here, and I know I could reduce the size a bit but here is the first iteration of that image:

FROM ruby:2.6.5

LABEL "name"="Locomotive"
LABEL "version"="0.0.1"

ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE=DontWarn
ENV BUNDLE_PATH='/bundle/vendor'
ENV LANG=en_US.UTF-8
ENV LANGUAGE=en_US.UTF-8
ENV LC_ALL=C.UTF-8
ENV PG_HOST='postgres'
ENV PG_PASSWORD='postgres'
ENV PG_USERNAME='postgres'
ENV RACK_ENV='test'
ENV RAILS_ENV='test'
ENV REDIS_CACHE_URL='redis://redis:6379/0'
ENV REDIS_QUEUE_URL='redis://redis:6379/0'

RUN  curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
     echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
     curl -sL https://deb.nodesource.com/setup_13.x | bash - && \
     wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
     echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" | tee /etc/apt/sources.list.d/google-chrome.list && \
     apt-get update && \
     apt-get install -y google-chrome-stable && \
     echo "CHROME_BIN=/usr/bin/google-chrome" | tee -a /etc/environment && \
     wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | apt-key add - && \
     echo 'deb http://dl.google.com/linux/chrome/deb/ stable main' | tee /etc/apt/sources.list.d/google-chrome.list && \
     apt-get -yqq install libpq-dev && \
     apt-get install -qq -y google-chrome-stable yarn nodejs postgresql postgresql-contrib

RUN gem install bundler:2.0.2

6. Use Docker container

container:
      image: andrewmcodes/locomotive:v0.0.1 # my image name
      env: # additional environment variables I want to have access to
        DEFAULT_HOST: app.codefund.io

Note: If you do not set a container, all steps will run directly on the host specified, which if you remember is Ubuntu 18.04.

As of now, our action looks like:

name: Run Tests & Linters

on:
  pull_request:
    branches:
      - '*'
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    services:
      postgres:
        image: postgres:11
        env:
          POSTGRES_USER: postgres
          POSTGRES_PASSWORD: postgres
          POSTGRES_DB: postgres
        ports: ['5432:5432']
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
      redis:
        image: redis
        ports: ['6379:6379']
        options: --entrypoint redis-server
    container:
      image: andrewmcodes/locomotive:v0.0.1
      env:
        DEFAULT_HOST: app.codefund.io

7. Add steps

Now it is time to run commands inside of our container. We will start by checking out the code.

steps:
  - uses: actions/checkout@v2

8. Caching

Thankfully, GitHub provides some examples for getting started with your tools of choice for caching dependencies. I recommend checking those out and the documentation.

GitHub Actions Cache Examples
Cache Documentation

NOTE: Individual caches are limited to 400MB and a repository can have up to 2GB of caches. Once the 2GB limit is reached, older caches will be evicted based on when the cache was last accessed. Caches that are not accessed within the last week will also be evicted.

 - name: Get Yarn Cache
   id: yarn-cache
   run: echo "::set-output name=dir::$(yarn cache dir)"

 - name: Node Modules Cache
   id: node-modules-cache
   uses: actions/cache@v1
   with:
     path: ${{ steps.yarn-cache.outputs.dir }}
     key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
     restore-keys: |
       ${{ runner.os }}-yarn-

 - name: Gems Cache
   id: gem-cache
   uses: actions/cache@v1
   with:
     path: vendor/bundle
     key: ${{ runner.os }}-gem-${{ hashFiles('**/Gemfile.lock') }}
     restore-keys: |
       ${{ runner.os }}-gem-

 - name: Assets Cache
   id: assets-cache
   uses: actions/cache@v1
   with:
     path: public/packs-test
     key: ${{ runner.os }}-assets-${{ steps.extract_branch.outputs.branch }}
     restore-keys: |
       ${{ runner.os }}-assets-

9. Bundle, Yarn, and Precompile Assets

Next, we will want to run Bundler and Yarn to install our dependencies if they were not restored from the cache, and precompile our assets.

 - name: Bundle Install
   run: bundle check || bundle install --path vendor/bundle --jobs 4 --retry 3

 - name: Yarn Install
   run: yarn check || bin/rails yarn:install

 - name: Compile Assets
   run: |
      if [[ ! -d public/packs-test ]]; then
        bin/rails webpacker:compile
      else
        echo "No need to compile assets."
      fi

NOTE: You may be able to skip the asset compilation, that is up to you.

10. Update some files

In order to get this to work, I had to make a couple updates to some files in my project.

config/database.yml Update host for test to be: host: <%= ENV.fetch("PG_HOST", "localhost") %>
Update test/application_system_test_case.rb

     require "test_helper"

     class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
       driven_by :selenium, using: :headless_chrome, screen_size: [1400,1400] do |driver_options|
        driver_options.add_argument("--disable-dev-shm-usage")
        driver_options.add_argument("--no-sandbox")
      end
    end

11. Setup Database

One last item we need to take care of prior to running the tests and linters is setting up our database.

- name: Setup DB
      run: bin/rails db:drop db:create db:structure:load --trace

12. Run Tests and Linters

Now we can finally run our tests and linters.

- name: Run Rails Tests
  run: |
    bin/rails test
    bin/rails test:system

- name: Zeitwerk Check
  run: bundle exec rails zeitwerk:check

- name: StandardRB Check
  run: bundle exec standardrb --format progress

- name: ERB Lint
  run: bundle exec erblint app/views_redesigned/**/*.html.erb

- name: Prettier-Standard Check
  run: yarn run --ignore-engines prettier-standard --check 'app/**/*.js'

At this point, your action should be complete!

Here is my completed action file:

name: Run Tests & Linters

on:
  pull_request:
    branches:
      - '*'
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    services:
      postgres:
        image: postgres:11
        env:
          POSTGRES_USER: postgres
          POSTGRES_PASSWORD: postgres
          POSTGRES_DB: postgres
        ports: ['5432:5432']
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
      redis:
        image: redis
        ports: ['6379:6379']
        options: --entrypoint redis-server
    container:
      image: andrewmcodes/locomotive:v0.0.1
      env:
        DEFAULT_HOST: app.codefund.io
    steps:
    - uses: actions/checkout@v1

    - name: Get Yarn Cache
      id: yarn-cache
      run: echo "::set-output name=dir::$(yarn cache dir)"

    - name: Cache Node Modules
      id: node-modules-cache
      uses: actions/cache@v1
      with:
        path: ${{ steps.yarn-cache.outputs.dir }}
        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
        restore-keys: |
          ${{ runner.os }}-yarn-

    - name: Cache Gems
      id: gem-cache
      uses: actions/cache@v1
      with:
        path: vendor/bundle
        key: ${{ runner.os }}-gem-${{ hashFiles('**/Gemfile.lock') }}
        restore-keys: |
          ${{ runner.os }}-gem-

    - name: Cache Assets
      id: assets-cache
      uses: actions/cache@v1
      with:
        path: public/packs-test
        key: ${{ runner.os }}-assets-${{ steps.extract_branch.outputs.branch }}
        restore-keys: |
          ${{ runner.os }}-assets-

    - name: Bundle Install
      run: bundle install --path vendor/bundle --jobs 4 --retry 3

    - name: Yarn Install
      run: bin/rails yarn:install

    - name: Compile Assets
      shell: bash
      run: |
        if [[ ! -d public/packs-test ]]; then
          bundle exec rails webpacker:compile
        else
          echo "No need to compile assets."
        fi

    - name: Setup DB
      run: bin/rails db:drop db:create db:structure:load --trace

    - name: Run Rails Tests
      run: |
        bin/rails test
        bin/rails test:system

    - name: Zeitwerk Check
      run: bundle exec rails zeitwerk:check

    - name: StandardRB Check
      run: bundle exec standardrb --format progress

    - name: ERB Lint
      run: bundle exec erblint app/views_redesigned/**/*.html.erb

    - name: Prettier-Standard Check
      run: yarn run --ignore-engines prettier-standard --check 'app/**/*.js'

As you can see, setting up GitHub Actions for your CI can be quite involved and requires a lot of initial setup. Hopefully this post will help you if you are thinking of experimenting with them on your Rails app. Check back later this week for Part 2, setting up CircleCI!

Build a server updated async progress bar with Rails in 5 steps

Hopsoft — Tue, 07 Jan 2020 15:18:03 +0000

This tutorial demonstrates how simple it is to perform DOM updates from Rails background jobs with CableReady.

Intro

Ruby on Rails supports websockets out of the box via a built in library known as ActionCable. I created a library named CableReady that works with ActionCable to perform common DOM operations from background jobs without requiring you to write any custom JavaScript. And, it's very performant.

1. Create the Rails project

rails new progress_bar_demo
cd progress_bar_demo

2. Create the restful resource

First create the controller and HTML page.

bundle exec rails generate controller progress_bars
touch app/views/progress_bars/show.html.erb

<!-- app/views/progress_bars/show.html.erb -->
<h1>Progress Bar Demo</h1>
<div id="progress-bar">
  <div></div>
</div>

Then update the routes file.

# config/routes.rb
Rails.application.routes.draw do
  resource :progress_bar, only: [:show]
  root "progress_bars#show"
end

3. Setup the styling

First create the stylesheet.

mkdir app/javascript/stylesheets
touch app/javascript/stylesheets/application.scss

// app/javascript/stylesheets/application.scss
#progress-bar {
  background-color: #ccc;
  border-radius: 13px;
  padding: 3px;
}

#progress-bar>div {
  background-color: green;
  width: 0;
  height: 20px;
  border-radius: 10px;
}

Then update the JavaScript pack to include the stylesheet.

// app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "../stylesheets/application.scss" // <-- add this line

Finally, update the application layout to use the stylesheet pack.

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
  <head>
    <title>ProgressBarDemo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- line below was updated to use stylesheet_pack_tag -->
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

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

4. Setup the ActionCable channel

yarn add cable_ready
bundle exec rails generate channel progress_bar

// app/javascript/channels/progress_bar_channel.js
import consumer from "./consumer"
import CableReady from 'cable_ready'

consumer.subscriptions.create("ProgressBarChannel", {
  received: data => {
    if (data.cableReady) CableReady.perform(data.operations)
  }
})

# app/channels/progress_bar_channel.rb
class ProgressBarChannel < ApplicationCable::Channel
  def subscribed
    stream_from "ProgressBarChannel"
  end
end

5. Setup the backend

bundle add cable_ready
bundle exec rails generate job progress_bar

When this job fires, it runs a loop that fills in the progress bar a little bit on each iteration. This is possible because CableReady allows us to send commands to the browser that update the DOM without the need to write custom Javascript.

# app/jobs/progress_bar_job.rb
class ProgressBarJob < ApplicationJob
  include CableReady::Broadcaster
  queue_as :default

  def perform
    status = 0
    while status < 100
      status += 10
      cable_ready["ProgressBarChannel"].set_attribute(
        selector: "#progress-bar>div",
        name: "style",
        value: "width:#{status}%"
      )
      cable_ready.broadcast
      sleep 1 # fake some latency
    end
  end
end

# app/controllers/progress_bars_controller.rb
class ProgressBarsController < ApplicationController
  def show
    ProgressBarJob.set(wait: 1.second).perform_later
  end
end

6. Run and watch the magic

bundle exec rails s

Then visit http://localhost:3000 in a browser.

Disclaimer

⚠️ This demo is tailored for the development environment. In a production setup you'd need to configure both ActionCable and ActiveJob to use Redis. You'd also want to secure the ActionCable channel.