Set up a Docker container to get everything ready for deployment.
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.
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:
$ docker-compose buildto build the Docker image first.
$ docker-compose upto 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.
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'
$ bundle install to install the LiveReload gem.
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:
$ docker-compose build
- 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.
Now the application is all set and ready to be deployed.