Develop Shopify NodeJS apps with VSCode Dev Container

If you work with VSCode and have your local environment directly in your machine I recommend starting to looking Docker, it’s an easy way to have your app running in a virtualized environment with its own OS and packages to each app. You might be able to use the Shopify CLI with all the features and develop your apps easier in an isolated environment.

Advantages to using VSCode Dev Container with Shopify apps

• Work in an environment exactly as production.
• Don’t install all the packages to all projects directly on your machine.
• Be more productive, avoiding issues and mistakes with node version or Shopify CLI version.

How to start

You just need to create these two files in your project’s root folder.

.devcontainer/devcontainer.json

{
  "name": "Node.js",
  "build": {
    "dockerfile": "Dockerfile",
    // Update 'VARIANT' to pick a Node version: 10, 12, 14
    "args": {"VARIANT": "14", "SHOPIFYCLI": "1.8.0"}
  },

  // Set *default* container specific settings.json values on container create.
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },

  // Add the IDs of extensions you want installed when the container is created.
  "extensions": ["dbaeumer.vscode-eslint"],

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  "forwardPorts": [80, 3456, 4040],

  // Use 'postCreateCommand' to run commands after the container is created.
  "postCreateCommand": "npm install",

  // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
  "remoteUser": "node"
}

.devcontainer/Dockerfile

ARG VARIANT="14-buster"

FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
    && apt-get -y install --no-install-recommends ruby

ARG SHOPIFYCLI="1.8.0"

RUN wget https://github.com/Shopify/shopify-app-cli/releases/download/v${SHOPIFYCLI}/shopify-cli-${SHOPIFYCLI}.deb \
    && sudo apt install ./shopify-cli-${SHOPIFYCLI}.deb && rm ./shopify-cli-${SHOPIFYCLI}.deb

To finish it, you just need to open your VSCode and type CMD + Shift + P, and execute the command below.

> Remote-Containers: Open Folder in Container

How Remote Containers feature works?

The Visual Studio Code Remote – Containers extension lets you use a Docker container as a full-featured development environment. It allows you to open any folder inside (or mounted into) a container and take advantage of Visual Studio Code’s full feature set. A devcontainer.json file in your project tells VS Code how to access (or create) a development container with a well-defined tool and runtime stack. This container can be used to run an application or to sandbox tools, libraries, or runtimes needed for working with a codebase.

Workspace files are mounted from the local file system or copied or cloned into the container. Extensions are installed and run inside the container, where they have full access to the tools, platform, and file system. This means that you can seamlessly switch your entire development environment just by connecting to a different container.

This lets VS Code provide a local-quality development experience — including full IntelliSense (completions), code navigation, and debugging — regardless of where your tools (or code) are located. In case you want more details about this feature, you can check the official doc.