The problem:
Your precious devcontainer - meant to run on every conceivable OS - won't run on your new MacBook!

Let's fix this!
Use this dockerfile:

FROM mcr.microsoft.com/devcontainers/javascript-node:20

# Configuring Elm version
ARG ELM_VERSION=latest-0.19.1
ARG ELM_TEST_VERSION=latest-0.19.1
ARG ELM_FORMAT_VERSION=latest-0.19.1

# This Dockerfile adds a non-root user with sudo access. Update the “remoteUser” property in
# devcontainer.json to use it. More info: https://aka.ms/vscode-remote/containers/non-root-user.
ARG USERNAME=node
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Install elm using the provided method, elm-test and elm-format via npm
RUN export DEBIAN_FRONTEND=noninteractive \
    # Install Elm binary
    && curl -L -o elm.gz https://github.com/elm/compiler/releases/download/0.19.1/binary-for-linux-64-bit.gz \
    && gunzip elm.gz \
    && chmod +x elm \
    && mv elm /usr/local/bin/elm \
    #
    # Install elm-test and elm-format via npm
    && sudo -u ${USERNAME} npm install --global \
    elm-test@${ELM_TEST_VERSION} \
    elm-format@${ELM_FORMAT_VERSION} \
    #
    # [Optional] Update UID/GID if needed
    && if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
        groupmod --gid $USER_GID $USERNAME \
        && usermod --uid $USER_UID --gid $USER_GID $USERNAME \
        && chown -R $USER_UID:$USER_GID /home/$USERNAME; \
    fi \
    # Create the elm cache directory where we can mount a volume
    && mkdir /home/$USERNAME/.elm \
    && chown $USERNAME:$USERNAME /home/$USERNAME/.elm

# Install elm-test, elm-format, elm-watch, and git globally via npm
RUN npm install -g elm-test elm-format elm-watch elm-live git

You can still use the community provided devcontainer.json

{
    "name": "Elm (Community)",
    "dockerFile": "Dockerfile",
    // In order to make elm-watch pick up changes
    "containerEnv": {
        "CHOKIDAR_USEPOLLING": "true"
    },
    // Configure tool-specific properties.
    "customizations": {
        // Configure properties specific to VS Code.
        "vscode": {
            // Add the IDs of extensions you want installed when the container is created.
            "extensions": [
                "Elmtooling.elm-ls-vscode",
                "ritwickdey.LiveServer",
                "streetsidesoftware.code-spell-checker",
                "GitHub.copilot-chat",
                "GitHub.copilot",
                "eamodio.gitlens"
            ]
        }
    },
    "forwardPorts": [
    ],
    "remoteUser": "node",
    "mounts": [
        "source=vscode-devcontainer-elm-dependency-cache,target=/home/node/.elm,type=volume"
    ]
}

Getting stuff done

(>> means run in the terminal)

Run devcontainer
>>elm init
crate a folder named 'wwwroot' in the root of the project
- This folder contains the sites dependencies and must be deployed to the server
Add this line to .vscode/settings.json: "liveServer.settings.root": "/wwwroot"
- This will make elm serve the wwwroot folder as root of the server
Add a file named 'index.html' in wwwroot and add the following code:

<body>
    <h1>elm-the-complete-guide-navigation</h1>
    <div class="content"></div>
    <!--#todo: Fix cache busting by making the version update with each deploy-->
    <script src="elm.js?v=1.0.0.2"></script>
    <script>
        Elm.Main.init({ node: document.querySelector('.content') });
    </script>
</body>

Run >>npm install elm-live
Run >>elm-watch hot
Open 'wwwroot/index.html' using the live server

Blog

Run Elm in a devcontainer on apple silicon

Theodor Heiselberg

Getting stuff done

Join Our Newsletter. No Spam, Only the good stuff.

Related