VSCode on Agave

Owned by William Dizon
Last updated: Feb 02, 2023
3 min read

VSCode is for both managing remote files stored on supercomputer storage, as well as providing a rich IDE for development. This can be accomplished through the use of the Visual Studio Code CLI Server. Follow these steps to prepare a job allocation for the VSCode background server.

Set up VSCode CLI Server

Log into the Agave supercomputer start the VSCode command shortcut vscode. A separate job session will be created in the background to run the service daemon.

[wdizon@agave1:~]$ vscode * * Visual Studio Code Server * * By using the software, you agree to * the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and * the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement). * To grant access to the server, please log into https://github.com/login/device and use code 1EAB-9CE6

 

2. Review the previous output and identify both the github login URL and accompanying code:
..., please log into https://github.com/login/device and use code 1EAB-9CE6

The XXXX-XXXX code will be different on every invocation. This code connects your background VSCode daemon to github.com, which provides half the tunneling functionality; the other half is connecting your browser or VSCode IDE to the other end of the tunnel. The VSC Extension reaches out online to find any tunnels you’ve created through this process.

3. Open up the URL in your workstation browser:

First, log into your github account (required). The browser will them prompt you for the above code.

4. Authorize Github with the Green button:

5. The connection should now be complete:

6. The terminal session will now provide additional guidance for connecting your IDE:

To grant access to the server, ... Open this link in your browser https://vscode.dev/tunnel/agave/packages/7x/vscode

Connect with locally-installed VSCode IDE

  1. Install Remote - Tunnels extension in VSCode.

2. In the bottom-left of the IDE, click “Turn on Remote Tunnel Access” through the portrait icon:

3. Next, hit F1 and type in/select “Remote-Tunnels: Connect to Tunnel…”

4. It should be able to identify the name of the tunnel from the previous steps:

Open this link ... https://vscode.dev/tunnel/agave/packages/7x/vscode ^ tunnelname = agave

The name of the connected-to tunnel will appear in the IDE at the bottom left.

Connect with Browser-based IDE

You can connect directly to VSCode alternatively via your browser. While doable, it often requires additional steps to navigate your remote files vs a workstation-based IDE.

  1. Direct your browser to the URL from the previous step:

 

Arizona State University