how to setup websocket with pusher and laravel echo on deployment

1

im getting this error on console , (Uncaught You must pass your app key when you instantiate Pusher.) and this one supportLaravelEcho.js:16 Laravel Echo cannot be found , eventough i already setup the keys of my pusher credentials, flyctl secrets set PUSHER_APP_KEY and the others…

2

Hello @jldev, and welcome to Fly.io!

Can you share more details about your project? What are the packages you’re using that’re affected by the error you’ve shared? Are you using Pusher for broadcasting from Laravel, and Laravel Echo for the frontend client?

Aside from that, since you’re currently getting two errors, let’s tackle each one separately.

1. Uncaught You must pass your app key when you instantiate Pusher.
To debug this, we first check whether the variable name used to set the app key is found in the Fly Machine running your app:

  1. How are you passing the app key to pusher? What is the env variable you’re using to pass app key?
  2. Next, is the env variable you’re using indeed set in the Fly Machine running your Laravel app? To confirm, ssh into your Machine by running:
    fly ssh console
    Then once connected to a machine, you can check if your env variable is in the Fly Machine by checking with:
    printenv

Also! There’s another community post that you might want to check out regarding this, please see this.. The solution provided might help out regarding setting secret env variables

2. supportLaravelEcho.js:16 Laravel Echo cannot be found
This error seems to be a configuration error in declaring Laravel Echo’s scripts. Are you perhaps using Livewire in your Laravel project? There are similar errors reported in different forums stackoverflow, laracast, which is caused by how scripts should be declared when Livewire is configured in a Laravel app.

Consider the following solutions:

  1. Placing your declaration of Laravel echo above Livewire scripts or Alpine as answers have suggested. ( Answered by user khalilmajdalawi)
  2. Placing declaration of Laravel echo initialization within app.js instead of bootstrap.js, as it can be loaded last. ( Answer by user ItsClassified )
3

hello @kathrynannetan thanks for the reply im using laravel 11 with Pusher for broadcasting and livewire3 i built a simple voting app game with 2 panels host and participant, on the development ive used laravel reverb but i dont know how to make that work on production fly io thats why i switched to Pusher. and yes im using laravel echo to listen on the event.

4

Hi again @jldev!

I’ve just replicated the errors you’re receiving on my own Laravel Fly app, and found some solutions for them! Can you confirm if these fixes your errors?

  1. Uncaught You must pass your app key when you instantiate Pusher - There are two issues I found causing this:
    a. VITE only exposes env vars that are prefixed with “VITE_”, so please make sure you include “VITE_” prefix for environment variables you’re using in JavaScript files.

    b. The last issue here happens during the time assets are built by Vite. For context, Vite loads additional env variables from reading .env files; however we don’t include .env files when deploying Laravel apps to Fly.io. To fix this, you have to revise your Dockerfile to create an .env.production file from which Vite will read env values from. We create this file using build-secrets:

    RUN --mount=type=secret,id=VITE_APP_NAME \
    --mount=type=secret,id=VITE_PUSHER_APP_SECRET \
    --mount=type=secret,id=VITE_PUSHER_APP_KEY \
    --mount=type=secret,id=VITE_PUSHER_APP_CLUSTER \
    echo "VITE_APP_NAME=$(cat /run/secrets/VITE_APP_NAME)" >> .env.production && \ 
    echo "VITE_PUSHER_APP_KEY=$(cat /run/secrets/VITE_PUSHER_APP_KEY)" >> .env.production && \
    echo "VITE_PUSHER_APP_SECRET=$(cat /run/secrets/VITE_PUSHER_APP_SECRET)" >> .env.production && \
    echo "VITE_PUSHER_APP_CLUSTER=$(cat /run/secrets/VITE_PUSHER_APP_CLUSTER)" >> .env.production

    Please make sure to add that RUN command before Vite builds your assets into static ones in your Dockerfile. Then in every fly deploy, you have to specify those build secrets used in your Dockerfile:

    fly deploy \
    --build-secret VITE_APP_NAME="Laravel" \
    --build-secret VITE_PUSHER_APP_KEY="my-key" \
    --build-secret VITE_PUSHER_APP_SECRET="my-secret" \
    --build-secret VITE_PUSHER_APP_CLUSTER="my-cluster"

    NOW! You can quickly confirm if the env variables are bundled with your static assets by doing a quick console.log( import.meta.env.VITE_APP_NAME ) ( or any env var you want to inspect, but please remove this immediately after debugging )!

  2. Laravel Echo cannot be found
    If you would inspect the echo.js for setting up Laravel Echo for pusher, you can see that it creates a new Echo instance and assigns it to window.Echo:

    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,
    forceTLS: true
});

    Right? This might mean that we’ll need to either declare a new Echo instance yourself, or! use the window.Echo variable instead whenever you use Echo.
    So for my code, I had to update my JavaScript declaration of an Echo channel listener to use window.Echo:

    window.Echo.channel('messages').listen('OrderShipmentStatusUpdated', (e) => {
      console.log(e);
    })

    Lastly, this is of utmost importance, please don’t forget to properly import the app.js file (which indirectly imports the echo.js configuration) in the resource you’re using Echo in:

    <head>
  <title>Test</title>
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

    And, since you’re using Livewire, can you try importing the vite resources before @livewireScripts? There’s a stackoverflow discussion about it, here.

I’d appreciate if you let me know if the solutions work for you, I’ll be adding a docs page about it here if so!

5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.