edpike365/gatsbyjs-devcontainer repository overview

⁠Overview

This Image lets you use VSCode's devcontainers⁠ to edit Gatsby projects.

VSCode Dev Containers let you edit Gatsby projects with isolated versions of Gatsby and Node. You will be able to run CLI commands for gatsby, node, npm, etc.

HOWEVER, you will need some supporting files from github, explained in "Using" below!!!

The supporting VSCode Dev Container files (devcontainer.json and Dockerfile) are in GitHub⁠, in a corresponding "tag" folder.

Tag naming convention: gatsbyVersion_nodeVersion. 3latest_node16lts = gatsby@<4.0.0 and node:16

KNOWN ISSUES:

• There is a bug in MS js-debug VSCode extension. It will try to auto attach to npm or gatsby commands. Instructions to work around the problem are in the devcontainer.jon comments.
• I have not tried debugging Gatsby in the devcontainer yet.

⁠- Image Contents

The Dockerfile for each image is in the corresponding GitHub folder.

You can modify the image from this Docker repo:

• edit the Dockerfile
• add more commands or pull a different version
• F1 -> Remote Containers: Rebuild

To Modify the base image: Download Dockerfile:tag to .devcontainer, rename it to Dockerfile, modify and use it with F1 -> Remote Containers: Rebuild

Example for Dockerfile:3latest_node16lts⁠

FROM node:16

# Avoid warnings by switching to noninteractive
ENV DEBIAN_FRONTEND=noninteractive

# The node image comes with a base non-root 'node' user which this Dockerfile
# gives sudo access. However, for Linux, this user's GID/UID must match your local
# user UID/GID to avoid permission issues with bind mounts. Update USER_UID / USER_GID 
# if yours is not 1000. See https://aka.ms/vscode-remote/containers/non-root-user.
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Configure apt and install packages
RUN apt-get update \
    && apt-get -y install --no-install-recommends apt-utils dialog 2>&1 \ 
    #
    # Verify git and needed tools are installed
    && apt-get -y install git iproute2 procps \
    #
    # Remove outdated yarn from /opt and install via package 
    # so it can be easily updated via apt-get upgrade yarn
    && rm -rf /opt/yarn-* \
    && rm -f /usr/local/bin/yarn \
    && rm -f /usr/local/bin/yarnpkg \
    && apt-get install -y curl apt-transport-https lsb-release \
    #
    # Install tslint and typescript globally, latest gatsby-cli v3
    && npm install -g tslint typescript gatsby-cli@"<4.0.0" \
    #
    # [Optional] Update a non-root user to match UID/GID - see https://aka.ms/vscode-remote/containers/non-root-user.
    && if [ "$USER_GID" != "1000" ]; then groupmod node --gid $USER_GID; fi \
    && if [ "$USER_UID" != "1000" ]; then usermod --uid $USER_UID node; fi \
    # [Optional] Add sudo support for non-root user
    && apt-get install -y sudo \
    && echo node ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/node \
    && chmod 0440 /etc/sudoers.d/node \
    #
    # Clean up
    && apt-get autoremove -y \
    && apt-get clean -y \
    && rm -rf /var/lib/apt/lists/*

# Switch back to dialog for any ad-hoc use of apt-get
ENV DEBIAN_FRONTEND=

⁠- devcontainer.json Contents

Find the proper devcontainer.json file in the corresponding Github⁠ folder, as explained above.

View the file contents to see which VSCode extensions are installed for you and some other useful instructions. You can also see them once you run your project in the devcontainer. They will appear in the "extensions" tab of VSCode, under DEV CONTAINERS: GATSBY - INSTALLED .

Once you copy devcontainer.json to your project's .devcontainer folder, you can customize it. Rebuild the container by using VSCode: F1 -> Remote Containers: Rebuild

⁠- Using

1. If you are new to VSCode devcontainers, follow the instructions above.
2. In your Gatsby project root, create a .devcontainer directory.
3. Go to https://github.com/EdPike365/gatsbyjs-devcontainer⁠
4. Find the folder corresponding to the version you want.
5. From that folder, copy the devcontainer.json and Dockerfile into the .devcontainer directory. I recommend just copying and pasting the contents directly from github.
6. In VSCode, press F1 -> Remote Containers: Rebuild and open in container (or similar wording). VSCode may also prompt you when it sees that you have the .devcontainer files.