Quick reference

• Maintained by: Yukihiko Shinoda

Quick reference (cont.)

• Where to file issues: https://github.com/yukihiko-shinoda/dockerfile-gatsby/issues

• Image updates: Dockerfile

• Source of this description: docs repo's root directory

What is Gatsby?

Gatsby Official image doesn't actually provide Gatsby in a way that can be used for development via Docker.

cf. CLI / Dev image · Issue #25 · gatsbyjs/gatsby-docker

This image provides develop environment which supports:

• gatsby new
• gatsby develop
• gatsby develop --https
• gatsby-plugin-sharp

---

Gatsby is a React-based open source framework for creating websites and apps. Build anything you can imagine with over 2000 plugins and performance, scalability, and security built-in by default.

How to use this image

To run gatsby new:

docker run --rm -v $(pwd -W):/workspace futureys/gatsby gatsby new <site-name> [<starter-url>]

Ex:

docker run --rm -v $(pwd -W):/workspace futureys/gatsby gatsby new hello-world-gatsby  https://github.com/gatsbyjs/gatsby-starter-hello-world

To start development, see via docker-compose.

... via docker-compose

1.

Add Dockerfile in your project to prevent to repeat installing node packages:

FROM futureys/gatsby
COPY ./package.json ./yarn.lock ./
RUN yarn install && yarn cache clean
COPY . .

2.

Add docker-compose.yml in your project to define run parameters:

version: "3.9"
services:
  web:
    build:
      context: .
    environment:
      # Gatsby also uses NODE_ENV but how effect it is not clear...
      # see: https://www.gatsbyjs.com/docs/environment-variables/
      NODE_ENV: development
    ports:
      # For gatsby develop
      - "8000:8000"
      # For gatsby serve
      - "9000:9000"
      # 9230, 9929: When start multiple instances of node app,
      #       first instance starts occupies 127.0.0.1:9229 and other instances cannot get to the port
      # see: https://dev.to/wataash/chrome-attach-debug-with-webstorm-328p
      # see: https://github.com/nodejs/node-inspect/issues/48#issuecomment-507889953
      - "9230:9230"
      - "9929:9929"
    volumes:
      # see: https://stackoverflow.com/questions/29181032/add-a-volume-to-docker-but-exclude-a-sub-folder/37898591#37898591
      - /workspace/node_modules
      - .:/workspace

3.

Update scripts develop and serve in package.json to make it accessible from outside the container:

-    "develop": "gatsby develop",
+    "develop": "gatsby develop --host=0.0.0.0",

-    "serve": "gatsby serve,
+    "serve": "gatsby serve --host=0.0.0.0",

... with Visual Studio Code

Requirement:

• Install Remote Development extension pack

At first, follow the steps 1. to 3. of via docker-compose.

4.

Select Remote-Containers: Add Development Container Configuration Files... to add configuration files for Developing inside a Container.

5.

Add Prettier, ESLint, and your using extension to .devcontainer/devcontainer.json.

Ex:

    "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint"
    ]

6.

Run the Remote-Containers: Reopen in Container... command from the Command Palette (F1) or quick actions Status bar item.

cf: Developing inside a Container using Visual Studio Code Remote Development

License

View license information for the software contained in this image.

As with all Docker images, these likely also contain other software which may be under other licenses (such as Bash, etc from the base distribution, along with any direct or indirect dependencies of the primary software being contained).

As for any pre-built image usage, it is the image user's responsibility to ensure that any use of this image complies with any relevant licenses for all software contained within.