VS Code Extension

Daytona’s VS Code extension integrates Visual Studio Code, appearing as a tab on the left-hand side alongside your default tabs in VS Code like File Explorer, Search, Source Control, etc, to streamline your workflow and boost productivity.

The extension allows you to have a frictionless experience of opening a standardized development environment, creating and accessing your Daytona Workspaces based on git repositories. It offers convenient workspace management, profile control, and instant team information access — all directly within VS Code, removing the hassle of going to a web browser, opening the Daytona URL and creating projects upon initial configuration.

Prerequisites

Before you can harness the full potential of Daytona’s VS Code extension, make sure you meet the following prerequisites to allow a smooth installation process:

• Visual Studio Code: have Visual Studio Code installed on your computer.

• Daytona Installation: You will need Daytona installed on your infrastructure. If you haven’t set it up yet, you can easily do so by installing it from the Daytona installer.

• Daytona Dashboard URL: To complete the setup in this guide, you’ll need the URL of your Daytona dashboard, which you can obtain by installing the Daytona installer.

With these prerequisites in place, you’ll be ready to set up Daytona’s VS Code extension.

How to install

Installing the Daytona VS Code extension is simple. You have two options to choose from to get started:

Now you should see your Daytona VS Code extension displayed on the left-hand side of VS Code. But when you click on it, nothing is displayed under WORKSPACES, TEAMS and PROFILES, now what?

Establish a connection

When you are using the VS Code extension for the first time, you will need to establish a secure connection between your local computer and your Daytona instance. Having this connection in place is essential whenever you are using the Daytona VS Code extension in the future, it keeps your workspaces, profiles and teams in sync with your Daytona installation. We will walk you through it step by step, and you will need your Daytona dashboard URL before we continue.

At this stage, if you click on your Daytona extension tab, you will see the sections under WORKSPACES and TEAMS are empty but have loading status.

Option 1: connection from VS Code

Once you have Daytona extension installed on your VS Code, you can click on the extension(on the side panel of your VS Code) and then hover on PROFILES to click on + to establish your first connection.

1. Hover on PROFILES and click on the +. You will be first asked for a profile name on top of VS Code(enter a recognizable name, we’d recommend using the domain name), and then a Base URL(enter your Daytona dashboard URL). Both of which require you to hit Space ␣ to continue.

2. A pop-up window The extension 'Daytona' wants to sign in using <your-domain-name> will show up. Click Allow. Then you will be asked Do you want Code to open the external website?, click Open to continue. Your default browser will open a Daytona authentication page asking you Please re-authenticate to continue, and choose one of the identity providers.

3. On the next page where it shows Grant Access to Visual Studio Code, click on Yes after you confirm the access privileges shown on the page(typically email address, user profile and user roles). Choose Open "Visual Studio Code" on the pop-up window "id.<your-dashboard-url>" wants to open "Visual Studio Code" and then choose Open when asked Allow 'Daytona' extension to open this URI?(your notification at the bottom right might show Getting user info, Sign in successful indicating the process of creating a profile/connecting to an installation)

Option 2: connect from Daytona dashboard

1. Sign in to the dashboard and select a workspace

• Visit your Daytona dashboard URL and make sure you are on the Workspaces tab.

• Select one of the workspaces and click on the … icon on it.

• Under the dropdown menu, select Open.

• On Daytona dashboard, click on Settings on the left-hand side menu(under the Account section). Then at the main page, under Default Editor section, select VS Code.

• Click on the Workspaces tab and select one of the workspaces. On the right side of the workspace, click on the … icon, at the dropdown menu, select Open.

• After you select Open, confirm VS Code is your code editor in the popup modal (If not set, click on the dropdown menu to select it. You may choose others, but in this guide we will need VS Code). And then click on the button Open "Code" on the popup window with the title <your-dashboard-url\> wants to open "Code".

3. Respond to permissions

• As you proceed, you may encounter the following prompts within VS Code:

• 1. “Allow ‘Daytona’ extension to open this URI?” Choose the blue button with Open.
• 2. When you are connecting for the first time, you might be prompted with No profile found for https://api.<your-dashboard-url>. Would you like to create one?. Choose Yes. Then on top of VS Code, you will be asked to enter a profile name, enter a recognisable name then press Enter.
• 3. Depending on how many workspaces you have created on your Daytona dashboard, it might take a minute or two to establish the connection and finish setting up the Extension panel(the panel on the side of VS Code once you click on the Daytona extension tab. If you don’t see the Daytona extension with logo, right click on the side panel and tick Daytona to display it).

4. Authenticate Daytona with Your Git provider

• You may see the browser pop-up window that appears with id.<your-daytona-url>, under “Please authenticate to continue,” click on your Git provider.

5. Open Visual Studio Code

• In your browser, the pop-up will prompt “id.<your-daytona-url> wants to open “Visual Studio Code”,” choose Open 'Visual Studio Code' or Always open 'Visual Studio Code'.

Congrats! You established a secure connection between VS Code and your Daytona installation. Behind the scenes, we are also setting up the configuration files on your local computer. Your selected workspace should be up and running in Visual Studio Code .

Features

In this section, we’ll cover the essential functionalities of the Daytona VS Code extension. The functionalities are comparable with what you were able to achieve in the Daytona dashboard, be it creating, managing workspaces, managing teams, or viewing profiles. All the workspaces under WORKSPACES section within the Daytona extension tab are synchronized with your Daytona dashboard.

Whether you are creating a workspace in the Daytona dashboard(by pressing + Create on the Workspaces page) to import a repository from git providers, or in Daytona VS Code extension(click + on WORKSPACES), they will all sync together under the same team. In the following sections, we will talk about how to create and manage your workspaces with Daytona in VS Code and other functionalities.

Creating workspaces

• Create a workspace in VS Code: To create a workspace, first you will need to click on the + button(hover over the WORKSPACES section, assuming you have clicked on the Daytona extension and seen the side pannel from Daytona).

• Repository URL: You will be asked for a repository URL during creation. On Github, you can obtain this URL by clicking on the green button < >(Clone, open or download), choosing Local -> Clone via HTTPS on your repository page, copying the URL displayed, or adding .git after your repository’s URL string.

• Checking workspaces: Once the workspace is created, you can see them under WORKSPACES in the Daytona VS Code extension tab. We will talk about how to manage them in the next part.

• Choosing templates: At the moment, if you want to create a workspace with a preset template (ex: You are developing a Go project and prefer to have Golang related dependencies set up in the environment, you will need to go to your Daytona dashboard in the Workspaces tab and choose one of the templates).

• devcontainer.json: If you have a devcontainer.json file that specify your development environment(in your workspace), they can be set up as specified whenever you are creating, or opening a workspace.

Managing workspaces

• Opening workspaces: You can hover on top of the selected workspace’s name and click on the right arrow -> button, or right-click on the workspace to select Open from the dropdown menu. It will take a minute to connect and set up the environment remotely. If you want to open this workspace in a new window, click on the folder button when you hover on top of a workspace, or right-click on a workspace and select Open in New Window.

• Granting access to Git provider’s organization access: Organization members can always request that an owner approve access to organization resources for Daytona, and organization owners receive notification of pending requests. For further information, check here. After additional organizations are authenticated, you can create workspaces based on repositories in organizations.

• Connecting via SSH: Alternatively, if you want to connect to a workspace via SSH, you can start a workspace on the Daytona dashboard(select the workspace, click on 𓈓 and select Start on the dropdown menu), select the workspace and click on Connect via SSH. For more information, check the Connect via SSH section below.

• Copy ID: The same repositories might be created under different environments in different workspaces, and if they are using the same name, it will become confusing to recognize for you or your team members. To take notes of different workspaces, right-click on one of them and click Copy ID. Your workspace’s ID will always be in the format of your-repository-name + random string.

• Starting a workspace: You can start a remote workspace by right click on a workspace under WORKSPACES, select Start from the dropdown menu.

• Stopping a workspace: Right-click on the workspace and select Stop, it will stop a workspace(pause its environment, assuming this workspace has started) and the remote connection with your Daytona instance. When you need to come back and work on it again, you can click on Open from the dropdown menu(right click on a workspace), or -> to open in the current window, or the folder button to open in a new window(hover on a workspace).

Managing teams

Workspaces are separated between teams. Workspaces created within a team only exist in that team. If you create a new team, the section under WORKSPACES will appear empty.

• Team information: Within the Daytona extension tab, you can see your team’s name under TEAMS.

• Creating a team: At the moment you can only create new teams on your Daytona dashboard.

• Selecting a team: If you want to change a team — hover over a team’s name, and click on the Select button. Note that if you change a team, you won’t see the same workspace from the previous team.

Managing profiles

Profiles are equivalent to a fresh, new Daytona instance installation. If you change your profile, workspaces under WORKSPACES section won’t be the same.

• Creating a profile: This process is similar to creating a connection with a Daytona installation.

• 1. Hover on PROFILES and click on the + button. You will be first asked for a profile name on top of VS Code(enter a recognizable name, we’d recommend using the domain name), and then a Base URL(enter your Daytona dashboard URL).
• 2. After you hit Space ␣ two times, a pop-up window The extension 'Daytona' wants to sign in using <your-domain-name> will show up. Click Allow. Then you will be asked Do you want Code to open the external website?, click Open to continue. Your default browser will open a Daytona authentication page asking you Please re-authenticate to continue, and choose one of the identity providers.
• 3. On the next page where it shows Grant Access to Visual Studio Code, click on Yes after you confirm the access privileges shown on the page(typically email address, user profile and user roles). Choose Open "Visual Studio Code" on the pop-up window "id.<your-dashboard-url>" wants to open "Visual Studio Code" and then choose Open when asked Allow 'Daytona' extension to open this URI?(your notification at the bottom right might show Getting user info, Sign in successful indicating the process of creating a profile/connecting to an installation)

• Checking a profile: Under the PROFILES section within the extension, you can check your existing profile. API URL, Auth URL, SSH Port， and Notification URL are displayed under each profile.

• Selecting a profile: If you want to change your profile, you can do so by hovering over your profile’s name and choosing Select

• Editing profiles: Hover on one of the profiles and click on Edit(from the dropdown menu), a config.json file will show up in VS Code. You can edit your profile-related information in JSON format. Try to edit one of your profiles’ name and its name will change under PROFILES.

Shareable Live Preview Link

You can create a shareable live preview link using Daytona’s VS Code extension to share a link to others without ngrok, whenever you are developing an application. If HMR(hot module reload) is enabled, the shareable link will also reload instantly on other remote machines. Note that whoever uses the link will need to be able to sign in to the same Daytona dashboard URL.

To create a shareable live preview link, you will need Daytona’s VS Code extension installed within a workspace. We will walk you through it step by step below. Before we start, make sure you have gone through the installation guide and know how to open a workspace above.

1. Starting a workspace: To start a workspace, hover under one of the workspaces under the WORKSPACES section and click on → or the file icon. You will also need to sign in to your Daytona dashboard and grant permissions if you haven’t done so.

2. Install Daytona extension: Within the opened workspace(where you should be seeing <repository-name> [SSH:<workspace-id>.ssh.<dashboard-url>:30000] on top of the editor groups, indicating you are connected to a workspace), you will need to install the Daytona extension following the installation guide. To confirm the installation is successful in this workspace, check if you can see DAYTONA PORTS next to the TERMINAL and PORTS tab in the panel section(below the editor group). This button will only show when you are working and connected to a workspace.

3. Starting a port: Depending on your application, you will need to run npm run dev or pnpm run dev to start a local development server. When the port is opened, two notifications will pop up for a local live preview:

   • Local preview link: If you click on Open in Browser it will open the live preview link in your default browser, or you can open it within the editor by clicking Preview in Editor.
   • Shareable preview link: On the notification that shows Source: Daytona (Extension), click on Open in Browser button and your default browser will open with a shareable link, or you can open it in the editor by clicking on Preview in Editor.

• Configure trusted domain: Upon the first time, you might be asked “Do you want Code to open the external website?“. The available options are Open, Copy, Configure Trusted Domains. If you’d prefer the website to be opened every time, you can click on Configure Trusted Domains. VS Code will then prompt you for several options to choose from. If you prefer all the applications developed on this Daytona installation to be opened automatically whenever you click on Open in Browser, select Trust all <your-dashboard-url> and all its subdomains. If you only want to auto-open the application you are currently working on in the browser, select the option Trust https://<port>-<workspace-id>.<dashboard-url>

4. DAYTONA PORTS: In case you forget to click on the popup notification and miss the link, you can also click on the DAYTONA PORTS after the port is opened locally, and you should see the public address of the port. You can click on the lock icon to make the URL publicly available.

Connect via SSH

Using the SSH protocol(Secure Shell Protocol), you can connect and authenticate to your Daytona installation without supplying your username and personal access token at each visit. When you set up SSH, you will need to generate a new private SSH key and add it to the SSH agent, or check for existing SSH keys. You must also add the public SSH key to your Daytona dashboard before you use the key to authenticate or connect to your Daytona installation.

The supported SSH keys for Daytona connections begin with:

• ssh-rsa
• ssh-dss
• ssh-ed25519
• ecdsa-sha2-nistp256
• ecdsa-sha2-nistp384
• ecdsa-sha2-nistp521

On the Daytona dashboard, you can add multiple SSH keys. All the SSH keys added will be used in all your workspaces and help different computers of yours connect to workspaces via SSH. In this section, we will walk you through how to connect to your Daytona Installation via SSH in VS Code.

1. Find existing SSH keys: Open the terminal, and enter the below command to see if existing SSH keys are present.

ls -al ~/.ssh/*.pub

• This command will return all your public SSH key’s location. The suffix pub at the end of the file path indicates this is a public key.

• Copy SSH Key: Use Ctrl ^ + C to copy one of the returned paths and then use Ctrl ^ + V to run this command in your terminal and also pasting the returned path:

cat <path-from-preview-step>
# Example: cat ~/Users/username/.ssh/id_rsa.pub

type <path-from-preview-step>
# Example: type ~/Users/username/.ssh/id_rsa.pub
# Where USERNAME is the name of your user

• This command will return your public SSH key. Copy it and save it somewhere safe and you can continue to Step 3: Adding SSH key to Daytona dashboard below.

2. Generating SSH Keys

• In the previous step, if you happen to not have an SSH key on your local machine, you can generate a new SSH key on your local machine.

• Open your terminal and paste the text below, replacing the email used in the example with the same email address you used with the identity provider you have used for your Daytona installation.

ssh-keygen -t ed25519 -C "your_email@example.com"

• This creates a new SSH key, using the provided email as a label. You will see the command line shows you:

> Generating public/private rsa key pair.
> Enter a file in which to save the key (/Users/YOU/.ssh/id_ALGORITHM): [Press enter]

• Copy public key path: When you’re prompted to “Enter a file in which to save the key”, you can press Enter to accept the default file location. An example return will look like:

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/username/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/username/.ssh/id_rsa
Your public key has been saved in /Users/username/.ssh/id_rsa.pub
# Copy your public key path:     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The key fingerprint is:
SHA256:rjelabgiaebrnlakdlkrjelkanrjeiagoirjadnkfjire your_email@example.com
The key's randomart image is:
+---[RSA 4096]----+
|           . C+++|
|            *...o|
|            .D.+.|
|      .  =.  .=.o|
|     o =S..o. .oo|
|    . S = ..o o+=|
|   o + =     . .o|
|    +        . .=|
|              oo=|
+----[SHA256]-----+

• Passphrase: At the prompt, you will be asked to type a secure passphrase. You can either leave it empty or enter a passphrase for your SSH keys to prevent some edge cases (ex: Your computer is stolen and attackers can gain access to every system that uses that key)

• If you choose to enter a passphrase, you will be prompted to enter the passphrase when you use your key for the first time. If you choose to save the passphrase with your keychain, you won’t have to enter it again.

• Copy your SSH key: Once you have your public key path from the previous step, in your terminal, run

cat <path-from-preview-step>
# Example: cat ~/Users/username/.ssh/id_rsa.pub
# Example return: ssh

type <path-from-preview-step>
# Example: type ~/Users/username/.ssh/id_rsa.pub
# Where USERNAME is the name of your user

• After running this command, an example output will contain three parts. First is the algorithm used to generate your SSH key, the second part is a long, encrypted result of your SSH key ending with ==, and the third part is the email you used to generate your SSH key.

ssh-rsa LongRandomStringWithSlash/slash/randomString== your_email@example.com
## This is a much shorter example, real id_rsa.pub output is a lot longer

• Copy the full returned result and move to the next step.

• Navigate to the SSH Keys page: On your Daytona dashboard, select the SSH Keys tab on the left side of the panel. On this page, click on Add.
• Add SSH Key: After clicking on Add, you will see a popup window with three input fields, Name, Key, and Expiration Date. We detailed the usage of each input fields below.

4. Obtain SSH Connection Command

• Within your Daytona dashboard, navigate to the WORKSPACES tab, select a workspace and click on 𓈓, select Start on the dropdown menu to make sure the workspace is up and running.
• Again on the same dropdown menu, select Connect via SSH. The browser will open a popup window with the title Connect to <workspace-id> via SSH. You have two options below: Public Key and Access Token. Copy the value under the tab Public Key.

5. Connect Via SSH in VS Code

• Install Remote - SSH Extension: To connect via SSH in VS Code, you need to make sure you have the extension Remote - SSH installed on your VS Code. You can either navigate to the extension tab in VS Code and search for “Remote - SSH”, or download it from the Remote - SSH extension via browser through URL link

• After installation, you should be able to see the Remote Explorer icon on the left panel within VS Code. If you are not seeing it, right-click on the panel, on the dropdown menu, select Remote Explorer to display the tab on the panel.

• Select Remotes (Tunnel/SSH): While the Remote Explore tab is opened, make sure the type of Remote Explorer is set to Remotes (Tunnel/SSH) (The dropdown menu next to REMOTE EXPLORER)

• Adding connection: Hover on top of the section SSH under REMOTES (TUNNEL/SSH), you should see a + icon. Click on that icon, and you should see a prompt for input Enter SSH Connection Command on the top of VS Code. Paste the value you obtained from the last step, obtain SSH Connection Command and press enter.

• Select SSH Config file: Next, you will be prompted to Select an SSH configuration file to update, then select the first configuration file that looks like /Users/username/.ssh/config.

• Open workspace folder: After selecting the configuration file, a new VS Code window will open. By default, after you connect to a Daytona workspace, you are located in the root of the workspace. If you hit Command ⌘ + O or click on Open Folder under the File Explorer tab, you will see all the files, including dotfiles in this workspace, and a prompt asking for directory’s path. To open the files you need to work on, type in /workspaces/repository-name to enter the folder by hitting keyboard Enter ⏎ or click on OK on the right side of the prompt.

After the steps above, you established an SSH connection with your Daytona installation and are ready to work in this workspace.

Clean Uninstall Guide

After installing the Daytona VS Code extension, there might be a point when you update your Daytona instance’s installation, or you want to start over the installation process again after a clean uninstall, here are several steps to help you start fresh again:

Uninstall Daytona VS Code extension

In VS Code, navigate to the Extension tab or use the shortcut keys:

Search for Daytona in the extension marketplace, select the extension with our logo, and click on the button Uninstall on the Extensions: Daytona tab that shows up. This will only remove the extension within VS Code, for a clean uninstall you will need to continue to the next step.

Remove Daytona-related files

1. Remove SSH configuration entries: To remove Daytona-specific entries from your SSH configuration without deleting the entire file, you will need to manually edit the file:

• Open the SSH configuration file in a text editor:

nano ~/.ssh/config
# TODO: Confirm with Toma is this file being permanently moved to ~/.ssh/daytona_config

Or if you prefer using VS Code as your editor:

code ~/.ssh/config

• Find content related to Daytona: Locate the Host entries related to Daytona, which might be marked with comments, starting with # START DAYTONA and ending with # END DAYTONA. Carefully remove only those lines related to Daytona.

• Save changes: Save the changes and close the text editor.

• Remove Daytona SSH config: In your terminal, run this command:

rm -rf ~/.ssh/daytona_config

This command will remove other SSH configurations related to Daytona and created by Daytona.

2. Remove profile-related data

rm -rf ~/.daytona

This command will remove the directory in which we store your profile, default configurations, URL, and redirect URL to open when you are granting permission to connect local VS Code to Daytona.

After these two steps, you will have a clean setup and have removed all files that are related to Daytona on your computer. However, if you are looking to uninstall and clean up your Daytona deployment, check this uninstallation guide.