Dockerize Middleman

Set up a Docker container to get everything ready for deployment.

9/7/2020
docker, middleman, webpack, github-pages

Welcome to part 2 of the “Add Webpack, dockerize and deploy your Middleman app to Github Pages” series!

In the last post we built an empty Middleman application locally and added Webpack as the external pipeline. Now it’s time to set up the same app but inside a Docker container to get everything ready for deployment.

Head over to the previous post to learn how to set up Webpack to your Middleman app or skip this all together and learn how to deploy your Middleman app to GitHub Pages using GitHub Actions, in part 3.

Setting up Docker

If you haven’t already, download Docker.

Create a new file named Dockerfile in your repository root directory where your Middleman app already exists. We’re going to be using a Ruby 2.6.3 image and install Node.js in it.

Open the Dockerfile file and paste the following configuration for our Docker image:

# Dockerfile

FROM ruby:2.6.3

WORKDIR /app

RUN curl -sL https://deb.nodesource.com/setup_13.x -o nodesource_setup.sh  && \
    bash nodesource_setup.sh && \
    apt install nodejs

# Copy Ruby and Node dependencies
COPY Gemfile Gemfile.lock package.json package-lock.json ./

# Install dependencies
RUN bundle install --without debug && npm install

EXPOSE 4567

Now create another file in the same root directory with the name docker-compose.yml, open it and paste these lines:

# docker-compose.yml

version: '3.7'

services: 
  web:
    build: .
    command: bundle exec middleman server
    volumes:
      - '.:/app'
      - 'node_modules:/app/node_modules'
    ports:
      - '4567:4567'
      - '1234:1234'
volumes: 
  node_modules:

We’ll be using port 1234 for LiveReload later.

To get the app up and running using Docker:

  1. Run $ docker-compose build to build the Docker image first.
  2. Run $ docker-compose up to start the container and get the environment ready.

If the last command fails, make sure you don’t have the application running locally in a previous terminal session.

Your app should still be available at http://localhost:4567/, but now running inside a Docker container!

You can stop the running container pressing CTRL + C inside the terminal.

Adding LiveReload

Let’s improve the app by making sure we don’t have to refresh the browser every time we want to see new changes. In order to achieve that we’re going to add LiveReload. LiveReload will automatically refresh the browser whenever files in the repository are modified.

With the Docker container stopped, add this line to the Gemfile:

gem 'middleman-livereload', '~> 3.4.3'

Run $ bundle install to install the LiveReload gem.

Open your config.rb file and add the following lines of code under the “# Activate and configure extensions” section, to activate LiveReload in our application:

# config.fb

# Activate and configure extensions
# ...

# Livereload
activate :livereload, host: '0.0.0.0', port: '1234'

Because we modified the Gemfile, we need to build the docker image again:

  1. Run $ docker-compose build
  2. Start the web container again running: $ docker-compose up

Try modifying any css property to quickly see LiveReload in action. The browser should refresh the preview automatically.

Great!

Now the application is all set and ready to be deployed.