Web Development Environment using Devilbox
Tags: docker, webdev, local, wordpress
Published: 2019-06-04 08:19:24


![einstein](https://kociaj.com/content/uploads/2019/06/einstein.jpg)

I've always been using WAMP as my local dev environment for a quite amount of time while I was using Windows OS, then I switched to Mac OS and used MAMP for a while. That was the case until one of my colleagues recommended `devilbox`. I gave it a try, and since then I've been using it as my local dev environment.

# Table of Contents

- [What Is Devilbox](#What is the Devilbox)
- [Requirements](#Requirements)
- [Configuration](#Configuring Devilbox .ENV FIle)
- [Project Directory](#Project Directory)
- [WordPress Installation](#WordPress Installation)
- [Conclusion](#Conclusion)


### What is the Devilbox

No, it does not has to do anything with the devil. As the author describes it in the official [website](http://devilbox.org/)

>  The Devilbox is a modern and highly customizable **dockerized PHP stack** supporting full **LAMP** and **MEAN** and running on all major platforms. The main goal is to easily switch and combine any version required for local development. 

You don’t have to worry if your Operating System will support it. The Devilbox supports  **Linux**, **Mac**  and **Windows** OS!

![Devilbox Dashboard](http://devilbox.org/assets/img/devilbox-dash.png)


### Requirements

- Computer with decent specs
- Internet Connection
- [Docker](https://www.docker.com/) Installed
- Git Installed 

I do believe I do not need to go through the first 2 requirements :smile: 

To use the Devilbox you will need to have Docker installed on your computer. For the sake of this article and because I am using Mac OS I will show you how to download and install Docker for Mac.

#### Install Docker

There are many ways to install Docker for Mac

One way is to head to https://docs.docker.com/v17.12/docker-for-mac/install/#download-docker-for-mac and click `Get Docker for Mac` (preferable version is always the stable). When the download is finished open the `Docker.dmg` file you just downloaded and follow the instructions to complete the installation. 

The second is to install it via `homebrew` the MacOS package manager. To install it open your terminal and type the following command

 ```bash
~ brew install docker
 ```

![brew docker install](https://kociaj.com/content/uploads/2019/06/dockerinstall.png)

Next step is to run docker and the easiest way to do it is by pressing <kbd>CMD</kbd> + <kbd>SPACE</kbd> and type docker and then <kbd>ENTER</kbd>.  You should get a notification when docker is running.

#### Install Devilbox

The Devilbox does not come with any install package, to *install* it, you have to `clone` the repository to your local machine. To achieve this, we use the command `git clone REPOSTIORY_URL.git` the project's repo is hosted on [GitHub](https://github.com/cytopia/devilbox). Let's proceed to install devilbox. 
Open a terminal window, and type `git clone https://github.com/cytopia/devilbox`  and wait for the cloning process to finish. 

![devilboxinstalled](https://kociaj.com/content/uploads/2019/06/devilboxinstall.png)

When the clone finishes and need to enter the devilbox directory by typing `cd devilbox` you should see the following.

![devilboxinstalled](https://kociaj.com/content/uploads/2019/06/devilboxinstalled.png)

#### .ENV file

Because the Devilbox is configurable via a `.env` file, our next step is to copy the `env-example` file to `.env` to so we can run the following command: 

```bash
cp env-example .env
```

### Start Devilbox

The time has come, to launch the devilbox!

To launch the devilbox you need to run the following command on your terminal while you are instead the devilbox directory. `docker-compose up` now it will pull all the required containers! The first time you run this it might take a while, depends on your internet connection. But once you have all the images, you should be able to start all the containers in a matter of seconds (~4-5 seconds).

![dockercomposeup](https://kociaj.com/content/uploads/2019/06/dockercomposeup.png)

> TIP! Run `docker-compose up -d` to run the containers in the background detached from your current terminal window.

When all the images are pulled, you should be able to access devilbox localhost URL. By default, The Devilbox is listening to port `80` which means you can access it by visiting [http://localhost](http://localhost)  

![](https://kociaj.com/content/uploads/2019/06/devilboxdash.png)


> Starting and stopping containers is done via `docker-compose`. If you have never worked with it before, have a look at their documentation for [overview ![img](https://raw.githubusercontent.com/cytopia/icons/master/11x11/ext-link.png) ](https://docs.docker.com/compose/reference/overview/), [up ![img](https://raw.githubusercontent.com/cytopia/icons/master/11x11/ext-link.png) ](https://docs.docker.com/compose/reference/up/), [stop ![img](https://raw.githubusercontent.com/cytopia/icons/master/11x11/ext-link.png) ](https://docs.docker.com/compose/reference/stop/), [kill ![img](https://raw.githubusercontent.com/cytopia/icons/master/11x11/ext-link.png) ](https://docs.docker.com/compose/reference/kill/), [rm ![img](https://raw.githubusercontent.com/cytopia/icons/master/11x11/ext-link.png) ](https://docs.docker.com/compose/reference/rm/), [logs ![img](https://raw.githubusercontent.com/cytopia/icons/master/11x11/ext-link.png)](https://docs.docker.com/compose/reference/logs/)and [pull ![img](https://raw.githubusercontent.com/cytopia/icons/master/11x11/ext-link.png) ](https://docs.docker.com/compose/reference/pull/)commands.

More about starting The Devilbox [here](https://devilbox.readthedocs.io/en/latest/getting-started/start-the-devilbox.html)


### Configuring Devilbox .ENV FIle

Devilbox is configurable and you can easily switch between dev environments like (PHP,APACHE,MySQL) or (PHP, NGINX,MariaDB). 
just open the `.env` file with your favourite editor and configure it to match your <strike>taste</strike> **environment** . I am using [Visual Studio Code](https://code.visualstudio.com/) 

![envfile](https://kociaj.com/content/uploads/2019/06/envfile.png)

Every configuration is self-explanatory, the most common configuration will be the following where you change the `PHP_SERVER` version, `HTTPD_SERVER` and `MYSQL_SERVER`. As you can see, I am running `PHP 7.2`  `NGINX stable` and `MariaDB 10.3` Go through the .env file to discover other settings. 


Read more about configuring the env file [here](https://devilbox.readthedocs.io/en/latest/configuration-files/env-file.html)


### Projects Directory

The devilbox's projects directory is located inside the devilbox directory `./devilbox/data/www` it should be empty by default. Here is where all your projects will live. 

For each project, you will need to create a folder. 

Read more [here](https://devilbox.readthedocs.io/en/latest/getting-started/directory-overview.html#project-directory)

### Docroot Directory

The docroot directory is a directory within each project directory from which the webserver will serve the files.

By default this directory must be named `htdocs`. This can be changed as well, but is outside the scope of this tutorial. 

### Local domain suffix

The default domain suffix (`TLD_SUFFIX` variable in `.env` file) is `loc`. That means that all your projects will be available under the following address: `http://<project-directory>.loc`. This can be changed as well in the `.env` file. `TLD_SUFFIX`!

### WordPress Installation

Let us take an example of a WordPress installation from start to the end. 

Open terminal and run the following: 

- `cd devilbox/data/www`

- `mkdir testwp` to create a directory named **testwp**

- `cd testwp` enter the dir we just created

- Download WordPress `wget http://wordpress.org/latest.tar.gz`

- Unzip the archive file by running `tar -zxvf latest.tar.gz`

- Run `mv wordpress htdocs` (remember docroot directory?)

- Open [http://testwp.loc/](http://testwp.loc/) and you should see the following error.

  - ```**testwp.loc**’s server IP address could not be found.
    testwp.loc’s server IP address could not be found.
    DNS_PROBE_FINISHED_NXDOMAIN
    ```

    This happens because we have not added the local host DNS record. 

  If you navigate to [http://localhost/vhosts.php](http://localhost/vhosts.php) you should see something like this.

  ![hosterror](https://kociaj.com/content/uploads/2019/06/hosterror.png)

The next step is now to add the record in our hosts file. To do so, run `sudo nano /etc/hosts` to edit it with the nano editor and add the following line 

```
`127.0.0.1 testwp.loc`
```

 hit save.  Navigate again to [http://testwp.loc/](http://testwp.loc/) and now you should see the WordPress install page.

![wpinstall](https://kociaj.com/content/uploads/2019/06/wpinstall.png)


Next step now, is to create a database for WordPress to use. We can do it by using a terminal or by using `phpmyadmin` which comes with the devilbox. To access phpMyAdmin first navigate to [http://localhost/index.php](http://localhost/index.php) > Tools > phpMyAdmin in case it asks for credentials enter `root` as user and leave password field empty.

No create a new database from the sidebar, I will name it `wp_testdb`.

Once done that head back to WordPress Install Page and continue and add the freshly created database. 

> Note! For the Database host instead of `localhost` you need to enter `mysql` as this is the name of the MySQL server (container)running in the devilbox environment! 

Everything should have run smoothly and you should see the new WordPress site up and running on [http://testwp.loc](http://testwp.loc)

![wplive](https://kociaj.com/content/uploads/2019/06/wplive.png)


### Conclusion

The Devilbox is a free and open source project very very easy to set up and run a PHP, Nginx and MySQL dev environment and a WordPress installation read following this tutorial should take approximately 10 minutes! I have been using Devilbx for about 1 year now, and I am pretty happy with it and find it very convenient when I am working on a project with PHP 7, and I have to switch to a project running on PHP 5.6 it takes me less than 15seconds! :hourglass: 

Have you used The Devilbox before? Would you give it a try?