Welcome to the last part of the WordPress development environment with Docker. We will see how to use your own theme in the previous Docker container we created in Part II. If you followed up from the last time, you will see this is straightforward.
Table of Contents
Accessing the container
Adding your own theme
Side note on volumes
Accessing the container.
Our WordPress instance is installed and running in a container, we have to ask ourselves how to access to this container to be able to read and write in the directory where the files are contained. Docker has mounted WordPress in /var/www/html, so in order to access this directory, we must tell the Compose tool, how to share a directory from the host and the container.
Something tricky about sharing data with Docker, on OSX and Windows, sharing directories is restricted. Your project must be located at least in the root of C:\Users (Windows) and /Users (OSX), otherwise it won’t work.
To share data, it’s a matter of adding the “volume” line in the Compose file and tell it which directory on the host we map with the container.
For this example, we want to mount the directory in a “wordpress” folder.
The syntax start with the host directory path, separated with a colon (:), and then the path in the container.
This is part II of an ongoing series about WordPress development with Docker. Part I was about installing Docker and preparing the environment. Our goal this time, is installing WordPress in a container, a database, and play a little bit with it.
Table of Contents
Setting up WordPress
Setting up a database
Part III : adding your own development theme
A fonctionning installation of Docker (see Part I).
A command line / Terminal.
A web browser of your choosing.
We will use a simple directory structure, create a folder on your OS, then create an empty docker-compose.yml in it.
$ mkdir wp-docker
$ cd wp-docker/
$ touch docker-compose.yml
Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a Compose file to configure your application’s services. Then, using a single command, you create and start all the services from your configuration —Docker Compose documentation
You can also launch containers one by one by doing a docker run + parameters, but it is not really friendly (yes, this is highly subjective), and very verbose as you have to type a list of parameters the size of the Mississippi. Compose is a tool made to combine the launch of multiple containers ( = multiple run commands), with the help of a YML file. This file can take a lot of parameters, we will focus on the key ones we will need in order to accomplish a WordPress installation. As always check the Docker documentation to know more.
Welcome to this (soon to be) series about WordPress development environment using Docker. We will cover the basis of how to set up Docker, how to configure it to run a WordPress instance in a container, and how to add our theme, modify it, and see instantly the result.
Part I is aimed at people who heard about Docker and containers, but never got deeper. If you already know what is it all about, and have a functioning environment, skip directly to Part II.
Table of Contents
Create a docker machine
Connect to the Docker Machine
Start and stop machines
Getting the Host IP address
Part II : using Docker Compose to install WordPress
Install Docker Toolbox (Windows or Mac, VirtualBox is included).
A Terminal (No worries on OSX or Linux, if you’re on Windows, try Cygwin , or an equivalent like Babun).
“Docker allows you to package an application with all of its dependencies into a standardized unit for software development.
Docker containers wrap up a piece of software in a complete filesystem that contains everything it needs to run: code, runtime, system tools, system libraries – anything you can install on a server. This guarantees that it will always run the same, regardless of the environment it is running in.” — Docker documentation
There are three key components of Docker:
The docker program.
Docker subcommands (run, compose, etc..).
Docker images, that will run in containers.
“A container is a stripped-to-basics version of a Linux operating system. An image is software you load into a container.
If you are like me, and you are in an project using git, you probably create or use a LOT of branches. There can be times when it’s hard to keep track of all of them and they pile up in your project’s folder until you see 100 of them.
A word of caution: Deleting branches is a definitive act, you cannot go back, especially if the branches hadn’t been pushed to some kind of remote repository (e.g Github, BitBucket, etc..).
Navigate through your project and list the branches, you probably already know that * represent your current default branch:
When you work in a team, it’s always great to have a common place to share the visual aspect and design of a project. The difficulty here is getting a common resource for all the visual elements of the website, and provide guidance on how to implement them, so that everything looks consistent on every page, without sacrificing people creativity. It should help implementing modularity, so that updating a component does not cause a shitstorm in your application.
There is a lot of techniques and methodologies this days to help you achieve that goal, to name a few BEM, ITCSS, OOCSS, SMACSS, you can also read the great Brad Frost’s blog about Atomic Design, which was a great inspiration.
Demain·il·pleut has been build around that philosophy. I designed everything in the browser, most of the CSS and HTML markup is done by hand. I didn’t use tools, frameworks, or library (at the exception of jQuery and PrismJS) because I thought that for a small project like this one, they would get in the way. Here is an overview of the approach I took:
Every element on the page use CSS classes, using a BEM-like naming, I choose to name the components like Component-Element--Modifier
Very simple HTML markup.
I use CSS Ids only for JS hooks.
Only one CSS file of 14kb (10kb minified).
For now, I use Gulp to minify the CSS.
Flexbox has a browser compatibility of 95%, that’s great, so I had a little fun with it and used it to display the colors of the Styleguide.
if you landed somehow on this article, you have probably miss something in the install process of MongoDB.
What the.. ?
When trying to launch mongodb in your Terminal, I guess you have met with this kind of error message:
$ mac:app jeremie$ mongod
2015-10-09T12:06:37.396+0200 I STORAGE [initandlisten] exception in initAndListen:
29 Data directory /data/db not found., terminating
Basically, the output is pretty clear, you do not have the data directory, and its db subdirectory created in your root folder, which are essential to run the mongodb instance.
So let’s go ahead and fix that, and create that directory.
$ mkdir -p /data/db
If you try to launch the mongod command again after that, it will fail with something like the above:
$ mac:app jeremie$ mongod
2015-10-09T12:10:17.370+0200 I STORAGE [initandlisten] exception in initAndListen: 98 Unable to create/open lock file:
/data/db/mongod.lock errno:13 Permission denied Is a mongod instance already running?, terminating
The directory is created, but you do not have sufficient rights to interact with it.
Do I have the permission, Sir?
Fixing this error message is pretty straightforward, the two commands below will do the trick:
Simply put, what it means on the first line is the owner have read, write, and execute rights, and others have only read and execute rights.
The second line changes the ownership of the directory from its current owner to the logged in user.
Aaaaand, that’s it! Next time you will fire the mongod command,