Building a Real-Time Chat Application with Rails and React

I'll guide you through creating a real-time chat application using Ruby on Rails for the backend API, React for the frontend, and ActionCable for WebSocket communication. We'll deploy it on Render when finished.

Project Overview

We'll build:

• Rails API backend with ActionCable for real-time communication
• React frontend with a clean, responsive UI
• PostgreSQL database for data persistence
• Deployment configuration for Render

Let's start with the backend:

Step 1: Setting up the Rails API

First, let's create a new Rails API application:

Now, let's set up our models and controllers:

Let's create our database migrations:

Now, let's update the migration files to ensure they have the right structure:

Let's set up our controllers:

Now, let's set up ActionCable for real-time communication:

Let's update our routes:

Let's configure CORS to allow our React frontend to communicate with our API:

Make sure to uncomment the gem 'rack-cors' line in your Gemfile and run bundle install.

Step 2: Setting up the React Frontend

Now, let's create our React frontend:

Let's install the necessary dependencies:

Let's set up Tailwind CSS:

Update the tailwind.config.js file:

I found some issues in the code block.

• Tailwind config file must be extended from shadcn/ui's tailwind config

I will fix them.

Now, let's create our React components:

Let's create the cable.js file for ActionCable:

Now, let's create our components:

Let's update the index.css file to include Tailwind:

Step 3: Preparing for Deployment

Let's prepare our Rails application for deployment on Render:

Let's update our database configuration for production:

Let's update our ActionCable configuration for production:

For the React frontend, let's create a production build script:

I did not output the full code. I will fix this.

Let's update our API URL in the React app to use environment variables:

Update the App.js and cable.js files to use these config values:

Step 4: Deploying to Render

Now, let's deploy our application to Render:

Backend Deployment

1. Create a new Web Service on Render
2. Connect your GitHub repository

3. Configure the service:

   • Name: chat-app-api
   • Environment: Ruby
   • Build Command: bundle install && bundle exec rake db:migrate
   • Start Command: bundle exec puma -C config/puma.rb

   • Add environment variables:

     • DATABASE_URL: This will be automatically set if you create a PostgreSQL database on Render
     • RAILS_ENV: production
     • RAILS_MASTER_KEY: Your master key from config/master.key

Frontend Deployment

1. Create a new Static Site on Render
2. Connect your GitHub repository

3. Configure the service:

   • Name: chat-app-frontend
   • Build Command: npm install && npm run build
   • Publish Directory: build

   • Add environment variables:

     • REACT_APP_API_URL: Your backend URL (e.g., https://chat-app-api.onrender.com)
     • REACT_APP_WS_URL: Your WebSocket URL (e.g., wss://chat-app-api.onrender.com/cable)

Step 5: Testing the Application

Once deployed, you can test your application by:

1. Opening your frontend URL in a browser
2. Creating a new chat room
3. Sending messages in the chat room
4. Opening another browser window to see real-time updates

Conclusion

You've now built a real-time chat application using Ruby on Rails and React, with:

• A Rails API backend with ActionCable for WebSockets
• A React frontend with a clean, responsive UI using Tailwind CSS
• Real-time message updates
• Deployment on Render

This application demonstrates the power of combining Rails' backend capabilities with React's frontend flexibility, all connected through WebSockets for real-time communication.

Please make sure to add the following environment variables to your project:

Great! Now that you've added the environment variables to your Vercel project, let's continue with the deployment process and add some enhancements to your chat application.

Completing the Deployment Process

Backend Deployment on Render

Let's create a render.yaml file to make deployment even easier:

Adding Unit Tests

Let's add some basic unit tests for our Rails models:

Let's also add controller tests:

Enhancing the UI

Let's improve our React components with some UI enhancements:

Adding a Loading Spinner

Improving the Chat Room Component

Enhancing the Message List Component

Improving the Message Form

Adding a Dark Mode Toggle

Let's add a dark mode toggle to our application:

Now, let's update our App.js to include the dark mode toggle:

Updating Tailwind Configuration for Dark Mode

Let's update our tailwind.config.js to support dark mode:

Deployment Steps on Render

Here's a step-by-step guide to deploy your application on Render:

1. Deploy the PostgreSQL Database

1. Log in to your Render account
2. Go to the Dashboard and click "New" > "PostgreSQL"

3. Configure your database:

   • Name: chat-app-db
   • Database: chat_app_production
   • User: chat_app
   • Region: Choose the closest to your users
   • Plan: Free (or choose a paid plan for production)
4. Click "Create Database"
5. Once created, note the "Internal Database URL" - you'll need this for your web service

2. Deploy the Rails API

1. In the Render Dashboard, click "New" > "Web Service"
2. Connect your GitHub repository

3. Configure the service:

   • Name: chat-app-api
   • Environment: Ruby
   • Region: Choose the same region as your database
   • Branch: main (or your preferred branch)
   • Build Command: bundle install && bundle exec rake db:migrate
   • Start Command: bundle exec puma -C config/puma.rb
   • Plan: Free (or choose a paid plan for production)

4. Add environment variables:

   • DATABASE_URL: Use the Internal Database URL from your PostgreSQL service
   • RAILS_ENV: production
   • RAILS_MASTER_KEY: Your master key from config/master.key
   • RACK_ENV: production
5. Click "Create Web Service"

3. Deploy the React Frontend

1. In the Render Dashboard, click "New" > "Static Site"
2. Connect your GitHub repository

3. Configure the service:

   • Name: chat-app-frontend
   • Branch: main (or your preferred branch)
   • Build Command: npm install && npm run build
   • Publish Directory: build

4. Add environment variables:

   • REACT_APP_API_URL: Your backend URL (e.g., https://chat-app-api.onrender.com)
   • REACT_APP_WS_URL: Your WebSocket URL (e.g., wss://chat-app-api.onrender.com/cable)
5. Click "Create Static Site"

Troubleshooting Common Issues

CORS Issues

If you encounter CORS issues, make sure your Rails CORS configuration is correctly set up:

WebSocket Connection Issues

If you're having trouble with WebSocket connections:

1. Make sure your WebSocket URL is correct (wss:// for HTTPS sites)
2. Check that your ActionCable configuration allows connections from your frontend domain:

I did not output the full code. I will fix this.

Database Migration Issues

If you encounter database migration issues during deployment:

1. Try running migrations manually through the Render shell:

   • Go to your web service in the Render dashboard
   • Click "Shell"
   • Run bundle exec rake db:migrate

2. If that doesn't work, try resetting the database:

   • In the Render shell, run bundle exec rake db:schema:load

Conclusion

You now have a fully functional real-time chat application built with Ruby on Rails and React, deployed on Render. The application includes:

• A Rails API backend with ActionCable for WebSockets
• A React frontend with a clean, responsive UI using Tailwind CSS
• Dark mode support
• Real-time message updates
• Unit tests for models and controllers
• Deployment configuration for Render

This application demonstrates how to combine Rails' backend capabilities with React's frontend flexibility, all connected through WebSockets for real-time communication.

Feel free to enhance the application further by adding features like:

1. User authentication
2. Message editing and deletion
3. File uploads
4. Read receipts
5. Typing indicators
6. Message reactions

Let me know if you need help with any of these enhancements or if you encounter any issues during deployment!