Elixir / Echo / Socket.io / Echo Server - Environment configuration

I have googled the heck out of this and have come up mostly empty. Here's the ultra-compact explanation of what I'm trying to do:

I have 3 separate local environment instances (one for each developer), 1 stage environment, and 1 production environment. Each instance has its own unique domain name. Each one needs to run Echo through Socket.io / Laravel Echo Server on its own domain. This means that I need a unique 'host' value for each environment in /resources/js/bootstrap.js. I can not make this work with Elixir.

Here is a list of "solutions" that I have dug into:

(1) Use the 'dotenv' node package to pull in .env values. This package requires use of 'fs' which seemingly (depending on in whom you believe) can not be used in this manner with Webpack. Even if I could get it to work, this would mean adding the following to my deployment process:

rm node_modules -rf
npm install
gulp --production

That's fine, I guess, but it dramatically increases downtime in between php artisan down and php artisan up.

But again, I couldn't get dotenv to even read my .env file, and my attempts to use 'fs' to inspect the path were met with Webpack errors (see google for various solutions regarding node: { fs: 'empty' } and target: 'node' that resulted in zero progress, just different errors).

(2) Attempt to get everything to work through 'localhost' requests, so that I don't need to worry about the actual domain name.

This works until the first poll from JavaScript, which, of course, comes from the browser and winds up hitting your own computer instead of the server.

This is obvious and requires no explanation or help. I just wanted to include in case the thought crosses anyone's mind as a potential solution.

So I guess what I'm asking is... How are people managing this type of environmental set up for Echo / Socket.io / Echo Server?

trip.somers

9 years ago

Level 3

The only true solution that comes to mind is moving the window.Echo = new Echo ({config}); line out of the bootstrap.js file and into global scope inside one of my blade layouts, to be called on every page.

That seems like the most straight-forward solution, but it makes me wonder what was intended when it was included in bootstrap.js.

Eager to hear thoughts/solutions from others.

UPDATE: This attempt results in an "Echo is not a constructor" javascript error because of the way Echo is imported in the bootstrap.js file.

trip.somers

9 years ago

Best Answer

Level 3

For now, my work-around builds off of my last idea.

This:

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: 'http://socket.domain.local:6001'
});

has been changed to this:

window.EchoBuilder = Echo;

and I am using this in my main blade template:

Echo = new EchoBuilder({
    broadcaster: 'socket.io',
    host: 'http://{{ env('SOCKET_DOMAIN') }}:6001'
});

I have not discovered any drawbacks yet, but I'm all ears if anyone sees something.

digistorm-dev

8 years ago

Level 15

One extra addition to this; the bootstrap.js template was updated to use MIX_ environment variables for this configuration:

https://github.com/laravel/laravel/commit/224f9949c74fcea2eeceae0a1f65d9c2e7498a27#diff-5e6303ebf864a56ecc8a2d7c1dd992e5

e.g.

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

1 like

Please or to participate in this conversation.