Laravel Redis Echo Server Docker Stack

Real-time applications have really taken off over the past years, but creating them has been a challenge for me. I’ve come to a conclusion that the Node frameworks all fall short somewhere. They’re either too young, too bloated, or out of date.

On the flip side, I’ve really grown to love Laravel’s simple approach to MVC — and let’s not forget the community behind it. When I first heard about Echo and the new features of Laravel 5.3, I realized that the community is putting themselves in a great position for what’s next. With Node environment added to the mix, Docker is there with open arms.

It’s been about a year now since that I started using Docker and moved away from the personal virtual environments. Here at Five & Done, Docker has really helped our developers (internal and remote) work closer together. I’ve started creating our own containers that serve our purposes, which mostly pertain to running Laravel:

https://hub.docker.com/u/5ndn/

I’m not going to talk about the specifics of what Docker is. The goal here is simply to guide you through the steps of configuring a docker-compose file in order to run Laravel and Echo Server.

The End Result

In this article, I’ll take you through some quick steps to create a Laravel project that uses Echo to display realtime data. The goal is to give more of an overview of this type of stack. The end result is located here:

fiveanddone/laravel-docker-stack

Create a New Project

First, we clone the Laravel project into our current directory. At the time of writing this, 5.3 is being created:

$  composer create-project laravel/laravel .

Docker Containers

Create our docker-compose.json file. Below is gist of ours. This lives in the root directory of your project:

The Nginx contanier links to a vhost.conf file where you can make any changes you might need. I discuss this further below.

Update your .env to include your new containers:

I’ve added MEMCACHED_HOST and added the Docker Variable ( COMPOSE_PROJECT_NAME ) for the project name. This prevents it from using the default folder the project lives in when Docker containers spin up for the first time. We’ve also added the correct container hosts.

Web Container Configuration

What I like to do here at Five & Done is create a .docker folder where I house things like logs, configurations, and even the Mysql Data.

Create a vhost file configuration in your root document folder located in the folder structure below

.docker/nginx/vhost.conf

The contents of that document should look like this:

This is everything Nginx will need to connect to our PHP container.

Echo Server

Install the NPM package globally with the following command. We’ll be running the final server via the Node container, but for now this will help us initialize everything:

$  npm install -g laravel-echo-server

Run the init command in your project directory:

$ laravel-echo-server init

After going through the prompts you’ll end up with a laravel-echo-server.json configuration file. We’ll want to make a few changes to make sure it works with our containers. The end result looks like below.

We’ve changed the authHost to point to the web link in our Docker containers. The Redis host is pointing to its corresponding container as well. Finally, we’ve changed the port to correspond to the exposed port in our Node container.

I’ve left “host” empty because I had issues putting localhost.

Install package via node container to obtain proper dependencies

$  docker-compose run --rm node npm install

If it’s your first time using some of these containers, you’ll first download them before actually running the scripts.

We’ll want to install Laravel Echo server locally via our Node container. This is important if you’re on a Mac like I am. Laravel Echo server installs different dependencies than it’s Ubuntu counterpart that runs in the Node container environment.

$  docker-compose run --rm node npm install laravel-echo-server

We’re almost there!

If you notice back in our docker-compose.yml file, we call a Node command on line 49. Here’s a reminder.

command: ‘npm start’

All we need to do now is add that script “start” property to our package.json file, which gets called when the Node Container starts.

“scripts”: {
 “start”: “laravel-echo-server start”
 },

Your final package.json file should look like this.

Start the Stack

Here it is! Ready?

$ docker-compose up

Because Docker has made everything so simple, it becomes that easy. You should see your logs starting up containers you need to run. The containers are now humming and you can view your application here:

http://localhost

Creating an event to test

Creating an Event for broadcasting has been documented here:

Event Broadcasting - Laravel - The PHP Framework For Web Artisans

Because the primary purpose of this post is to get the stack rolling, I won’t go into details about creating an event. You can follow the link above or you can clone the repo to see it working.

I’ve listed a few “gotchas” below however:

Don’t forget to install the proper Redis module

$  composer require predis/predis

Don’t forget to uncomment the App\Providers\BroadcastServiceProvider.php line in app.conf

Even though we won’t be using pusher-js, you’ll need to install it so Gulp compiles right.

npm install --save laravel-echo pusher-js

Don’t forget our Node container only exposes port 8888

A Few Other Notes

While working with Docker containers, it sometimes helps to modify your /etc/hosts file in order to continue using command like ./artisan. Migrations need access to your Mysql database that’s now running in a container.

My etc/hosts file contains a line like the one below:

127.0.0.1 mysql redis

The End

Hopefully this puts you in the right path for creating containers and embracing realtime applications with Laravel. I feel the future of the web will rely heavily on Progressive applications. Building those applications on Laravel is a great idea.