Scalable Web Development Environments

Before I start, I should clarify that when I refer to a web development environment, I’m talking about the software, configuration and tooling that web developers use when they’re building a website. Alright, let’s jump in.

⚠️ The Problem

It goes without saying that every developer has their own preference to the tools they use; usually based on the experience and familiarity with each tool.

When talking web development environments, consider the endless combinations of configurations for a PHP developer:

• John prefers Windows with WAMP
• Jenny uses a Mac with MAMP (free version)
• Jake likes Mac uses MAMP Pro
• Jill prefers Ubuntu with everything installed natively
• Jack uses a Mac, and likes creating Docker containers for each project
• etc etc etc — endless combinations right?

If each of these developers are working individually, they may be super productive and have no issues. The problem comes when all of these developers are on the same team. See, it’s difficult not just to maintain each person’s uptime (eg. <insert whiny voice>MAMP updated and now my sites aren’t working…</whiny voice>), but also to ensure consistency.

When we have consistency, we benefit because:

• Debugging issues are easier as everyone’s on the same page
• The product that everyone’s working on, is working exactly the same on John’s machine as it is on Jane’s. No more “well it was working on mine with PHP5.6.34…”
• The team will all use the same procedures and processes, meaning less barrier to entry and more efficient work

🙌 The Solution

Docker, and it’s really fairly simple to setup and use.

Docker is software that performs operating-system-level virtualization also known as containerization.

Hmmm…what does that mean? It essentially means that you can write some fairly straight-forward configuration, which will install everything from an operating system to a specific version of PHP, within a sandboxed container.

You can distribute this configuration to your team, they’ll run it within Docker and each person will have exactly the same development configuration. When you add requirements to your environment (eg. perhaps your company starts using Composer or Gulp), you can simply update the config, re-distribute and everyone will be up to date.

Another benefit is that Docker is compatible across operating systems — so Mac lovers can continue using a Mac, Windows to Windows etc.

A really simple example would look something like this:

# docker-compose.yml
version: '1'
services:
  db:
    container_name: db
    image: "mysql:5.7"
    ports:
      - "3306:3306"
  web:
    container_name: web
    image: "php:7.1-apache"
    ports:
      - "80:80"

Running this configuration would create:

• A Database container with MySQL 5.7
• A Web container with Apache and PHP 7.1

That exact example may or may not work, it’s a stripped back example to show the basic structure

👨🏼‍💻 Let’s see it working

First up, there are some prerequisites for Docker:

• Your machine must be MacOS, Windows 10 Pro or Linux
• Your CPU must support virtualisation (Intel VT-x or AMD-V)

Step 1. Install Docker

Head on over to https://docs.docker.com/compose/install/, download, install and open Docker Compose for your OS.

Step 2. Docker Config

Here’s one I prepared earlier. Amongst other things, this set of config will give you everything you need for a typical day in PHP land:

• PHP 7.1.x (default) as well as PHP 5.6.X
• MySQL 5.7
• Composer
• NodeJS (and NPM)
• Mailhog (for testing email)

You could fork this repo and modify it to your own team’s needs, or simply use it as is.

Either way, let’s dive in with this configuration for now. Clone the repo to your machine:

git clone https://github.com/pvtl/docker-dev && cd docker-dev

Make your own environment file:

cp .env.example .env

Open .env and for now, just update the DOCUMENTROOT= variable to point to the absolute path of where your websites live on your computer (eg. I put all my websites under a ~/Sites directory). For each website in your document root, you'll need to add a host file override (on a Mac, the host file is located /etc/hosts) - eg. if I have a site in folder ~/Sites/info/, I'll add 127.0.0.1 info.localhost to my host file.

Step 3. Let’s run it

Finally, start let’s build and start our new dev environment:

docker-compose up -d

The first time you run this, it may take some time as it will download and build all of the dependencies (eg. Linux, PHP, MySQL etc).

Once this finishes, the Docker environment will be running in the background.

🚀 Done…Let’s test

• Create a folder in your document root called info (eg. ~/Sites/info)
• Add 127.0.0.1 info.localhost to your host file
• Create a file within the new folder called index.php with <?php phpinfo(); as the file contents
• Visit info.localhost in your browser and you should see:

We have a PHP server running!

You can also add 127.0.0.1 info.php5.localhost to your host file and visit info.php5.localhost in your browser and you should see:

Oh what? We have a PHP 5 server running too?!

Notice that just by adding php5 to the URL, the Docker environment will know to use PHP5 instead of PHP7 (helpful if your working on a legacy codebase).

To close Docker, simply run docker-compose down (from the directory where you cloned the config) and then quit Docker. There's also more documentation in the repo for this configuration - eg. how to SSH into the container.

In case it’s not clear, you can (and should?) bundle as many of your standard development tools inside your Docker container. For example we bundle NPM, Composer, Wordpress CLI, Gulp CLI etc. All CLI commands are then executed from within Docker.

If a new developer started at your company with a fresh machine — wouldn’t it be great to simply say — clone our Docker local development environment and they’ll have everything they need? Now you can