Deploying Chitchatter

Chitchatter is a decentralized peer-to-peer chat application designed for private, secure conversations without relying on central servers. Built with end-to-end encryption and using WebRTC for direct peer communication, Chitchatter provides a modern alternative to traditional chat platforms. With support for multiple chat rooms, file sharing, screen sharing capabilities, and built-in privacy controls, Chitchatter is ideal for teams, communities, and individuals who prioritize privacy and security in their communications.

This guide will walk you through deploying Chitchatter on Klutch.sh, a modern cloud platform that simplifies containerized application deployment. By the end of this guide, you’ll have a fully functional peer-to-peer chat platform ready for secure team communication.

Why Deploy Chitchatter on Klutch.sh?

Klutch.sh provides an excellent platform for hosting Chitchatter:

• Docker-native deployment - Klutch.sh automatically detects and deploys Dockerized applications
• Low latency communication - Optimized infrastructure for real-time peer-to-peer connections
• Custom domains - Use your own domain for branded chat services
• Environment configuration - Manage secrets and settings through the dashboard
• Built-in HTTPS - Secure WebRTC signaling with automatic SSL certificates
• Scalable infrastructure - Handle multiple concurrent connections effortlessly
• Privacy-focused - Keep your chat infrastructure under your control

Prerequisites

Before deploying Chitchatter on Klutch.sh, you’ll need:

• A Klutch.sh account (sign up for free)
• Access to the Klutch.sh dashboard
• A GitHub repository to store your Chitchatter deployment configuration
• A custom domain (recommended for signaling server)
• Basic understanding of Docker and containerization
• Familiarity with WebRTC and peer-to-peer networking concepts

Deployment Steps

1. Create a Dockerfile

   Create a Dockerfile in the root of your repository to containerize Chitchatter:

   FROM node:20-alpine
   
   # Install system dependencies
   RUN apk add --no-cache \
       build-base \
       python3 \
       git \
       curl
   
   # Set working directory
   WORKDIR /app
   
   # Clone Chitchatter repository
   RUN git clone https://github.com/jeremyckahn/chitchatter.git . && \
       git checkout main
   
   # Install dependencies
   RUN npm install
   
   # Build the application
   RUN npm run build
   
   # Expose port
   EXPOSE 3000
   
   # Health check
   HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
       CMD curl -f http://localhost:3000/ || exit 1
   
   # Start the application
   CMD ["npm", "start"]

2. Create Environment Configuration File

   Create a .env.example file to document required environment variables:

   # Chitchatter Environment Configuration
   
   # Application Settings
   NODE_ENV=production
   PORT=3000
   HOST=0.0.0.0
   
   # Application Base URL
   BASE_URL=https://example-app.klutch.sh
   REACT_APP_API_BASE_URL=https://example-app.klutch.sh
   
   # WebRTC Signaling Server
   SIGNALING_SERVER_URL=wss://example-app.klutch.sh
   STUN_SERVERS=stun:stun.l.google.com:19302,stun:stun1.l.google.com:19302,stun:stun2.l.google.com:19302
   TURN_SERVER_URL=
   TURN_SERVER_USERNAME=
   TURN_SERVER_PASSWORD=
   
   # Security Settings
   SECURE_COOKIES=true
   SAME_SITE_COOKIES=strict
   CORS_ORIGIN=https://example-app.klutch.sh
   
   # Chat Configuration
   MAX_MESSAGE_LENGTH=5000
   MAX_USERNAME_LENGTH=50
   MAX_ROOM_NAME_LENGTH=100
   
   # User Settings
   ALLOW_ANONYMOUS_USERS=true
   REQUIRE_ROOM_PASSWORD=false
   DEFAULT_ROOM_PASSWORD_LENGTH=8
   
   # File Sharing
   ENABLE_FILE_SHARING=true
   MAX_FILE_SIZE=52428800
   MAX_FILES_PER_SESSION=10
   ALLOWED_FILE_TYPES=image/*,video/*,audio/*,.pdf,.doc,.docx,.txt,.zip
   
   # Rate Limiting
   RATE_LIMIT_ENABLED=true
   RATE_LIMIT_WINDOW=900000
   RATE_LIMIT_MAX_REQUESTS=100
   
   # Logging
   LOG_LEVEL=info
   LOG_FORMAT=json
   
   # Feature Flags
   ENABLE_SCREEN_SHARING=true
   ENABLE_FILE_SHARING=true
   ENABLE_ROOM_PERSISTENCE=false
   ENABLE_USAGE_ANALYTICS=true
   
   # Privacy Settings
   SEND_ANALYTICS=false
   TRACK_USER_ACTIVITY=false
   COLLECT_USAGE_STATISTICS=false
   
   # Performance
   SESSION_TIMEOUT=3600
   IDLE_TIMEOUT=1800
   MAX_CONNECTIONS_PER_USER=5

3. Create Application Configuration File

   Create a config.js file for application-specific settings:

   module.exports = {
     app: {
       name: 'Chitchatter',
       version: '1.0.0',
       environment: process.env.NODE_ENV || 'production',
       port: process.env.PORT || 3000,
       host: process.env.HOST || '0.0.0.0',
       baseUrl: process.env.BASE_URL || 'http://localhost:3000'
     },
     webrtc: {
       signalingServerUrl: process.env.SIGNALING_SERVER_URL,
       stunServers: (process.env.STUN_SERVERS || '').split(',').filter(Boolean),
       turnServer: {
         url: process.env.TURN_SERVER_URL,
         username: process.env.TURN_SERVER_USERNAME,
         password: process.env.TURN_SERVER_PASSWORD
       },
       iceGatheringTimeout: 5000,
       iceConnectionTimeout: 10000
     },
     security: {
       secureCookies: process.env.SECURE_COOKIES === 'true',
       sameSiteCookies: process.env.SAME_SITE_COOKIES || 'strict',
       corsOrigin: process.env.CORS_ORIGIN || 'http://localhost:3000'
     },
     chat: {
       maxMessageLength: parseInt(process.env.MAX_MESSAGE_LENGTH) || 5000,
       maxUsernameLength: parseInt(process.env.MAX_USERNAME_LENGTH) || 50,
       maxRoomNameLength: parseInt(process.env.MAX_ROOM_NAME_LENGTH) || 100,
       allowAnonymousUsers: process.env.ALLOW_ANONYMOUS_USERS === 'true',
       requireRoomPassword: process.env.REQUIRE_ROOM_PASSWORD === 'true'
     },
     fileSharing: {
       enabled: process.env.ENABLE_FILE_SHARING === 'true',
       maxFileSize: parseInt(process.env.MAX_FILE_SIZE) || 52428800,
       maxFilesPerSession: parseInt(process.env.MAX_FILES_PER_SESSION) || 10,
       allowedFileTypes: (process.env.ALLOWED_FILE_TYPES || '').split(',')
     },
     features: {
       screenSharing: process.env.ENABLE_SCREEN_SHARING === 'true',
       fileSharing: process.env.ENABLE_FILE_SHARING === 'true',
       roomPersistence: process.env.ENABLE_ROOM_PERSISTENCE === 'true',
       usageAnalytics: process.env.ENABLE_USAGE_ANALYTICS === 'true'
     },
     privacy: {
       sendAnalytics: process.env.SEND_ANALYTICS === 'true',
       trackUserActivity: process.env.TRACK_USER_ACTIVITY === 'true',
       collectUsageStatistics: process.env.COLLECT_USAGE_STATISTICS === 'true'
     },
     rateLimit: {
       enabled: process.env.RATE_LIMIT_ENABLED === 'true',
       window: parseInt(process.env.RATE_LIMIT_WINDOW) || 900000,
       maxRequests: parseInt(process.env.RATE_LIMIT_MAX_REQUESTS) || 100
     },
     session: {
       timeout: parseInt(process.env.SESSION_TIMEOUT) || 3600,
       idleTimeout: parseInt(process.env.IDLE_TIMEOUT) || 1800,
       maxConnectionsPerUser: parseInt(process.env.MAX_CONNECTIONS_PER_USER) || 5
     },
     logging: {
       level: process.env.LOG_LEVEL || 'info',
       format: process.env.LOG_FORMAT || 'json'
     }
   };

4. Create Docker Compose for Local Development

   Create a docker-compose.yml file for local development and testing (not used for Klutch.sh deployment):

   version: '3.8'
   
   services:
     chitchatter:
       build: .
       container_name: chitchatter-dev
       ports:
         - "3000:3000"
       environment:
         - NODE_ENV=development
         - BASE_URL=http://localhost:3000
         - REACT_APP_API_BASE_URL=http://localhost:3000
         - SIGNALING_SERVER_URL=ws://localhost:3000
         - ALLOW_ANONYMOUS_USERS=true
         - ENABLE_FILE_SHARING=true
         - ENABLE_SCREEN_SHARING=true
         - SEND_ANALYTICS=false
       volumes:
         - ./src:/app/src
         - ./public:/app/public
       networks:
         - chitchatter-network
   
   networks:
     chitchatter-network:
       driver: bridge

   To run locally:

   docker-compose up

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

5. Create .gitignore File

   Create a .gitignore file to exclude sensitive data from version control:

   # Environment files
   .env
   .env.local
   .env.*.local
   
   # Node.js
   node_modules/
   npm-debug.log
   yarn-error.log
   package-lock.json
   yarn.lock
   
   # Build artifacts
   dist/
   build/
   .next/
   out/
   
   # React
   .react/
   .cache/
   
   # Logs
   logs/
   *.log
   
   # IDE
   .vscode/
   .idea/
   *.swp
   *.swo
   *~
   .DS_Store
   
   # Cache
   .cache/
   .turbo/
   
   # Operating System
   .DS_Store
   Thumbs.db
   
   # Temporary files
   temp/
   tmp/
   .tmp/

6. Push Configuration to GitHub

   Push your repository to GitHub with all configuration files:

   git add Dockerfile .env.example config.js \
     docker-compose.yml .gitignore
   git commit -m "Initial Chitchatter deployment configuration for Klutch.sh"
   git push origin main

7. Deploy on Klutch.sh

   1. Navigate to klutch.sh/app and log in to your dashboard
   2. Click Create New App
   3. Connect your GitHub repository containing the Chitchatter deployment files (the Dockerfile will be automatically detected)
   4. Configure your application settings:
      • Set your preferred app name
      • Review the detected Dockerfile configuration
      • Select a region for deployment
   5. Click Deploy to start the deployment process
   6. Monitor the deployment progress in the dashboard
   7. Wait for the deployment to complete and your chat application to become active

8. Configure Environment Variables

   1. In your app dashboard, navigate to Environment Variables section
   2. Add all required variables from your .env.example file:
      • BASE_URL: Set to https://example-app.klutch.sh (or your custom domain)
      • REACT_APP_API_BASE_URL: Set to https://example-app.klutch.sh
      • SIGNALING_SERVER_URL: Set to wss://example-app.klutch.sh
      • ALLOW_ANONYMOUS_USERS: Set to true (or false to require registration)
      • ENABLE_FILE_SHARING: Set to true to enable file sharing
      • ENABLE_SCREEN_SHARING: Set to true to enable screen sharing
      • SEND_ANALYTICS: Set to false for privacy
      • TRACK_USER_ACTIVITY: Set to false for privacy
      • RATE_LIMIT_ENABLED: Set to true for security
      • Optional TURN server credentials if behind restrictive NAT
   3. Click Save to apply the environment variables
   4. Your application will automatically restart with the new configuration

9. Configure Traffic Routes

   1. In your app dashboard, navigate to Traffic settings
   2. Select HTTP as the traffic type
   3. Set the internal port to 3000 (Chitchatter Node.js server default)
   4. Configure any custom domain settings if you have a domain
   5. Ensure WebSocket support is enabled (typically automatic with HTTP)
   6. Save your traffic configuration

10. Test Your Deployment

    Once deployment is complete:

    1. Navigate to https://example-app.klutch.sh in your browser
    2. You’ll see the Chitchatter interface
    3. Click Create New Room to start a chat room
    4. Share the generated room link with others
    5. Test messaging, file sharing, and screen sharing features
    6. Verify that peer-to-peer connections are working properly

Using Chitchatter

Creating and Joining Chat Rooms

To create a new chat room:

1. Navigate to your Chitchatter instance
2. Enter a username (or leave blank for anonymous)
3. Enter a room name
4. Click Create Room
5. Share the generated room link with participants

To join an existing room:

1. Use the link provided by the room creator
2. Enter a username
3. Click Join Room
4. Start communicating

Chat Room Features

Basic Messaging:

• Send text messages to all participants
• View message history during the session
• See when users are typing
• Get notifications for new messages

File Sharing:

• Share files directly with room participants
• Drag and drop files into the chat
• Download files shared by others
• No file size limits (respecting browser memory)

Screen Sharing:

• Share your screen with all participants
• See others’ shared screens
• Keyboard and mouse control options
• Stop sharing at any time

User Management:

• View active participants in the room
• See user connection status
• Real-time user list updates
• Anonymous or named participation

Privacy and Security

Chitchatter provides several privacy and security features:

• End-to-End Encryption: All communications are encrypted between peers
• No Central Storage: Messages are not stored on servers
• Peer-to-Peer Communication: Direct connection between participants
• Session-Based: Rooms disappear when all participants leave
• Optional Passwords: Protect rooms with password access
• Privacy Controls: Disable analytics and tracking

Deployment Best Practices

Security Measures

• Keep Chitchatter updated to the latest version
• Use HTTPS/WSS for all connections (automatic with Klutch.sh)
• Enable optional TURN servers for NAT traversal if needed
• Implement rate limiting to prevent abuse
• Disable user tracking and analytics for privacy
• Monitor WebRTC connections for unusual patterns
• Consider IP whitelisting for enterprise use

Monitoring and Maintenance

• Monitor CPU and memory usage during peak times
• Review logs for connection errors
• Test peer-to-peer connectivity regularly
• Monitor WebSocket connections for stability
• Track deployment performance
• Set up alerts for connection failures
• Schedule updates during low-traffic periods

Performance Optimization

• Monitor concurrent connection limits
• Optimize for low-latency signaling
• Test with various network conditions
• Configure appropriate STUN/TURN servers
• Monitor ICE candidate gathering
• Test file transfer speeds
• Optimize screen sharing quality

Scaling Considerations

As your chat service grows:

• Monitor server resource usage
• Adjust session timeout values if needed
• Consider additional STUN/TURN servers
• Implement load balancing if needed
• Monitor signaling server performance
• Plan for increasing concurrent users

Accessing Chitchatter

Once deployment is complete:

1. Users access Chitchatter at your configured domain or example-app.klutch.sh
2. Users can create or join chat rooms instantly
3. Users can share files and screens with participants
4. All communication is encrypted and peer-to-peer
5. Rooms are ephemeral and disappear when empty
6. No registration or authentication required (unless configured)

Troubleshooting Deployment Issues

Application Won’t Start

Check the following:

• Verify all required environment variables are set
• Check Node.js version compatibility
• Review application logs in the dashboard
• Ensure Dockerfile is building correctly
• Verify npm build process completes

WebRTC Connection Issues

Steps to resolve:

• Verify STUN servers are accessible
• Check firewall rules allow WebRTC
• Test with different networks
• Review browser console for connection errors
• Consider enabling TURN servers
• Check SIGNALING_SERVER_URL is correct

Peer-to-Peer Not Working

Possible solutions:

• Verify both users can access the signaling server
• Check firewall allows UDP traffic
• Ensure STUN/TURN servers are configured
• Test with users on same network first
• Review WebRTC connection logs
• Try different network interfaces

Performance Issues

Optimization steps:

• Monitor application resource usage
• Increase server memory allocation if needed
• Enable compression for signaling messages
• Optimize file transfer speeds
• Reduce screen sharing quality if needed
• Monitor database/persistence if enabled

Advanced Configuration

TURN Server Setup

For users behind restrictive firewalls or NAT:

TURN_SERVER_URL=turns:your-turn-server.com:443
TURN_SERVER_USERNAME=username
TURN_SERVER_PASSWORD=password

Custom STUN Servers

Configure additional STUN servers:

STUN_SERVERS=stun:stun1.example.com:3478,stun:stun2.example.com:3478

Room Password Protection

Require passwords for room access:

REQUIRE_ROOM_PASSWORD=true
DEFAULT_ROOM_PASSWORD_LENGTH=12

Custom Domain Setup

To use a custom domain with your Chitchatter instance:

1. In your Klutch.sh dashboard, navigate to Domains
2. Add your custom domain
3. Follow the DNS configuration instructions
4. Update your environment variables:
   • BASE_URL=https://your-domain.com
   • REACT_APP_API_BASE_URL=https://your-domain.com
   • SIGNALING_SERVER_URL=wss://your-domain.com
5. Save and redeploy your application

Feature Configuration

Control which features are available:

ENABLE_SCREEN_SHARING=true
ENABLE_FILE_SHARING=true
ALLOW_ANONYMOUS_USERS=true
ENABLE_USAGE_ANALYTICS=true

Session Management

Configure session behavior:

SESSION_TIMEOUT=3600
IDLE_TIMEOUT=1800
MAX_CONNECTIONS_PER_USER=5

Additional Resources

Learn more about Chitchatter and WebRTC:

• Chitchatter GitHub Repository - Source code and documentation
• Chitchatter Official Website - Live demo and information
• WebRTC API Documentation - Complete WebRTC guide
• TURN Server Setup Guide - Configure TURN for NAT traversal
• Klutch.sh Official Website - Learn more about the deployment platform
• Klutch.sh Documentation - Platform guides and API reference

Conclusion

You now have a fully functional Chitchatter instance running on Klutch.sh! Your decentralized peer-to-peer chat platform is ready for secure team communication.

With the privacy-focused design of Chitchatter and the robust infrastructure of Klutch.sh, you have everything needed to run a secure, decentralized communication platform. Remember to:

• Keep Chitchatter updated to the latest version
• Monitor peer-to-peer connection quality
• Maintain security best practices
• Test connectivity with various network configurations
• Configure TURN servers for users behind firewalls

For additional support or questions about deploying Chitchatter on Klutch.sh, refer to the documentation and community resources linked above.

Tip

Start by testing with a small group of users to ensure peer-to-peer connectivity works across different networks. Test file sharing and screen sharing with various file types and network conditions before rolling out to your entire team.