Complete Tutorial: Building a Chat App with Ruby on Rails and GitHub Copilot on Ubuntu 24.04

Complete Tutorial: Building a Chat App with Ruby on Rails and GitHub Copilot on Ubuntu 24.04

This tutorial will guide college students in creating a chat web app using Ruby on Rails and GitHub Copilot. The app will allow user registration, chat channel creation (with topics), a list of available channels, and live interaction within channels.

1. Setting Up the Environment on Ubuntu 24.04

Step 1.1: Update the System

Run the following commands to update your server:

sudo apt update && sudo apt upgrade -y

Step 1.2: Install Essential Packages

Install essential dependencies:

sudo apt install -y curl git build-essential libssl-dev libreadline-dev zlib1g-dev

Step 1.3: Install Ruby Using rbenv

Install rbenv to manage Ruby versions:

git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL
git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build

Install Ruby (replace 3.2.2 with the latest Ruby version):

rbenv install 3.2.2
rbenv global 3.2.2

Step 1.4: Install Rails

Install the Rails gem:

gem install rails -v 7.1.0

Step 1.5: Install PostgreSQL

Install and set up PostgreSQL:

sudo apt install -y postgresql postgresql-contrib libpq-dev
sudo systemctl enable postgresql
sudo systemctl start postgresql
sudo -u postgres createuser -s $USER

Step 1.6: Install Node.js and Yarn

Install Node.js (needed for Rails assets):

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs
npm install --global yarn

Step 1.7: Install Redis

Redis is required for real-time functionality using ActionCable:

sudo apt install -y redis-server
sudo systemctl enable redis-server
sudo systemctl start redis-server

2. Creating the Rails Application

Step 2.1: Generate the Rails App

Create a new Rails application with PostgreSQL as the database:

rails new chat_app -d postgresql
cd chat_app

Step 2.2: Set Up the Database

Create the database:

rails db:create

3. Building the Chat App

Step 3.1: Add User Authentication with Devise

Add the Devise gem to your Gemfile:

gem 'devise'

Install Devise:

bundle install
rails generate devise:install

Generate a User model with Devise:

rails generate devise User
rails db:migrate

Step 3.2: Add Chat Channel Model

Generate the model for chat channels:

rails generate scaffold ChatChannel name:string topic:string
rails db:migrate

Step 3.3: Add Messages to Chat Channels

Generate a Message model:

rails generate model Message content:text user:references chat_channel:references
rails db:migrate

Step 3.4: Set Up Associations

Update the models for relationships:

  • app/models/chat_channel.rb:
class ChatChannel < ApplicationRecord
  has_many :messages, dependent: :destroy
  validates :name, :topic, presence: true
end
  • app/models/message.rb:
class Message < ApplicationRecord
  belongs_to :user
  belongs_to :chat_channel
  validates :content, presence: true
end
  • app/models/user.rb:
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  has_many :messages
end

Step 3.5: Create Real-Time Messaging with ActionCable

Generate a channel:

rails generate channel chat

Set up the channel:

  • app/channels/chat_channel.rb:
class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_channel_#{params[:chat_channel_id]}"
  end

  def unsubscribed
    # Cleanup when channel is unsubscribed
  end

  def speak(data)
    Message.create!(
      content: data['message'],
      user_id: current_user.id,
      chat_channel_id: params[:chat_channel_id]
    )
  end
end

Add broadcasting to the Message model:

  • app/models/message.rb:
after_create_commit { broadcast_append_to "chat_channel_#{chat_channel.id}" }

4. Frontend Setup

Step 4.1: Install Bootstrap for Styling

Add Bootstrap:

yarn add bootstrap @popperjs/core

Update app/assets/stylesheets/application.css:

@import "bootstrap";

Step 4.2: Build Views

Customize views to allow:

  • User registration and login (handled by Devise).
  • Listing available chat channels.
  • Displaying messages in real-time.

For simplicity, students can use GitHub Copilot to generate these views interactively.

5. Deployment and Testing

Step 5.1: Precompile Assets

Run:

rails assets:precompile

Step 5.2: Start the Server

Start the Rails server:

rails server

Step 5.3: Test the Application

Visit http://localhost:3000 to test the application.

6. References

Ruby on Rails

Devise

PostgreSQL

Redis

GitHub Copilot

Bootstrap

This tutorial introduces students to modern web app development using Rails and GitHub Copilot for code assistance, making the learning process faster and more interactive.

Scroll to Top