Oliver/runway-video
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
runway-video/INSTALLATION.md
Manish Tanwar 88c0469fe2 Change the video Length Silder + Video Working
2025-09-04 05:53:16 +05:30

8.2 KiB
Raw Permalink Blame History

Installation Guide - Runway Gen4 Web App

This guide will help you deploy the Runway Gen4 Web App from MAMP to a production Apache server.

Prerequisites

  • Apache 2.4+ with PHP 7.4+ support
  • SSL certificate (recommended for API security)
  • SSH access to your server
  • Domain name pointed to your server

Step 1: Prepare Your Files

Files to Upload

Upload these directories and files to your web server:

/your-domain.com/
├── backend/           # Upload entire folder
├── public/           # Upload entire folder  
├── .env             # Create this on server
├── .htaccess        # Upload to root
└── README.md        # Optional

Files to NOT Upload (Keep Local Only)

  • node_modules/ (if present)
  • src/ (Tailwind source files)
  • package.json
  • package-lock.json
  • tailwind.config.js
  • .env.example

Step 2: Environment Configuration

Create .env File

Create a .env file in your root directory:

# Runway API Configuration
RUNWAY_API_KEY=your_runway_api_key_here

# Optional: Additional API keys
GEMINI_API_KEY=your_gemini_api_key_here

Set Proper Permissions

chmod 644 .env
chmod 755 backend/
chmod 644 backend/*.php
chmod 755 public/
chmod -R 644 public/*

Step 3: Apache Configuration

.htaccess (Root Directory)

# Security Headers
Header always set X-Frame-Options "SAMEORIGIN"
Header always set X-Content-Type-Options "nosniff"
Header always set X-XSS-Protection "1; mode=block"
Header always set Referrer-Policy "strict-origin-when-cross-origin"

# Hide sensitive files and directories
<Files ".env">
    Order allow,deny
    Deny from all
</Files>

<Files "*.log">
    Order allow,deny
    Deny from all
</Files>

<FilesMatch "^(config|\.env|\.htaccess|composer\.(json|lock)|package\.json)$">
    Order allow,deny
    Deny from all
</FilesMatch>

# Block access to backend directory from direct web access
RedirectMatch 404 ^/backend/

# Enable HTTPS redirect (recommended)
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Main application routing
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^$ /public/index.html [L]

# Allow direct access to public assets
RewriteRule ^(css|js|images)/(.*)$ /public/$1/$2 [L]

# API routing
RewriteRule ^api/generate$ /backend/api.php [L]
RewriteRule ^api/status$ /backend/check_status.php [L]

# Deny access to hidden files
RewriteRule ^\..*$ - [F,L]

Alternative: VirtualHost Configuration

If you have access to Apache virtual host configuration:

<VirtualHost *:443>
    ServerName yourdomain.com
    DocumentRoot /var/www/yourdomain.com
    
    # SSL Configuration
    SSLEngine on
    SSLCertificateFile /path/to/certificate.crt
    SSLCertificateKeyFile /path/to/private.key
    
    # Security Headers
    Header always set X-Frame-Options "SAMEORIGIN"
    Header always set X-Content-Type-Options "nosniff"
    Header always set X-XSS-Protection "1; mode=block"
    
    # Directory specific settings
    <Directory "/var/www/yourdomain.com/backend">
        Order deny,allow
        Deny from all
    </Directory>
    
    <Directory "/var/www/yourdomain.com/public">
        Options -Indexes
        AllowOverride None
        Order allow,deny
        Allow from all
    </Directory>
    
    # Error and Access Logs
    ErrorLog ${APACHE_LOG_DIR}/yourdomain.com_error.log
    CustomLog ${APACHE_LOG_DIR}/yourdomain.com_access.log combined
</VirtualHost>

Step 4: PHP Configuration

Recommended php.ini Settings

# File Upload Settings
upload_max_filesize = 10M
post_max_size = 12M
max_input_time = 300
max_execution_time = 300

# Error Reporting (Production)
display_errors = Off
log_errors = On
error_log = /path/to/your/error.log

# Security
expose_php = Off
allow_url_fopen = On
allow_url_include = Off

Step 5: Update File Paths

Update API Endpoints (if needed)

If your API endpoints need to be different, update in /public/js/script.js:

// Change from:
const RUNWAY_API_ENDPOINT = '/backend/api.php';

// To (if using .htaccess routing):
const RUNWAY_API_ENDPOINT = '/api/generate';

Update Status Check Endpoint

// In pollJobStatus function, change:
const response = await fetch(`/backend/check_status.php?job_id=${jobId}`);

// To:
const response = await fetch(`/api/status?job_id=${jobId}`);

Step 6: Testing

Test Checklist

  • Main page loads correctly
  • Dark/light mode toggle works
  • Image upload functions (drag & drop + click)
  • Form validation works
  • API endpoints respond correctly
  • Video generation process works
  • Status polling functions
  • Download functionality works
  • Responsive design on mobile devices

Debug Common Issues

API Key Issues:

# Check if .env is loaded
tail -f /var/log/apache2/error.log

Permission Issues:

# Fix file permissions
find /var/www/yourdomain.com -type f -exec chmod 644 {} \;
find /var/www/yourdomain.com -type d -exec chmod 755 {} \;

CORS Issues: Add to your backend config.php if needed:

header("Access-Control-Allow-Origin: https://yourdomain.com");

Step 7: Security Best Practices

1. Environment Variables

  • Never commit .env files to version control
  • Use strong, unique API keys
  • Rotate API keys regularly

2. File Protection

  • Ensure .env and config files are not web-accessible
  • Keep logs outside the web root when possible
  • Use HTTPS for all API communications

3. Monitoring

  • Monitor error logs regularly
  • Set up log rotation for error logs
  • Monitor API usage and rate limits

4. Backup Strategy

  • Regular database backups (if applicable)
  • Backup configuration files
  • Version control for code changes

Step 8: Performance Optimization

1. Enable Compression

Add to .htaccess:

# Enable Gzip compression
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

2. Browser Caching

# Leverage Browser Caching
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
</IfModule>

Troubleshooting

Common Issues

"Runway API key not configured" Error:

  • Check .env file exists and has correct permissions
  • Verify API key is valid and active
  • Check error logs for detailed information

"Failed to generate video" Error:

  • Verify Runway API key has sufficient credits
  • Check network connectivity to Runway API
  • Verify image format and size requirements

CORS Errors:

  • Update backend/config.php with correct domain
  • Ensure HTTPS is properly configured
  • Check browser console for specific CORS errors

File Upload Issues:

  • Check PHP upload limits in php.ini
  • Verify file permissions on upload directory
  • Ensure proper form encoding (multipart/form-data)

Log Locations

  • Apache Error Log: /var/log/apache2/error.log
  • Apache Access Log: /var/log/apache2/access.log
  • PHP Error Log: As configured in php.ini

Getting Help

  • Check Apache error logs first
  • Verify all file paths and permissions
  • Test API endpoints directly using curl
  • Enable PHP error display temporarily for debugging (remember to disable in production)

Production Checklist

  • SSL certificate installed and configured
  • .env file created with production API keys
  • .htaccess file properly configured
  • File permissions set correctly
  • PHP error reporting configured for production
  • API endpoints tested and working
  • Security headers implemented
  • Backup strategy in place
  • Monitoring and logging configured
  • Performance optimizations applied