Add Webpack to Middleman
Tags: webpack, middleman, githubpages, docker
Published: 2020-08-07 14:56:35

---
title: Add Webpack to Middleman
published: true
description: Use Webpack as an external pipeline of a Middleman application
tags: webpack, middleman, githubPages, docker
cover_image: https://raw.githubusercontent.com/pmallol/middleman-webpack-demo/master/screenshots/Middleman-Webpack.jpg
series: Add Webpack, dockerize and deploy your Middleman app to Github Pages
---

This blogpost will be the starting point for a 3 part series on how to deploy a Middleman app using Webpack to GitHub Pages in simple steps.

We’ll go through:

1. The creation of an empty Middleman application using Webpack as an [external pipeline](https://middlemanapp.com/advanced/external-pipeline/)

2. Dockerizing your Middleman application (plus, adding LiveReload to refresh the browser after new changes)

3. Finish it off by configuring deployment to GitHub Pages using GitHub Actions

You can check out the [demo](https://pmallol.github.io/middleman-webpack-demo) to see how it ends up looking on my own personal GitHub page, or you can skip this whole blogpost and head over to the [repository](https://github.com/pmallol/middleman-webpack-demo) to check out all the files and configurations.

The final result will be an empty Middleman app with an About page, it will have Webpack integrated and all relative links working properly according to [Github Pages relative paths](https://github.blog/2016-12-05-relative-links-for-github-pages/). 

Also, head over to this dev.to article by [Mario](https://dev.to/lxxxvi) if you are looking to add TailwindCSS! [Middleman + TailwindCSS + Webpack](https://dev.to/lxxxvi/middleman-tailwindcss-webpack-ap3)

## Setting up the environment locally

Middleman is really simple to set up locally and it is distributed with the RubyGems package manager so you will need to install both the Ruby language and RubyGems first.

We will be working with **Ruby’s 2.6.3 version**, make sure to upgrade yours if necessary. You can check which Ruby version you have installed by running $ ruby -v and easily upgrade it with [rvm](https://rvm.io/), a Ruby version manager:

1. Run `$ rvm list` to list the available Ruby versions installed in your rvm
2. Run `$ rvm install 2.6.3` to install the desired version
3. Run `$ rvm use 2.6.3` to use a specific Ruby version

Now, lets update the Ruby Gems:

```
$ gem update --system
```

If you are already good to go, follow this [get started guide](https://middlemanapp.com/basics/install/) to install Middleman or just try running the following command in a new terminal session:

```
$ sudo gem install middleman
```

Create a new Middleman application by running middleman’s built in command `$ middleman init`. You can either execute it inside your project’s folder or include the desired project name in the same command and let Middleman do everything for you:

```
$ middleman init your_new_project
```

Move inside your project’s folder to check how it all looks and let’s start a Middleman server for our first live preview:

```
$ cd your_new_project

$ bundle exec middleman server
```

Open a browser at [http://localhost:4567/](http://localhost:4567/). You should be able to see your new Middleman app!

Stop the preview server by pressing `CTRL + C` in the terminal session.

![Screenshot of Middleman app running in a browser at http://localhost:4567/](https://raw.githubusercontent.com/pmallol/middleman-webpack-demo/master/screenshots/screenshot-7.jpg)

## Adding Webpack

We’re now ready to install and configure Webpack in the project. Start with initiating npm, and then installing Webpack:

```
$ npm init -y

$ npm install webpack webpack-cli --save-dev
```
Open the `package.json` file created in the repository root and edit its content to add Webpack’s scripts:

{% gist https://gist.github.com/pmallol/c67d013cba848b2888f1bbe6a9ce367b %}

Also, we’re going to need some extra packages to handle how stylesheets are bundled. To make it easier for you, just copy and paste this entire line in your terminal to install them all at once:

```
$ npm install --save-dev mini-css-extract-plugin sass-loader css-loader node-sass
```

Don’t forget to add `node_modules` inside the `.gitignore` file so as to prevent commiting all `node_modules` folders and files before we configure Webpack.

Next, create a file under the project’s root directory and save it as `webpack.config.js`:

{% gist https://gist.github.com/pmallol/bb524d6e2caa762baed953cb3de589ab %}

Go ahead and run `$ npx webpack` inside your terminal. You should see a new `.tmp/dist` folder was automatically created after bundling the assets with Webpack, and inside of it, you should end up with a `style.css`, a `site.min.js` and a `style.min.js` files.

![Screenshot of Webpack's output in a terminal](https://raw.githubusercontent.com/pmallol/middleman-webpack-demo/master/screenshots/screenshot-1.jpg)

Nice!

Ok, so now that we made sure our files are being handled properly by Webpack, we need to make Middleman incorporate them when developing and building our app.

Open the `config.rb` file, where Middleman’s configuration lives, and add the following lines -we’re telling Middleman how to handle assets and where our new `.css` and `.js` files actually are-:

{% gist https://gist.github.com/pmallol/4bc731804448d2db5ce3b1f0c5fbad38 %}

Finally, open up `./source/layouts/layout.erb`, and replace the assets link helper inside the `<head>` tag of the application’s layout with the following two lines -asset’s file names have changed a tiny bit-:

{% gist https://gist.github.com/pmallol/e92e92ea949be7b9aa71de4a5e41241f %}

Check everything’s working ok by starting your application again with `$ bundle exec middleman`.

Modify either `./source/stylesheets/site.css.scss` or `./source/javascripts/site.js` and open the browser at [https://localhost:4567](https://localhost:4567) to see the changes reflected live:

![Screenshot of a Middleman app running in a browser at http://localhost:4567/ with dev tools open](https://raw.githubusercontent.com/pmallol/middleman-webpack-demo/master/screenshots/screenshot-2.jpg)

Here I’ve changed the `background-color` property to “powderblue” and added a `console.log(“Hello World”);` to the JavaScript file.

Great! You can further improve Webpack’s configuration by adding specific settings to your production environment and create a separate configuration file for both production and development.

We won’t get to cover that in this blogpost. That’s it for now on all matters regarding Webpack as an external service.

Coming next, we’re going to dockerize all of this!