Divi Development Environment Setup
Learn how to get a local development environment up and running.
Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.
Before you can create Divi Extensions you need to ensure that you have the proper environment setup on your local system. The requirements are:
A fully functional installation of WordPress
The latest LTS version of NodeJS
The latest version of Yarn (optional, but preferred)
The latest version of gettext (needed to process translations when creating releases)
The latest version of Divi
There are several different options you can use to get a local development environment up and running. A few examples are:
Docker
Vagrant
Local by Flywheel
XAMPP
In this tutorial we』ll be using Docker with the official docker image for Divi Development.
Install Docker
The most complicated part of installing docker is figuring out which version you need to install. Use the following tables to locate the correct version for your operating system and then download and run the installer for that version.
Mac
OS Version
Installer
Detailed Instructions
Complete Documentation
OS X 10.11+
Docker for Mac
Instructions
Documentation
OS X 10.8-10.10
Docker Toolbox
Instructions
Documentation
Windows
OS Version
Installer
Detailed Instructions
Complete Documentation
10 Pro+
Docker for Windows
Instructions
Documentation
10 Home
Docker Toolbox
Instructions
Documentation
Linux
OS Version
Detailed Instructions
Ubuntu 16.04+
Instructions
Fedora 25+
Instructions
Using Linux? Follow the instructions linked in the table as there is no Docker installer for Linux.
Start Docker Containers
The Divi Development Environment consists of two docker containers, one for the database and one for everything else. Starting/Stopping multiple containers for a single environment can be tedious. Luckily, we won』t have to worry about that because we』re going to use the docker-compose command.
Docker Compose is a tool for defining and running multi-container Docker applications.
Go ahead and create a new directory for your development workspace. The directory should be located somewhere below one of the following paths (depending on your OS):
Default Shared Directories
Mac: /Users, /Volumes, /private, & /tmp
Windows: C:Users
Linux: /home
Now, create a file named docker-compose.yml inside your workspace directory as shown below:
version: '3.3'
services:
mariadb:
image: 'mariadb:10.2.14'
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: wordpress
DATADIR: /data
restart: on-failure
volumes:
- 'database:/data'
network_mode: 'service:wordpress'
wordpress:
image: 'elegantthemes/divi-dev'
hostname: divi-dev
volumes:
- '${PWD}:/workspace/wordpress'
ports:
- '80:80' # nginx
- '3306:3306' # mariadb
- '3000:3000' # webpack hmr
volumes:
database: {}
view raw
docker-compose.yml
hosted with by GitHub
Using Windows? You need to replace ${PWD} in the compose file with the full path to the directory where the compose file is located.
Run WordPress Container Setup Script
Open a terminal window in your workspace directory and run the following commands:
docker-compose up -d
docker-compose exec -u 1000 wordpress divi-dev setup
This could take a few minutes (or more) depending on your internet connection speed. When it』s done you should see the following:
Creating network "divi-dev_default" with the default driver
Creating divi-dev_wordpress_1 ... done
Creating divi-dev_mariadb_1 ... done
Downloading WordPress 4.9.5 (en_US)...
md5 hash verified: f009061b9d24854bfdc999c7fbeb7579
Success: WordPress downloaded.
Initializing database... ████████████████████| 100%
Success: Generated 'wp-config.php' file.
Success: WordPress installed successfully.
Success: Rewrite rules flushed.
Success: Rewrite structure set.
Setup Complete! Here's how you can access WordPress:
URL: http://local.divi-dev.site
Username: divi-dev
Password: password
Final Step: Access WordPress Dashboard And Install Divi
Divi isn』t included in the container. The final step is to install it via the WordPress Dashboard.
Commands Quick Reference
You can use the following commands to manage your containers. Be sure to run them from inside your workspace directory:
Enter Container (get command prompt inside container)
docker-compose exec -u 1000 wordpress /bin/bash
Exit Container (return to your system』s command prompt)
exit
Stop Running Containers
docker-compose stop
Start Stopped Containers
docker-compose start
Remove Containers (WordPress database will be deleted!)
docker-compose down
Start New Containers
docker-compose up -d
docker-compose exec -u 1000 wordpress divi-dev setup