WordPress development environment with Docker Part III: Using your own WordPress theme

— 

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
  • Sharing data
  • Adding your own theme
  • Side note on volumes
  • Wrapping up

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.

Sharing data

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.


[...]
  volumes:
    - /my/awesome/path:/var/www/html
[...]

Let’s add this in our Compose file:


wordpress:
  image: wordpress
  links:
    - wordpress_db:mysql
  ports:
    - 8080:80
  volumes:
    - /c/Users/jeremie.veillet/.dev/wp-docker/wordpress:/var/www/html
wordpress_db:
  image: mariadb
  environment:
    MYSQL_ROOT_PASSWORD: examplepass
phpmyadmin:
  image: corbinu/docker-phpmyadmin
  links:
    - wordpress_db:mysql
  ports:
    - 8181:80
  environment:
    MYSQL_USERNAME: root
    MYSQL_ROOT_PASSWORD: examplepass

Before launching this,

WordPress development environment with Docker Part II: Using Docker Compose to install WordPress

— 

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

  • Prerequisites
  • Directory structure
  • Using docker-compose
  • Setting up WordPress
  • Setting up a database
  • Bonus part
  • Wrapping up
  • Part III : adding your own development theme

Prerequisites

A fonctionning installation of Docker (see Part I).
A command line / Terminal.
A web browser of your choosing.

Directory structure

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

Using docker-compose

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.

WordPress development environment with Docker Part I: installing Docker

— 

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

  • Prerequisites
  • Introduction
  • Create a docker machine
  • Connect to the Docker Machine
  • Start and stop machines
  • Getting the Host IP address
  • Wrapping up
  • Part II : using Docker Compose to install WordPress

Prerequisites

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).

Introduction

“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.

How to clean up local git branches matching a name

— 

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:


$ cd myProject
$ git branch
  Another_thing_to_do_aside
  Fix_another_fix
  Fix_some_kind_of_task
  Fix_urgent_task_to_change
  JIRA-10_End_task_yes_the_real
  JIRA-1_One_task
  JIRA-2_Another_task
  JIRA-3_Task_3
  JIRA-4_TEST_task
  JIRA-5_Great_Task
  JIRA-6_No_task
  JIRA-7_Foo_task
  JIRA-8_Bar_Task
  JIRA-9_Bazz_task
* master

As you can see, you could have a whole bunch of branches of every name. Now, git gives you the possibility of listing the branches that has been already merged.


$ git branch --merged

Of course you can do the exact opposite and list the not merged ones.


$ git branch --no-merged

Now you can go and use the results of these commands and add it to the delete method.


$ git branch -d `git branch --merged`

But what if you want to delete branches based on their name or a part of their name ?

Grep to the rescue

If you’re on Windows: I suggest you at least use Git bash, or some kind of Cygwin equivalent, because we are about to use *nix commands.

So, how to retrieve branches of a certain name ?

Introducing first draft of the Styleguide

— 

A new section is up in the Menu: The Styleduide!

A Styleguide to rule them all

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.

How ?

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.

Dealing with the MongoDB error /data/db not found in OSX

— 

Disclaimer

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:


$ sudo chmod 0755 /data/db
$ sudo chown $USER /data/db

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,