devcontainers-contrib / features

🐳 Extra add-in features for Devcontainers and GitHub Codespaces
MIT License
240 stars 126 forks source link

Shopify CLI requires xdg-utils (namely xdg-open) in order to authenticate (Shopify CLI v3) #632

Open SimonShirley opened 1 month ago

SimonShirley commented 1 month ago

Feature id and version

ghcr.io/devcontainers-contrib/features/shopify-cli:1

Devcontainer base Image

mcr.microsoft.com/devcontainers/javascript-node:1-18

What happened?

See related issue: https://github.com/Shopify/cli/issues/3938

Request: Is it possible for xdg-utils to be included in the setup script?

Reasoning:

In order to authenticate with the Shopify CLI in version 3, xdg-open is called to authenticate with Shopify via the browser. However, when using the javascript-node image with the shopify-cli feature, xdg-open is unavailable.

I've managed to get it working locally with a custom Dockerfile:

ARG VARIANT
FROM mcr.microsoft.com/devcontainers/javascript-node:1-${VARIANT}

RUN export DEBIAN_FRONTEND=noninteractive \
    && apt-get update \
    && apt-get -y install --no-install-recommends xdg-utils \
    && apt-get autoremove \
    && apt-get clean -y \
    && rm -rf /var/lib/apt/lists/*

And by including the Ruby feature - ghcr.io/devcontainers/features/ruby:1 - as Shopify CLI has a dependency on Ruby v2.7.5+ for theme development.

If it's useful, here is my .devcontainer/devcontainer.json file:

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
{
    "name": "My Dev Container",

    // Use an image. More info: https://containers.dev/guide/dockerfile
    // "image": ""

    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
    "build": {
        "dockerfile": "Dockerfile",
        "args": {
            "VARIANT": "18"
        }
    },

    // Features to add to the dev container. More info: https://containers.dev/features.
    "features": {
        "ghcr.io/devcontainers/features/git:1": {},
        "ghcr.io/devcontainers/features/ruby:1": {},
        "ghcr.io/devcontainers-contrib/features/shopify-cli:1": {},
        "ghcr.io/devcontainers/features/github-cli:1": {}
    },

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

    // Use 'postCreateCommand' to run commands after the container is created.
    "postCreateCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",

    // Use 'postStartCommand' to run commands every time the container is started.
    "postStartCommand": "npm install",

    // Configure tool-specific properties.
    "customizations": {
        "vscode": {
            "extensions": ["Shopify.theme-check-vscode"]
        }       
    },

    "shutdownAction": "stopContainer"

    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
    // "remoteUser": "root"
}

Relevant log output

To run this command, log in to Shopify.
User verification code: [redacted]
👉 Press any key to open the login page on your browser
Opened link to start the auth process: https://accounts.shopify.com/activate-with-code?device_code%5Buser_code%5D=[redacted]
Error: spawn xdg-open ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:284:19)
    at onErrorNT (node:internal/child_process:477:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)