Rails Chat (frontend)

Link to app

API backend repository

A chat app developed with Ruby on Rails API backend and Angular frontend. It uses Rails' ActionCable to maintain a persistent connection between the chat server and the end users. Angular and Angular Material were used create an interactive and nice looking user interface.

Features

Send and receive messages in real-time

Receive live notifications for new messages

View older messages

Appear 'offline ' from other users

Offline users have a gray dialog icon next to their name

Online users have a purple dialog icon next to their name

Security

Chat instances are protected in the server.

Search users

Running locally

It is required to specify the domain of the backend server to establish a connection.

Create a file called environment.ts inside the src/environments directory with this code:

// environments/environment.ts

const domain = 'localhost:3000';

export const environment = {
  production: false,
  domain,
  url: `http://${domain}`,  
  cableUrl: `ws://${domain}/cable`,
};

Replace the domain value with the domain of the server.

For the production build, create environment.prod.ts in the src/environments directory with this code:

// environments/environment.prod.ts

const domain = 'rails-chat-api.aaaa.bbb';

export const environment = {
  production: true,
  domain,
  url: `https://${domain}`,  
  cableUrl: `ws://${domain}/cable`,
};

Replace the domain value with the domain of the server.

Docker compose

Copy the code below, supply the values for environment variables HOST, REDIS_URL, SECRET_KEY, and POSTGRES_URL

# docker-compose.yml

version: '3.8'
name: rails-chat-prod
services:
  server:
    image: nmacawile/rails-chat-api:1.1
    ports:
      - 3000:3000
    environment:
        - HOST=localhost:3000
        - LANG=en_US.UTF-8
        - RACK_ENV=production
        - RAILS_ENV=production
        - RAILS_LOG_TO_STDOUT=enabled
        - RAILS_SERVE_STATIC_FILES=enabled
        - REDIS_URL=redis://username:password@redis.com:12345
        - SECRET_KEY_BASE=ABCDEFGHIJKL
        - POSTGRES_URL=postgres://username:password@postgresdb.com

To create a container,

docker-compose up -d

docker-compose file for dev build

# docker-compose-dev.yml

version: '3.8'
name: rails-chat
services:
  db:
    image: postgres:15.0-alpine
    ports:
      - 54321:5432
    volumes:
      - db:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password
  redis:
    image: redis:alpine3.18
    ports:
      - 63791:6379
  frontend:
    image: nmacawile/rails-chat:1.1
    ports:
      - 4200:4200
    volumes:
      - frontend:/app
  server:
    image: nmacawile/rails-chat-api:1.1
    ports:
      - 3000:3000
    volumes:
      - server:/app
    environment:
      - FRONTEND_URL=http://localhost:4200
      - HOST=localhost:3000
      - LANG=en_US.UTF-8
      - RACK_ENV=development
      - RAILS_ENV=development
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password
volumes:
  server:
  db:
  frontend: