This commit is contained in:
Christof Marti
2023-10-02 16:08:10 +02:00
parent 73cc570f58
commit 01edf51e0f
15 changed files with 53 additions and 334 deletions

View File

@@ -6,6 +6,7 @@ RUN /root/install-vscode.sh
RUN git config --system codespaces-theme.hide-status 1
USER node
RUN npm install -g node-gyp
RUN YARN_CACHE="$(yarn cache dir)" && rm -rf "$YARN_CACHE" && ln -s /vscode-dev/yarn-cache "$YARN_CACHE"
USER root

View File

@@ -1,10 +1,12 @@
# Code - OSS Development Container
This dev container includes configuration for a development container for working with Code - OSS in a local container. For using [GitHub Codespaces](https://github.com/features/codespaces) follow the [prebuilt setup](prebuilt/README.md) which installs VNC for displaying the application window.
[![Open in Dev Containers](https://img.shields.io/static/v1?label=Dev%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/vscode)
> **Note:** You will need X11's `DISPLAY` or Wayland's `WAYLAND_DISPLAY` environment variable set locally to allow for the Code - OSS window to display. See [Running GUI app on WSL](https://learn.microsoft.com/en-us/windows/wsl/tutorials/gui-apps) for Windows and [Quartz](https://www.xquartz.org) for Mac.
This repository includes configuration for a development container for working with Code - OSS in a local container or using [GitHub Codespaces](https://github.com/features/codespaces).
## Quick start
## Quick start - local
If you already have VS Code and Docker installed, you can click the badge above or [here](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/vscode) to get started. Clicking these links will cause VS Code to automatically install the Dev Containers extension if needed, clone the source code into a container volume, and spin up a dev container for use.
1. Install Docker Desktop or Docker for Linux on your local machine. (See [docs](https://aka.ms/vscode-remote/containers/getting-started) for additional details.)
@@ -24,9 +26,9 @@ This dev container includes configuration for a development container for workin
- Use the WSL extension for VS Code to open the cloned folder in WSL.
- Press <kbd>F1</kbd> and select **Dev Containers: Reopen in Container**.
Next: **[Try it out!](#try-it)**
> **Note:** For developing the desktop app locally, you will need X11's `DISPLAY` or Wayland's `WAYLAND_DISPLAY` environment variable set to allow for the Code - OSS window to display. See [Running GUI app on WSL](https://learn.microsoft.com/en-us/windows/wsl/tutorials/gui-apps) for Windows and [Quartz](https://www.xquartz.org) for Mac.
## Try it
### Try it
To start working with Code - OSS, follow these steps:
@@ -34,7 +36,7 @@ To start working with Code - OSS, follow these steps:
```bash
yarn install
bash scripts/code.sh
./scripts/code.sh
```
2. You should now see Code - OSS!
@@ -45,12 +47,32 @@ Next, let's try debugging.
2. Go to your local VS Code client, and use the **Run / Debug** view to launch the **VS Code** configuration. (Typically the default, so you can likely just press <kbd>F5</kbd>).
> **Note:** If launching times out, you can increase the value of `timeout` in the "VS Code", "Attach Main Process", "Attach Extension Host", and "Attach to Shared Process" configurations in [launch.json](../../.vscode/launch.json). However, running `scripts/code.sh` first will set up Electron which will usually solve timeout issues.
> **Note:** If launching times out, you can increase the value of `timeout` in the "VS Code", "Attach Main Process", "Attach Extension Host", and "Attach to Shared Process" configurations in [launch.json](../../.vscode/launch.json). However, running `./scripts/code.sh` first will set up Electron which will usually solve timeout issues.
3. After a bit, Code - OSS will appear with the debugger attached!
Enjoy!
## Notes
### Notes
The container comes with VS Code Insiders installed. To run it from an Integrated Terminal use `VSCODE_IPC_HOOK_CLI= /usr/bin/code-insiders .`.
## Quick start - GitHub Codespaces
1. From the [microsoft/vscode GitHub repository](https://github.com/microsoft/vscode), click on the **Code** dropdown, select **Open with Codespaces**, and then click on **New codespace**. If prompted, select the **Standard** machine size (which is also the default).
> **Note:** You will not see these options within GitHub if you are not in the Codespaces beta.
### Try it
To start working with Code - OSS Web, follow these steps:
1. Open a terminal (<kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>\`</kbd>) and type the following commands:
```bash
yarn install
yarn compile && yarn compile-web
./scripts/code-web.sh
```
2. You should now see Code - OSS Web open in your browser!

View File

@@ -1,5 +1,5 @@
{
"name": "Code - OSS with X11/Wayland",
"name": "Code - OSS",
"build": {
"dockerfile": "Dockerfile"
},
@@ -12,11 +12,24 @@
"type": "volume"
}
],
"postCreateCommand": "./.devcontainer/post-create.sh",
"customizations": {
"vscode": {
"settings": {
"resmon.show.battery": false,
"resmon.show.cpufreq": false
},
"extensions": [
"dbaeumer.vscode-eslint",
"EditorConfig.EditorConfig",
"GitHub.vscode-pull-request-github",
"ms-vscode.vscode-github-issue-notebooks",
"ms-vscode.vscode-selfhost-test-provider",
"mutantdino.resourcemonitor"
]
}
},
"hostRequirements": {
"memory": "9gb"
}
}

4
.devcontainer/post-create.sh Executable file
View File

@@ -0,0 +1,4 @@
#!/bin/sh
yarn install --network-timeout 180000
yarn electron

View File

@@ -1,108 +0,0 @@
# Code - OSS Development Container
[![Open in Dev Containers](https://img.shields.io/static/v1?label=Dev%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/vscode)
This repository includes configuration for a development container for working with Code - OSS in a local container or using [GitHub Codespaces](https://github.com/features/codespaces).
> **Tip:** The default VNC password is `vscode`. The VNC server runs on port `5901` and a web client is available on port `6080`.
## Quick start - local
If you already have VS Code and Docker installed, you can click the badge above or [here](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/vscode) to get started. Clicking these links will cause VS Code to automatically install the Dev Containers extension if needed, clone the source code into a container volume, and spin up a dev container for use.
1. Install Docker Desktop or Docker for Linux on your local machine. (See [docs](https://aka.ms/vscode-remote/containers/getting-started) for additional details.)
2. **Important**: Docker needs at least **4 Cores and 8 GB of RAM** to run a full build with **9 GB of RAM** being recommended. If you are on macOS, or are using the old Hyper-V engine for Windows, update these values for Docker Desktop by right-clicking on the Docker status bar item and going to **Preferences/Settings > Resources > Advanced**.
> **Note:** The [Resource Monitor](https://marketplace.visualstudio.com/items?itemName=mutantdino.resourcemonitor) extension is included in the container so you can keep an eye on CPU/Memory in the status bar.
3. Install [Visual Studio Code Stable](https://code.visualstudio.com/) or [Insiders](https://code.visualstudio.com/insiders/) and the [Dev Containers](https://aka.ms/vscode-remote/download/containers) extension.
![Image of Dev Containers extension](https://microsoft.github.io/vscode-remote-release/images/dev-containers-extn.png)
> **Note:** The Dev Containers extension requires the Visual Studio Code distribution of Code - OSS. See the [FAQ](https://aka.ms/vscode-remote/faq/license) for details.
4. Press <kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> or <kbd>F1</kbd> and select **Dev Containers: Clone Repository in Container Volume...**.
> **Tip:** While you can use your local source tree instead, operations like `yarn install` can be slow on macOS or when using the Hyper-V engine on Windows. We recommend the "clone repository in container" approach instead since it uses "named volume" rather than the local filesystem.
5. Type `https://github.com/microsoft/vscode` (or a branch or PR URL) in the input box and press <kbd>Enter</kbd>.
6. After the container is running, open a web browser and go to [http://localhost:6080](http://localhost:6080), or use a [VNC Viewer][def] to connect to `localhost:5901` and enter `vscode` as the password.
Anything you start in VS Code, or the integrated terminal, will appear here.
Next: **[Try it out!](#try-it)**
## Quick start - GitHub Codespaces
1. From the [microsoft/vscode GitHub repository](https://github.com/microsoft/vscode), click on the **Code** dropdown, select **Open with Codespaces**, and then click on **New codespace**. If prompted, select the **Standard** machine size (which is also the default).
> **Note:** You will not see these options within GitHub if you are not in the Codespaces beta.
2. After the codespace is up and running in your browser, press <kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> or <kbd>F1</kbd> and select **Ports: Focus on Ports View**.
3. You should see **VNC web client (6080)** under in the list of ports. Select the line and click on the globe icon to open it in a browser tab.
> **Tip:** If you do not see the port, <kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> or <kbd>F1</kbd>, select **Forward a Port** and enter port `6080`.
4. In the new tab, you should see noVNC. Click **Connect** and enter `vscode` as the password.
Anything you start in VS Code, or the integrated terminal, will appear here.
Next: **[Try it out!](#try-it)**
### Using VS Code with GitHub Codespaces
You may see improved VNC responsiveness when accessing a codespace from VS Code client since you can use a [VNC Viewer][def]. Here's how to do it.
1. Install [Visual Studio Code Stable](https://code.visualstudio.com/) or [Insiders](https://code.visualstudio.com/insiders/) and the the [GitHub Codespaces extension](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces).
> **Note:** The GitHub Codespaces extension requires the Visual Studio Code distribution of Code - OSS.
2. After the VS Code is up and running, press <kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> or <kbd>F1</kbd>, choose **Codespaces: Create New Codespace**, and use the following settings:
- `microsoft/vscode` for the repository.
- Select any branch (e.g. **main**) - you can select a different one later.
- Choose **Standard** (4-core, 8GB) as the size.
3. After you have connected to the codespace, you can use a [VNC Viewer][def] to connect to `localhost:5901` and enter `vscode` as the password.
> **Tip:** You may also need change your VNC client's **Picture Quality** setting to **High** to get a full color desktop.
4. Anything you start in VS Code, or the integrated terminal, will appear here.
Next: **[Try it out!](#try-it)**
## Try it
This container uses the [Fluxbox](http://fluxbox.org/) window manager to keep things lean. **Right-click on the desktop** to see menu options. It works with GNOME and GTK applications, so other tools can be installed if needed.
> **Note:** You can also set the resolution from the command line by typing `set-resolution`.
To start working with Code - OSS, follow these steps:
1. In your local VS Code client, open a terminal (<kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>\`</kbd>) and type the following commands:
```bash
yarn install
bash scripts/code.sh
```
2. After the build is complete, open a web browser or a [VNC Viewer][def] to connect to the desktop environment as described in the quick start and enter `vscode` as the password.
3. You should now see Code - OSS!
Next, let's try debugging.
1. Shut down Code - OSS by clicking the box in the upper right corner of the Code - OSS window through your browser or VNC viewer.
2. Go to your local VS Code client, and use the **Run / Debug** view to launch the **VS Code** configuration. (Typically the default, so you can likely just press <kbd>F5</kbd>).
> **Note:** If launching times out, you can increase the value of `timeout` in the "VS Code", "Attach Main Process", "Attach Extension Host", and "Attach to Shared Process" configurations in [launch.json](../../.vscode/launch.json). However, running `scripts/code.sh` first will set up Electron which will usually solve timeout issues.
3. After a bit, Code - OSS will appear with the debugger attached!
Enjoy!
[def]: https://www.realvnc.com/en/connect/download/viewer/

View File

@@ -1,15 +0,0 @@
#!/usr/bin/env bash
# This file establishes a basline for the repository before any steps in the "prepare.sh"
# are run. Its just a find command that filters out a few things we don't need to watch.
set -e
SOURCE_FOLDER="${1:-"."}"
CACHE_FOLDER="${2:-"$HOME/.devcontainer-cache"}"
cd "${SOURCE_FOLDER}"
echo "[$(date)] Generating ""before"" manifest..."
mkdir -p "${CACHE_FOLDER}"
find -L . -not -path "*/.git/*" -and -not -path "${CACHE_FOLDER}/*.manifest" -type f > "${CACHE_FOLDER}/before.manifest"
echo "[$(date)] Done!"

View File

@@ -1,28 +0,0 @@
#!/bin/bash
# This file simply wraps the docker build command to build an image that includes
# a cache.tar file with the result of "prepare.sh" inside of it. See cache.Dockerfile
# for the steps that are actually taken to do this.
set -e
SCRIPT_PATH="$(cd $(dirname "${BASH_SOURCE[0]}") && pwd)"
CONTAINER_IMAGE_REPOSITORY="$1"
BRANCH="${2:-"main"}"
if [ "${CONTAINER_IMAGE_REPOSITORY}" = "" ]; then
echo "Container repository not specified!"
exit 1
fi
TAG="branch-${BRANCH//\//-}"
echo "[$(date)] ${BRANCH} => ${TAG}"
cd "${SCRIPT_PATH}/../../.."
echo "[$(date)] Starting image build and push..."
export DOCKER_BUILDKIT=1
docker buildx create --use --name vscode-dev-containers
docker run --privileged --rm tonistiigi/binfmt --install all
docker buildx build --push --platform linux/amd64,linux/arm64 -t ${CONTAINER_IMAGE_REPOSITORY}:"${TAG}" -f "${SCRIPT_PATH}/cache.Dockerfile" .
echo "[$(date)] Done!"

View File

@@ -1,23 +0,0 @@
#!/usr/bin/env bash
# This file is used to archive off a copy of any differences in the source tree into another location
# in the image. Once the codespace / container is up, this will be restored into its proper location.
set -e
SOURCE_FOLDER="${1:-"."}"
CACHE_FOLDER="${2:-"$HOME/.devcontainer-cache"}"
if [ ! -d "${CACHE_FOLDER}" ]; then
echo "No cache folder found. Be sure to run before-cache.sh to set one up."
exit 1
fi
echo "[$(date)] Starting cache operation..."
cd "${SOURCE_FOLDER}"
echo "[$(date)] Determining diffs..."
find -L . -not -path "*/.git/*" -and -not -path "${CACHE_FOLDER}/*.manifest" -type f > "${CACHE_FOLDER}/after.manifest"
grep -Fxvf "${CACHE_FOLDER}/before.manifest" "${CACHE_FOLDER}/after.manifest" > "${CACHE_FOLDER}/cache.manifest"
echo "[$(date)] Archiving diffs..."
tar -cf "${CACHE_FOLDER}/cache.tar" --totals --files-from "${CACHE_FOLDER}/cache.manifest"
echo "[$(date)] Done! $(du -h "${CACHE_FOLDER}/cache.tar")"

View File

@@ -1,24 +0,0 @@
# This dockerfile is used to build up from a base image to create an image a cache.tar file containing the results of running "prepare.sh".
# Other image contents: https://github.com/microsoft/vscode-dev-containers/blob/master/repository-containers/images/github.com/microsoft/vscode/.devcontainer/base.Dockerfile
# This first stage generates cache.tar
FROM mcr.microsoft.com/vscode/devcontainers/repos/microsoft/vscode:dev as cache
ARG USERNAME=node
ARG CACHE_FOLDER="/home/${USERNAME}/.devcontainer-cache"
COPY --chown=${USERNAME}:${USERNAME} . /repo-source-tmp/
RUN mkdir -p ${CACHE_FOLDER} && chown ${USERNAME} ${CACHE_FOLDER} /repo-source-tmp \
&& su ${USERNAME} -c "\
cd /repo-source-tmp \
&& .devcontainer/prebuilt/cache/before-cache.sh . ${CACHE_FOLDER} \
&& .devcontainer/prebuilt/prepare.sh . ${CACHE_FOLDER} \
&& .devcontainer/prebuilt/cache/cache-diff.sh . ${CACHE_FOLDER}"
# This second stage starts fresh and just copies in cache.tar from the previous stage. The related
# devcontainer.json file is then setup to have postCreateCommand fire restore-diff.sh to expand it.
FROM mcr.microsoft.com/vscode/devcontainers/repos/microsoft/vscode:dev as dev-container
ARG USERNAME=node
ARG CACHE_FOLDER="/home/${USERNAME}/.devcontainer-cache"
RUN mkdir -p "${CACHE_FOLDER}" \
&& chown "${USERNAME}:${USERNAME}" "${CACHE_FOLDER}" \
&& su ${USERNAME} -c "git config --global codespaces-theme.hide-status 1"
COPY --from=cache ${CACHE_FOLDER}/cache.tar ${CACHE_FOLDER}/

View File

@@ -1,29 +0,0 @@
#!/usr/bin/env bash
# This file expands the cache.tar file in the image that contains the results of "prepare.sh"
# on top of the source tree. It runs as a postCreateCommand which runs after the container/codespace
# is already up where you would typically run a command like "yarn install".
set -e
SOURCE_FOLDER="$(cd "${1:-"."}" && pwd)"
CACHE_FOLDER="${2:-"$HOME/.devcontainer-cache"}"
if [ ! -d "${CACHE_FOLDER}" ]; then
echo "No cache folder found."
exit 0
fi
echo "[$(date)] Expanding $(du -h "${CACHE_FOLDER}/cache.tar") file to ${SOURCE_FOLDER}..."
cd "${SOURCE_FOLDER}"
# Ensure user/group is correct if the UID/GID was changed for some reason
echo "+1000 +$(id -u)" > "${CACHE_FOLDER}/cache-owner-map"
echo "+1000 +$(id -g)" > "${CACHE_FOLDER}/cache-group-map"
# Untar to workspace folder, preserving permissions and order, but mapping GID/UID if required
tar --owner-map="${CACHE_FOLDER}/cache-owner-map" --group-map="${CACHE_FOLDER}/cache-group-map" -xpsf "${CACHE_FOLDER}/cache.tar"
rm -rf "${CACHE_FOLDER}"
echo "[$(date)] Done!"
# Change ownership of chrome-sandbox
sudo chown root .build/electron/chrome-sandbox
sudo chmod 4755 .build/electron/chrome-sandbox

View File

@@ -1,44 +0,0 @@
{
"name": "Code - OSS with VNC",
// Image contents: https://github.com/microsoft/vscode-dev-containers/blob/master/repository-containers/images/github.com/microsoft/vscode/.devcontainer/base.Dockerfile
"image": "mcr.microsoft.com/vscode/devcontainers/repos/microsoft/vscode:branch-main",
"overrideCommand": false,
"runArgs": [ "--init", "--security-opt", "seccomp=unconfined", "--shm-size=1g"],
// VS Code extensions and settings
"customizations": {
"vscode": {
"settings": {
"resmon.show.battery": false,
"resmon.show.cpufreq": false
},
"extensions": [
"dbaeumer.vscode-eslint",
"mutantdino.resourcemonitor"
]
}
},
// noVNC, VNC
"forwardPorts": [6080, 5901],
"portsAttributes": {
"6080": {
"label": "VNC web client (noVNC)",
"onAutoForward": "silent"
},
"5901": {
"label": "VNC TCP port",
"onAutoForward": "silent"
}
},
// Optionally loads a cached yarn install for the repo
"postCreateCommand": ".devcontainer/prebuilt/cache/restore-diff.sh",
"remoteUser": "node",
"hostRequirements": {
"memory": "9gb"
}
}

View File

@@ -1,9 +0,0 @@
#!/usr/bin/env bash
# This file contains the steps that should be run when building a "cache" image with contents that should be
# layered directly **on top of the source tree** once a dev container is created. This avoids having to run long
# running commands like "yarn install" from the ground up. Developers (and should) still run these commands
# after the actual dev container is created, but only differences will be processed.
yarn install --network-timeout 180000
yarn electron

View File

@@ -1,41 +0,0 @@
name: VS Code Repo Dev Container Cache Image Generation
on:
workflow_dispatch:
push:
# Currently doing this for main, but could be done for PRs as well
branches:
- "main"
# Only updates to these files result in changes to installed packages, so skip otherwise
paths:
- "**/package-lock.json"
- "**/yarn.lock"
jobs:
devcontainer:
name: Generate cache image
runs-on: ubuntu-latest
steps:
- name: Checkout
id: checkout
uses: actions/checkout@v4
- name: Azure CLI login
id: az_login
uses: azure/login@92a5484dfaf04ca78a94597f4f19fea633851fa2
with:
creds: ${{ secrets.AZ_ACR_CREDS }}
- name: Build and push
id: build_and_push
run: |
set -e
ACR_REGISTRY_NAME=$(echo ${{ secrets.CONTAINER_IMAGE_REGISTRY }} | grep -oP '(.+)(?=\.azurecr\.io)')
az acr login --name $ACR_REGISTRY_NAME
GIT_BRANCH=$(echo "${{ github.ref }}" | grep -oP 'refs/(heads|tags)/\K(.+)')
if [ "$GIT_BRANCH" == "" ]; then GIT_BRANCH=main; fi
.devcontainer/prebuilt/cache/build-cache-image.sh "${{ secrets.CONTAINER_IMAGE_REGISTRY }}/public/vscode/devcontainers/repos/microsoft/vscode" "${GIT_BRANCH}"

View File

@@ -1,4 +1,4 @@
FROM mcr.microsoft.com/vscode/devcontainers/repos/microsoft/vscode
FROM mcr.microsoft.com/devcontainers/base:ubuntu
MAINTAINER Microsoft
RUN apt-get install -y software-properties-common python
@@ -11,4 +11,4 @@ RUN mkdir /var/www
ADD app.js /var/www/app.js
CMD ["/usr/bin/node", "/var/www/app.js"]
CMD ["/usr/bin/node", "/var/www/app.js"]

View File

@@ -14,7 +14,7 @@
}
},
{
"c": " mcr.microsoft.com/vscode/devcontainers/repos/microsoft/vscode",
"c": " mcr.microsoft.com/devcontainers/base:ubuntu",
"t": "source.dockerfile",
"r": {
"dark_plus": "default: #D4D4D4",
@@ -391,4 +391,4 @@
"light_modern": "default: #3B3B3B"
}
}
]
]