Fix devcontainer for website development #8967

CronKz · 2025-12-03T22:52:34Z

Add missing dependency and config in devcontainer

Add libnss3 package (needed by gatsby / puppeteer)
Use host network to correctly forward ports to host machine

glen-84 · 2025-12-04T08:14:13Z

Port 8000 is being auto-forwarded, but the page doesn't load. It doesn't seem to load locally via curl http://localhost:8000 either.

Do we know why the forwarding is not working? I think it's best to avoid host networking unless there is no other option.

Did you try connecting after adding the libnss3 package, but before enabling host networking?

CronKz · 2025-12-04T17:31:29Z

Port 8000 is being auto-forwarded, but the page doesn't load. It doesn't seem to load locally via curl http://localhost:8000 either.

Do we know why the forwarding is not working? I think it's best to avoid host networking unless there is no other option.

I tried to figure it out, but could not find the reason for it. Using the host network was the only solution I found so far.

Did you try connecting after adding the libnss3 package, but before enabling host networking?

I got the page running inside the container, but it still failed to open it without the host network option.

I made a mistake: Previously installed google chrome (see Option 2 below) and forgot the no-chache option on build.
Actually libnss3 is only one of many needed dependencies: Debian (e.g. Ubuntu) Dependencies

To keep the build cache of all other steps, I moved the installation of those packages to the end.
Below are 2 proposals. Let me know which one looks better to you.

Option 1 - Installing dependencies manually

# Use the base image specified in the devcontainer.json
FROM mcr.microsoft.com/devcontainers/base:bullseye

# Install dependencies
RUN apt-get update && apt-get install -y \
    wget \
    apt-transport-https \
    curl \
    gnupg2 \
    lsb-release \
    software-properties-common \
    openssh-server

# Configure SSH server
RUN mkdir /var/run/sshd \
    && echo 'root:Docker!' | chpasswd \
    && sed -i 's/#PermitRootLogin prohibit-password/PermitRootLogin yes/' /etc/ssh/sshd_config \
    && sed -i 's@session    required     pam_loginuid.so@session    optional     pam_loginuid.so@g' /etc/pam.d/sshd \
    && echo "export VISIBLE=now" >> /etc/profile

# Expose SSH port
EXPOSE 22

# Start SSH service
CMD ["/usr/sbin/sshd", "-D"]

# Install .NET SDKs (6, 7, 8, 9, and 10)
RUN wget https://dot.net/v1/dotnet-install.sh -O dotnet-install.sh \
    && chmod +x dotnet-install.sh \
    && ./dotnet-install.sh --channel 6.0 --install-dir /usr/share/dotnet \
    && ./dotnet-install.sh --channel 7.0 --install-dir /usr/share/dotnet \
    && ./dotnet-install.sh --channel 8.0 --install-dir /usr/share/dotnet \
    && ./dotnet-install.sh --channel 9.0 --install-dir /usr/share/dotnet \
    && ./dotnet-install.sh --channel 10.0 --install-dir /usr/share/dotnet \
    && ln -s /usr/share/dotnet/dotnet /usr/bin/dotnet

# Install Node.js LTS
RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - \
    && apt-get install -y nodejs

# Install Yarn
RUN npm install -g yarn

# Install GitHub CLI
RUN curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | gpg --dearmor -o /usr/share/keyrings/githubcli-archive-keyring.gpg \
    && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
    && apt-get update \
    && apt-get install -y gh

# Install Azure CLI
RUN curl -sL https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor | tee /etc/apt/trusted.gpg.d/microsoft.asc.gpg > /dev/null \
    && AZ_REPO=$(lsb_release -cs) \
    && echo "deb [arch=$(dpkg --print-architecture)] https://packages.microsoft.com/repos/azure-cli/ $AZ_REPO main" | tee /etc/apt/sources.list.d/azure-cli.list \
    && apt-get update \
    && apt-get install -y azure-cli

# Install puppeteer dependencies (see https://pptr.dev/troubleshooting#chrome-doesnt-launch-on-linux)
RUN apt-get install -y \
    ca-certificates \
    fonts-liberation \
    libasound2 \
    libatk-bridge2.0-0 \
    libatk1.0-0 \
    libc6 \
    libcairo2 \
    libcups2 \
    libdbus-1-3 \
    libexpat1 \
    libfontconfig1 \
    libgbm1 \
    libgcc1 \
    libglib2.0-0 \
    libgtk-3-0 \
    libnspr4 \
    libnss3 \
    libpango-1.0-0 \
    libpangocairo-1.0-0 \
    libstdc++6 \
    libx11-6 \
    libx11-xcb1 \
    libxcb1 \
    libxcomposite1 \
    libxcursor1 \
    libxdamage1 \
    libxext6 \
    libxfixes3 \
    libxi6 \
    libxrandr2 \
    libxrender1 \
    libxss1 \
    libxtst6 \
    lsb-release \
    xdg-utils

# Clean up
RUN rm dotnet-install.sh \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

Option 2 - Installing Google Chrome using .deb

# Use the base image specified in the devcontainer.json
FROM mcr.microsoft.com/devcontainers/base:bullseye

# Install dependencies
RUN apt-get update && apt-get install -y \
    wget \
    apt-transport-https \
    curl \
    gnupg2 \
    lsb-release \
    software-properties-common \
    openssh-server

# Configure SSH server
RUN mkdir /var/run/sshd \
    && echo 'root:Docker!' | chpasswd \
    && sed -i 's/#PermitRootLogin prohibit-password/PermitRootLogin yes/' /etc/ssh/sshd_config \
    && sed -i 's@session    required     pam_loginuid.so@session    optional     pam_loginuid.so@g' /etc/pam.d/sshd \
    && echo "export VISIBLE=now" >> /etc/profile

# Expose SSH port
EXPOSE 22

# Start SSH service
CMD ["/usr/sbin/sshd", "-D"]

# Install .NET SDKs (6, 7, 8, 9, and 10)
RUN wget https://dot.net/v1/dotnet-install.sh -O dotnet-install.sh \
    && chmod +x dotnet-install.sh \
    && ./dotnet-install.sh --channel 6.0 --install-dir /usr/share/dotnet \
    && ./dotnet-install.sh --channel 7.0 --install-dir /usr/share/dotnet \
    && ./dotnet-install.sh --channel 8.0 --install-dir /usr/share/dotnet \
    && ./dotnet-install.sh --channel 9.0 --install-dir /usr/share/dotnet \
    && ./dotnet-install.sh --channel 10.0 --install-dir /usr/share/dotnet \
    && ln -s /usr/share/dotnet/dotnet /usr/bin/dotnet

# Install Node.js LTS
RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - \
    && apt-get install -y nodejs

# Install Yarn
RUN npm install -g yarn

# Install GitHub CLI
RUN curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | gpg --dearmor -o /usr/share/keyrings/githubcli-archive-keyring.gpg \
    && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
    && apt-get update \
    && apt-get install -y gh

# Install Azure CLI
RUN curl -sL https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor | tee /etc/apt/trusted.gpg.d/microsoft.asc.gpg > /dev/null \
    && AZ_REPO=$(lsb_release -cs) \
    && echo "deb [arch=$(dpkg --print-architecture)] https://packages.microsoft.com/repos/azure-cli/ $AZ_REPO main" | tee /etc/apt/sources.list.d/azure-cli.list \
    && apt-get update \
    && apt-get install -y azure-cli

# Install Google Chrome for puppeteer dependencies (see https://pptr.dev/troubleshooting#chrome-doesnt-launch-on-linux)
RUN wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb \
    && apt-get install -y ./google-chrome-stable_current_amd64.deb

# Clean up
RUN rm dotnet-install.sh google-chrome-stable_current_amd64.deb \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

Option 2 is a bit less verbose compared to running-puppeteer-in-docker, but would work too.

michaelstaib · 2025-12-04T19:02:59Z

.devcontainer/devcontainer.json

          "moby": "true"
      }
  },
+  "runArgs": ["--network=host"],


This should not be needed as devcontainers have port forwarding builtin.

It doesn't seem to work for the website.

The ports are forwared automatically, regardless of this setting, but connection to the website fails (endless loading) without this option.

Also removing the --host 0.0.0.0 option here does also not resolve the underlying issue of not reaching the website without "runArgs": ["--network=host"],:

graphql-platform/website/package.json

Line 17 in 2affc65

"develop": "gatsby develop --verbose --host 0.0.0.0",

In that context, using "runArgs": ["--network=host"], enables you to access the website over your local network ip, to debug on actual phones instead of emulated ones.

This does disable Docker's network isolation, which is a minor security consideration in a dev environment. So I am not inclined to do that and rather figure out why port forwarding is a problem.

CronKz added 2 commits December 3, 2025 23:44

Fix: Add libnss3 - used by puppeteer / gatsby

ab24c12

Fix: Use host network to forward ports

81bd2a4

michaelstaib requested changes Dec 4, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Fix devcontainer for website development #8967

Fix devcontainer for website development #8967

CronKz commented Dec 3, 2025

Uh oh!

glen-84 commented Dec 4, 2025

Uh oh!

CronKz commented Dec 4, 2025

Uh oh!

michaelstaib Dec 4, 2025 •

edited

Loading

Uh oh!

glen-84 Dec 4, 2025

Uh oh!

CronKz Dec 5, 2025

Uh oh!

michaelstaib Dec 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Fix devcontainer for website development #8967

Are you sure you want to change the base?

Fix devcontainer for website development #8967

Conversation

CronKz commented Dec 3, 2025

Uh oh!

glen-84 commented Dec 4, 2025

Uh oh!

CronKz commented Dec 4, 2025

Uh oh!

michaelstaib Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

glen-84 Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

CronKz Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

michaelstaib Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

michaelstaib Dec 4, 2025 •

edited

Loading