DEV Community

Rafael Corrêa Gomes
Rafael Corrêa Gomes

Posted on • Updated on • Originally published at

How to setup VSCode (DevContainer) + Shopify Apps ( NodeJs)

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.


- 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.


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

  // Set *default* container specific settings.json values on container create.
  "settings": {
    "": "/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:
  "remoteUser": "node"
Enter fullscreen mode Exit fullscreen mode


ARG VARIANT="14-buster"


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


RUN wget${SHOPIFYCLI}/shopify-cli-${SHOPIFYCLI}.deb \
    && sudo apt install ./shopify-cli-${SHOPIFYCLI}.deb && rm ./shopify-cli-${SHOPIFYCLI}.deb
Enter fullscreen mode Exit fullscreen mode

To finish it, install the Remote Containers extension.

Remote Container - Visual Studio Code

Then you just need to open your VSCode and type CMD + Shift + P and execute the command below.

> Remote-Containers: Open Folder in Container
Enter fullscreen mode Exit fullscreen mode

Discussion (0)