Prerequisite

• You should have Docker installed. Head over to Docker documentation to get started.

Project Setup

Create a project directory and a Dockefile and a docker-compose.yml for it. I'm going to call my project brochure.

mkdir brochure
cd brochure
touch Dockerfile
touch docker-compose.yml

Open up Dockerfile in your text editor.

FROM node:16

EXPOSE 8000
ENV YARN_VERSION 1.22.17
ENV SHELL /bin/bash

RUN curl -fSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
    && tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
    && ln -snf /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
    && ln -snf /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
    && rm yarn-v$YARN_VERSION.tar.gz

RUN yarn global add gatsby-cli

WORKDIR /usr/src/app

ONBUILD COPY package*.json ./
ONBUILD RUN yarn install

COPY . .

CMD ["yarn", "develop", "-H", "0.0.0.0" ]

This Dockerfile specifies that we want to use NodeJS version 12 and Yarn version 1.22.5, install gatsby-cli globally, expose port 8000, set working directory to /usr/src/app and copy the code source from our machine to the Docker container.

Open up docker-compose.yml in your text editor.

version: '3'
services:
  web:
    build:
      context: .
    ports:
      - '8000:8000'
    volumes:
      - .:/usr/src/app

We're using Docker Compose in this project mainly for its ease of use built-in commands to create and start services. In this configuration, we're telling Compose where to look for Dockerfile with build context, mapping port 8000 from our localhost to the Docker container, and mapping our project directory to the project director in the Docker container with volumes.

Now we can build our Docker service, in the terminal by running docker-compose build.

Once your container finishes building you can jump into a container service with docker-compose run web bash. This will allow you to run any bash commands in the container. You can exit the container anytime with exit or Ctrl + d.

We're going to use Gatsby CLI to create a new Gatsby site with their "Hello World" starter.

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

Once the download is complete, you'll notice that there is a new hello-world directory /usr/src/app/hello-world in your Docker container, and ./brochure/hello-world on your local machine. Gatsby CLI doesn't allow us to specify a path to set up a new project, so we will have to move all the generated files after the hello-world starter has been downloaded. Run the following command to move all files including hidden files to our desired directory: /usr/src/app.

mv -f hello-world/{*,.*} .

Now let's do some cleanup. This starter project uses npm as its preferred package manager, but we're going to use yarn. I've found that when switching from npm to yarn it's better to reinstall all packages using yarn.

rm -rf hello-world # remove the now empty folder
rm -rf node_modules/ # removed all installed packages
rm package-lock.json # remove npm lock file

Open package.json in your editor and modify the project name to brochure and replace any instance of npm run with yarn run.

Reinstall packages with yarn.

yarn install

Once all packages are installed, you should now have a yarn.lock file.

You can exit out of the container with exit command or Ctrl + d.

Your project is ready! Take it for a spin by running docker-compose up and visit http://localhost:8000.

To spin down the server you can either use Ctrl + c or open another terminal window/tab in the same directory and run docker-compose down.