My Docker Setup For GatsbyJS (and NextJS)
Tags: docker, gatsby, nextjs, workflow
Published: 2019-02-06 13:56:43

---
title: My Docker Setup For GatsbyJS (and NextJS)
published: true
description: Just a quick post showing the Docker setup I use for building Gatsby and NextJS frontends.
cover_image: 'https://thepracticaldev.s3.amazonaws.com/i/f4q52sb52oqkn39b3btu.png'
tags: docker, gatsbyjs, nextjs, workflow
---

Update: Alpine made a couple changes that affect this post, and [a helpful comment below](https://dev.to/stuckj/comment/bej8) will clear up the issue(s) caused from that. Thanks Jonathan! I've also fixed the example code.

Update #2: It seems that Hot Module Reloading is currently borked with this in Windows. I'll post an update if/when that is fixed!

Update #3: If you're still experiencing issues, another comment below might get you back on track: [HERE](https://dev.to/ivorsco77/comment/ia43)

## Docker is Fantastic

I'm probably late to the party on this one, but I recently started using [Docker](https://www.docker.com/) as a part of my development workflow. I absolutely love it, and I feel that all developers should at least tinker with a basic tutorial somewhere. Trust me, it's a rabbit hole worth exploring!

## But... There Was a Minor Hitch

While going through a some of my recent Gatsby and NextJS projects this week to "Dockerize" them, I noticed that there didn't seem to be much information readily available for making that happen. 

Gatsby does offer [a Docker setup](https://github.com/gatsbyjs/gatsby-docker) within their repo (based on alpine:edge), but to be blunt: it seemed needlessly complicated and vague, and I could not make it work for my purposes. (I think it's only meant to serve a site, post-build.) 

So, I decided to figure out how to create a custom one from an official node:alpine (latest) image... just something to use for a quick dev environment setup regardless of which computer I'm using. (If I wanted to deploy somewhere other than Netlify, I could quickly add an Nginx image/service and a super basic conf file.)

## Problem Solved!

After hours of learning, research, and experimenting (and possibly some frustration), I present you with my version of a working Dockerfile! It will create a fully functional Docker image that installs all the required packages in Apline Linux (latest) for building Gatsby (and NextJS) sites and apps.

(Note: For NextJS sites, I simply change the final CMD and the port(s) to whatever I'm using for the site/app... usually 8080.)

#### Dockerfile.dev

```docker
FROM node:alpine

# Also exposing VSCode debug ports
EXPOSE 8000 9929 9230

RUN \
  apk add --no-cache python make g++ && \
  apk add vips-dev fftw-dev --update-cache \
  --repository http://dl-3.alpinelinux.org/alpine/edge/community \
  --repository http://dl-3.alpinelinux.org/alpine/edge/main \
  && rm -fR /var/cache/apk/*

RUN npm install -g gatsby-cli

WORKDIR /app
COPY ./package.json .
RUN yarn install && yarn cache clean
COPY . .
CMD ["yarn", "develop", "-H", "0.0.0.0" ]
```

#### docker-compose.yml

(Note the setting of `GATSBY_WEBPACK_PUBLICPATH` - this seemed to fix any HMR issues I was having when editing code.)

```yaml
version: '3'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "8000:8000"
      - "9929:9929"
      - "9230:9230"
    volumes:
      - /app/node_modules
      - .:/app
    environment:
      - NODE_ENV=development
      - GATSBY_WEBPACK_PUBLICPATH=/
```

You'll probably want to throw a `.dockerignore` file into the project directory too, to ignore things like ./node_modules, ./cache, ./public, any .DS_Store files, etc. (Much like a `.gitignore` file.)


To run it, from the project's root directory run:
```sh
$ docker-compose up --build
```

After running that, I'm ready to work... whether I'm on my Macbook Pro or on my Windows desktop. Hopefully this helps you too!