Laravel Vue Inertia Setup

January 26, 2025 · AI Conversations

User

setup laravel vue interia broadcast reverb aws ec2 ubuntu

Assistant

Setting up Laravel with Vue, Inertia, Broadcast, and Reverb on an AWS EC2 Ubuntu instance involves several steps. Here’s a detailed guide tailored for your environment:

—

### **Step 1: Update Your EC2 Instance**
1. Connect to your EC2 instance using SSH:

ssh -i /path/to/your/private-key.pem ubuntu@ec2-16-170-254-93.eu-north-1.compute.amazonaws.com

*(Replace `/path/to/your/private-key.pem` with your PEM file path.)*

2. Update the system packages:

sudo apt update && sudo apt upgrade -y

—

### **Step 2: Install Required Dependencies**
Install PHP, Composer, Node.js, and other necessary tools:

1. **Install PHP and Extensions (PHP 8.3):**

sudo apt install software-properties-common -y
   sudo add-apt-repository ppa:ondrej/php -y
   sudo apt update
   sudo apt install php8.3 php8.3-cli php8.3-fpm php8.3-mbstring php8.3-xml php8.3-bcmath php8.3-curl unzip git -y

2. **Install Composer:**
“`bash
curl -sS https://getcomposer.org/installer |

User

we are using reverb

Assistant

Understood! Since you're using **Reverb** for broadcasting in your Laravel and Vue.js application on AWS EC2, I'll provide a tailored guide to integrate **Laravel**, **Vue**, **Inertia**, and **Reverb**. Let’s get started!

—

### **Step 1: Update and Configure EC2**
1. **Connect to Your EC2 Instance**:

ssh ubuntu@ec2-16-170-254-93.eu-north-1.compute.amazonaws.com

2. **Update System Packages**:

sudo apt update && sudo apt upgrade -y

—

### **Step 2: Install Prerequisites**
1. **Install PHP 8.3 and Necessary Extensions**:

sudo apt install software-properties-common -y
   sudo add-apt-repository ppa:ondrej/php -y
   sudo apt update
   sudo apt install php8.3 php8.3-cli php8.3-fpm php8.3-mbstring php8.3-xml php8.3-bcmath php8.3-curl unzip git -y

2. **Install Composer**:

curl -sS https://getcomposer.org/installer | php
   sudo mv composer.phar /usr/local/bin/composer

3. **Install Node.js and Yarn**:

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

4. **Install Redis** (Required for Reverb):

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

5. **Install Supervisor** (For managing Reverb):

sudo apt install supervisor -y

—

### **Step 3: Configure Laravel Application**
1. **SSH Into the Project Directory**:

cd /var/www/share

2. **Install Laravel Dependencies**:

composer install
   yarn install

3. **Configure Laravel Environment**:
Open `.env` and update the following:

BROADCAST_DRIVER=pusher
   QUEUE_CONNECTION=redis
   CACHE_DRIVER=redis
   SESSION_DRIVER=redis

   PUSHER_APP_ID=your_app_id
   PUSHER_APP_KEY=your_app_key
   PUSHER_APP_SECRET=your_app_secret
   PUSHER_APP_CLUSTER=your_app_cluster

4. **Run Laravel Commands**:

php artisan config:clear
   php artisan route:clear
   php artisan cache:clear
   php artisan migrate --force

—

### **Step 4: Install and Configure Reverb**
1. **Install Reverb**:

composer require beyondcode/laravel-websockets

2. **Publish Reverb Configuration**:

php artisan vendor:publish --provider="BeyondCodeLaravelWebSocketsWebSocketsServiceProvider"

3. **Modify `config/websockets.php`**:
Update the `port` value to **6001** (as per your setup):

'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),

4. **Start Reverb**:
Run the following command to test if Reverb is working:

php artisan websockets:serve

5. **Set Up Supervisor for Reverb**:
Create a Supervisor configuration file:

sudo nano /etc/supervisor/conf.d/reverb.conf

Add the following configuration:

[program:reverb]
   process_name=%(program_name)s_%(process_num)02d
   command=php /var/www/share/artisan websockets:serve
   autostart=true
   autorestart=true
   user=ubuntu
   numprocs=1
   redirect_stderr=true
   stdout_logfile=/var/www/share/storage/logs/websockets.log

Reload and start Supervisor:

sudo supervisorctl reread
   sudo supervisorctl update
   sudo supervisorctl start reverb

—

### **Step 5: Configure Vue and Inertia**
1. **Install Vue and Inertia Packages**:

yarn add @inertiajs/vue3 laravel-echo pusher-js

2. **Configure Laravel Echo in `resources/js/bootstrap.js`**:

import Echo from 'laravel-echo';
   import Pusher from 'pusher-js';

   window.Pusher = Pusher;

   window.Echo = new Echo({
       broadcaster: 'pusher',
       key: import.meta.env.VITE_PUSHER_APP_KEY,
       cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
       wsHost: window.location.hostname,
       wsPort: 6001,
       wssPort: 6001,
       forceTLS: false,
       disableStats: true,
   });

3. **Test Vue Components**:
Emit events from the backend and listen for them in your Vue components:
– **Backend**:

broadcast(new ExampleEvent($data))->toOthers();

– **Frontend**:

Echo.channel('example-channel')
         .listen('ExampleEvent', (event) => {
             console.log(event);
         });

—

### **Step 6: Configure Nginx/Apache for WebSocket Proxy**
1. **Modify Apache Configuration**:
Open your Apache site configuration file:

sudo nano /etc/apache2/sites-available/000-default.conf

2. **Add a WebSocket Proxy**:
Add the following:

<VirtualHost *:80>
       ServerName ec2-16-170-254-93.eu-north-1.compute.amazonaws.com

       ProxyPass /ws ws://127.0.0.1:6001/
       ProxyPassReverse /ws ws://127.0.0.1:6001/

       DocumentRoot /var/www/share/public
       <Directory /var/www/share/public>
           AllowOverride All
           Require all granted
       </Directory>
   </VirtualHost>

3. **Enable Required Modules and Restart Apache**:

sudo a2enmod proxy proxy_http proxy_wstunnel
   sudo systemctl restart apache2

—

### **Step 7: Finalize and Test**
1. **Clear and Cache Laravel Config**:

php artisan config:clear
   php artisan cache:clear
   php artisan config:cache

2. **Test WebSocket Events**:
– Ensure Laravel, WebSockets, and Redis are running.
– Open the application in the browser and verify real-time events.

3. **Monitor Logs**:
Check logs for errors:

tail -f /var/www/share/storage/logs/laravel.log

—

You’re all set! Let me know if you face any specific issues while implementing this setup. 🚀

Laravel Vue Inertia Setup

Leave a Comment Cancel