File.read

The File class in Ruby has a bunch of different methods for handling files and checking on files. The relevant one here is the ‘open’ method.

file = File.read('db/items.json')

This will translate the file to be read in Ruby and save it to a variable

JSON.parse

The JSON library is not a built in feature in Ruby and so must be added as a requirement.

require 'json'

items_json = JSON.parse(file)

Building on the previous code, you are able to then use the JSON parse method to read the file. What is then produced is a Ruby hash of the existing JSON file.

File.open

We can also write new JSON files using File and JSON together.

The File.open function will open the file requested. The “w” argument will open it in write mode. Then, the inner block will write the hash to the file. The JSON.pretty_generate function also cleans up the hash to better fit JSON standards. Please note that this will rewrite the current file contents with the contents of the hash variable.

require 'json'
hash = {
    "a" => "A",
    "b" => "B"
}
File.open("db/items.json","w") do |f|
  f.write(JSON.pretty_generate(hash))
end

Sources

• File
• JSON

What you need

React

Rails

React ActionCable Provider

Instructions

1. Set up the ActionCable as described in the previous article.
2. Install react-actioncable-provider using the following commands

npm install --save @thrash-industries/react-actioncable-provider

3. In your React frontend, wrap the <App /> component in the ActionCable Provider code:

import { ActionCableProvider } from 'react-actioncable-provider';


<ActionCableProvider url='ws://localhost:3001/cable'>
  <App />
</ActionCableProvider>

4. In the component itself where you wish to receive ActionCable subscriptions, wrap the component in the Action Cable Consumer code:

import { ActionCableConsumer } from 'react-actioncable-provider';

	<ActionCableConsumer
    channel={{ channel: '' }}
    onReceived={}
  />

For the channel name, use the channel that you wish to subscribe to. The onReceived property can be used with a function that you run on the data that is received from the ActionCable channel.

Conclusion

Integrating React with ActionCable is relatively simple. Now, you can broadcast from your Rails app (using the instructions in the previous article), and then receive it in your React component to render.

Sources

https://github.com/ihollander/actioncable-starter-app

ActionCable History

Enter ActionCable. ActionCable was released with Rails 5 and was a relatively late addition of websockets to the Rails tech stack. There was previously no websocket support, with only third party libraries and Javascript workarounds. Now, with your modern Rails installation, you should ActionCable ready to go with some simple tweaks.

Starting with ActionCable

1. Making an ActionCable route.

First, you set up an ActionCable route by adding the following code to your ‘routes.rb’ file:

mount ActionCable.server => '/cable'

2. Make a channel for your data feed. You can use the default rails generator for this:

rails g channel messages

In the sample code I am presenting, we are creating an ActionCable implementation of a messaging app.

The above generator will generate the following channel code:

class MessagesChannel < ApplicationCable::Channel

def subscribed

def unsubscribed

# Any cleanup needed when channel is unsubscribed

end

end

3. After creating that channel, you will now have to access it from your client. This is done by default in Rails in the consumer.js Javascript file

// app/javascript/channels/consumer.js
// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `rails generate channel` command.
 
import { createConsumer } from "@rails/actioncable"
 
export default createConsumer()

Then, to connect to specific channels, you can utilize this code, which will subscribe your Rails app to the requested channel.

// app/javascript/channels/messages_channel.js
import consumer from "./consumer"
 
consumer.subscriptions.create({ channel: "MessagesChannel", room: "Best Room" })

4. The last part of utilizing ActionCable is to broadcast to the channel in question. You would normally do this in another part of the Rails app.

MessagesChannel.broadcast_to(
  current_user,
  title: 'New things!',
  body: 'All the news fit to print'
)

Conclusion

This is a description of the basic components of using ActionCable with your Rails app. It has definitely been simplified from past implementations without Action Cable, and shows the basic core loop of the ActionCable implementation, where you have subscriptions to a channel you set up, then subscribe to the channel from the consumer, and then lastly broadcast to the channel from the Rails app to provide data to the consumers.

Sources

Action Cable Overview - Ruby on Rails Guides

Active Storage Setup

First, run these two commands to set up Active Storage in your Rails app:

bin/rails active_storage:install
bin/rails db:migrate

This will generate and migrate the database required for the storage of these images.

Then, you can configure the ‘config/storage.yml’ file. If you have access to cloud services of any sort, you can set them up here with access keys:

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

amazon:
  service: S3
  access_key_id: ""
  secret_access_key: ""
  bucket: ""
  region: "" # e.g. 'us-east-1'

Then, you can change the setting of your environment ‘config/environments/development.rb’ to tell your rails app which service to use. To begin with, stick with local.

config.active_storage.service = :local

You can change this to use one of the other configs you set up in storage.yml.

Setting up the model

Now, in your models in ActiveRecord, you can now use the ‘has_one_attached’ macro to ensure each User can be associated with an image.

class User < ApplicationRecord
  has_one_attached :avatar
end

If you require multiple images, you can use ‘has_many_attached’ instead.

class Message < ApplicationRecord
  has_many_attached :images
end

Using Active Storage for submitted images

Now that you have ActiveStorage set up with you models, you can begin with a couple ways of how to use ActiveStorage. One of the most common ways is to allow someone to upload images. To do so, simply put on your Rails web page a request for the file_field in question:

<%= form.file_field :avatar %>

Then, in your Rails code, you can call upon the ‘attach’ method to attach the file:

user.avatar.attach(params[:avatar])

You can also check if a user already has an attachment with this method:

user.avatar.attached?

Using Active Storage with existing images

Sometimes you have existing images you want to associate with your models. You can do with the attach command again.
However, you will specify the io this time as well as the file in question.

@message.image.attach(io: File.open('/path/to/file'), filename: 'file.pdf', content_type: 'application/pdf')

Conclusion

ActiveStorage is a useful tool for Rails apps and can definitely power a powerful image use case. The fact that you can simply use or switch over to Amazon or other cloud providers as well is really powerful and can allow your application to scale. What is covered here is the tip of the iceberg and coverage of basic use cases. If you want to learn more, review the Rails docs for Active Storage.

Sources

Active Storage Overview - Ruby on Rails Guides

However, there are definitely some differences and nuances.

First, you have to make sure that you are using postgresql in your app. If that is not the case, you can convert your database using this article.

Then, you will need to define the starter files like with creating a new Rails app in Docker. However, it is a more streamlined process this time, but with many similarities.

Dockerfile

As discussed in the new Rails app article, you will have to create a new dockerfile that will build the app image. This dockerfile will exist in the root directory of the rails app. Here is the basic template:

FROM ruby:2.5
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client
RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]

Entrypoint

Next, as with the new rails app, we want to use an entrypoint. This step can be avoided if you are not using the entrypoint in your dockerfile. This file will also exist in the directory of the rails app.

#entrypoint.sh
#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /myapp/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

Docker Compose

Then, you can build the docker-compose file. You can read more about the docker-compose from my previous article. This last file will also exist in the root directory of the rails app.

#docker-compose.yml
version: '3'
services:
  db:
    image: postgres
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: password
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db

Database Settings

Then, you can adjust the config/database.yml to point the rails app at the right database:

default: &default
   adapter: postgresql
   encoding: unicode
   host: db
   username: postgres
   pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
   timeout: 5000

The notable change will be the ‘host: db’ line, allowing the rails app to see the db container.

Building the project and setting up the db

Lastly, you can build the project and set up the db:

$ docker-compose build
$ docker-compose run web rake db:create db:migrate
$ docker-compose up

These steps will build the image off the docker-compose file, then run and generate your database, and lastly run your image in a container.

Conclusion

At the end of this, you’ll have your Rails app in a docker container that you can access via localhost:3000. However, instead of using rails s in the future to launch your server, you will use ‘docker-compose up’.

Sources

• Using Docker on a new Rails app
• Quickstart: Compose and Rails

npm audit

The first command to use is

npm audit

npm audit is actually npm’s provided command and solution to update your dependencies and packages and update them. You would run npm audit to have a list of dependencies, and then run

npm audit fix

in order to patch the security vulnerabilities.

npm install/npm update

However, sometimes npm audit doesn’t work. There are multiple reasons why this could happen, but the most common reason is that a parent package of a dependency has not officially updated. The easiest way to fix this is to update the packages manually, with the following commands:

npm install 'package-name'
or
npm update 'package-name'

Updating the package with the security vulnerability manually will allow you to ensure that you are up to date on the package and no longer have the security vulnerability.

Conclusion

The above steps should generally help you get rid of the dependency alerts for node packages, in a way that is not just dismissing the notification on github, helping you keep up to date and secure.

Sources

https://docs.npmjs.com/auditing-package-dependencies-for-security-vulnerabilities

Now a lot of the time, the notification is fairly easy to get rid of, as you can just click through to the error and see the pull request that Dependabot has automatically generated. Then, integrating the pull request is as simple as merging it into your master branch and then pulling the change onto your local repo.

However, sometimes, dependabot can fail and leave an ugly security notification on your user interface:

The first thing to try would be to retry creating the Dependabot security update. It can sometimes take some time (usually not more than 15 minutes), but if it succeeds, you’re good to go! However, if it fails, you may need to manually update your dependencies in order to get rid of the notification.

Updating Dependencies

There are two ways of doing this.

The first way is to just generally run a general bundle update on your local repo:

bundle update

This works just fine, but you can also use a more targeted approach

bundle update actionview

You can specify the exact dependency that you want to update — this would be the dependency/gem that is throwing the error on the Github alert.

After updating the gem, you should have a modified gemfile.lock and sometimes gemfile. In order for the alert to be dismissed from Github, you must then commit these changes:

git add .
git commit -m "fixed * dependency alert"
git push origin master

Then, you should have a clear notification queue with resolved security issues! Safe and up to date!

However, we ran into a problem — the strings were not being translated into JSX after we piped the prewritten JSX into the React component. Here is an example of that prewritten JSX:

<Keyword name="Exhaust"></Keyword> your hand.\nDeal 7 damage for each card <Keyword name="Exhausted"></Keyword>.\n<Keyword name="Exhaust"></Keyword>."

The problem with this is that React would not recognize this as JSX when it was a string piped in from our API. It would show up as simple HTML and would not recognize those keyword names.

After experimentation with different methods, we decided to use a plugin we found called ‘react-html-parser’:

wrakky/react-html-parser

Using this plugin, we were able to pass our marked up strings into a prewritten function that allowed us to create JSX.

Here is how we did it:

First, we installed this package:

npm install react-html-parser --save

Then, we imported the library and created a transform function for the code:

import ReactHtmlParser from 'react-html-parser';

const options = { transform }

function transform(node, index) {
     if (node.type === 'tag' && node.name === 'keyword'){
         return 
             <Keyword key={index} name={node.attribs.name} 
                      keywords={props.keywords}/>;

        }

    }

The code simply will transform any node that has a type of “tag” that is named “keyword”. It will recognize the marked up JSX that we created and return a proper JSX component.

In the render/return output of the component, you can then just input the string of marked up text with the options set up in the above code:

ReactHtmlParser(props.card.attributes.keyword_description, options)

This way, you can prewrite/markup some JSX code from your API and then use it in your React components with minimal fuss.

Sources

wrakky/react-html-parser

Now how do we actually use it for a new application? In this article, I will cover a quick start of Docker use in a rails app.

Dockerfile

Any Dockerized app begins with the Docker file. Here is a simple template Dockerfile used to bootstrap a Dockerized Rails app.

FROM ruby:2.5
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client
RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]

You can change the ruby version to your preferred version, and you can also rename the directories as needed. Please just remember to change all the directories to be uniform, in this dockerfile as well as any future files.

Creating the starter files

As you can see in the dockerfile, we will be using a Gemfile of some sort as well as an entrypoint.sh file. We can now create those.

#Gemfile
source 'https://rubygems.org'
gem 'rails', '~>5'

This gemfile will quickly be replaced with a Rails gemfile, so don’t worry about it other than this line. Also, please create a Gemfile.lock, which is referenced in the dockerfile as well.

touch Gemfile.lock

Lastly, create an entrypoint file in the directory which will be run every launch.

#entrypoint.sh
#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /myapp/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

The last file we will need to create is the docker-compose.yml file.

#docker-compose.yml
version: '3'
services:
  db:
    image: postgres
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: password
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db

This file will create two separate containers for your database and web app and link them together using docker networking.

Project Build

With all the files created, you can now use docker commands in order to generate a Rails app skeleton:

docker-compose run web rails new . --force --no-deps --database=postgresql

This will build the image for web and then run the rails new command, which creates a new rails app.

This will update your Gemfile through rails new, so now you can rebuild the image using docker-compose.

docker-compose build

Setting up the Database

Last thing to do will be to point the Rails configuration to the db container that you created for Docker. You can do this by changing the host property in the Docker config/database.yml file.

config/database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password: password
  pool: 5

development:
  <<: *default
  database: myapp_development


test:
  <<: *default
  database: myapp_test

After this, you will be able to launch the app using docker-compose properly:

docker-compose up

Lastly, you can create the database, using this command in another terminal:

docker-compose run web rake db:create

This will now allow you to access the Rails app via your localhost:3000, as detailed in the docker-compose.yml configuration. You can also change the port you want to access by modifying that file.

Recap Basic Commands

docker-compose up

This will launch the docker-compose app in the directory you are in. In this case, it will launch both the database and web applications that you have set up in this guide. You can also add the -d flag to run the application detached, but that will require the next command to exit.

docker-compose down

This is essentially the opposite of the docker-compose up command and will go through the process to quit your app.

docker-compose build

This will rebuild the docker-compose image. This will be needed if you make changes to the gemfile or the compose file to try different configurations. You can also full rebuild using the following command:

docker-compose run web bundle install

Docker-compose run web in general will allow you to run many of the commands you were used to in Rails development. For example, to use ‘rails db:migrate’, you would use this:

docker-compose run web rake db:migrate

Sources

This article is primarily sourced through the following instructions:

Quickstart: Compose and Rails

I have provided more context and color to the explanations, as well as a recap of the basic commands you will use to interact with the dockerized app.

Why was this happening? I had built out my database with help from a JSON file that had utilized arrays, so it should be showing the same thing from Rails, right?

Wrong! I had overlooked a critical part of this process. When I set up my database, I set my keywords table to be a string. Because of that, my Rails API was just serving a string!

create_table “keywords”, force: :cascade do |t|

   t.string “name”

   t.string “description”

   t.string “names”

   t.datetime “created_at”, precision: 6, null: false

   t.datetime “updated_at”, precision: 6, null: false

end

Above is my schema.rb, which shows that “names” was a string.

How to fix this

Now, I had to figure out how to fix this issue. First, I thought it would be a expensive mistake, and I would have to redo my migrations and database to have my schema show an array of some sort. This would require me to drop my database, reload it, and start over. It could also potentially cause issues that could reset my progress from other parts of my code.

class CreateSomething < ActiveRecord::Migration
  def change
    create_table :something do |t|
      t.string :some_array, array: true, default: []
      t.timestamps
    end
  end
end

Above would be a migration file that I imagined I would need in order to reclassify my array.

However, I figured out a quick way to do this inside the Rails toolset!

In my Rails model, I simply added one line of code that solved this dilemma.

class Keyword < ApplicationRecord

    serialize :names, Array

end

With that line, I was then able to serve the names property as an array, fixing that bug from my backend!

Sources

• https://api.rubyonrails.org/classes/ActiveRecord/AttributeMethods/Serialization/ClassMethods.html