Setting up Development Environment in Visual Studio Codespaces
Setup Codespace with VNC server in Visual Studio Code
Introduction
Visual Studio Codespaces is a cloud based development environment. As this is completely in the cloud, we can connect to it either using Visual Studio Code or any browser from anywhere. Codespaces is subscription based environment if you are creating the cloud-hosted Codespace in Azure, which is charged as per the usage. You can also setup Self-hosted Codespace on your machine, which is free of charge.
Install and Set Up VS Code on Windows 10, if you don’t have it
Instructions to install VS Code on Windows 10 and integrate MobaXterm terminal can be found in my previous article.
Install Codespaces Plugin in VS Code
Open Extensions Marketplace using Ctrl+Shift+X keyboard shortcut, search for “Visual Studio Codespaces” extension and click Install. Once installed, open Codespaces panel in Remote Explorer. Also install “Azure Account” extension and sign in with your Microsoft account.
Open the Command Palette using Ctrl+Shift+P keyboard shortcut, search for “Codespaces: Create Plan” and proceed with your inputs. First select the Azure subscription that this Codespaces Plan will associate with. Enter any name for resource group name for this plan. It’s better to keep a different name, if you already have resource groups so that if you delete this resource group in Azure portal, all associated resources will be deleted in one shot. Select the region where you will use the Codespaces most often. Last enter the name of the created Codespaces plan.
Create Development Environment in Codespaces
Let’s crate a new Codespace environment for development. Click on “Create new Codespace” in Codespaces panel. Select “Default Settings”, which is 4 cores, 8GB RAM and 30 mins auto suspend time. Leave empty for Repository and enter the name for the new Codespace. It will take few seconds to create the Linux based environment with support to most popular tools and SDKs like Python, Node.js, PHP, Java, Docker, nvm, nvs, etc., and you will see a notification when this new environment is ready. Click Connect, this will reopen the VS Code window and connect to the new environment. Open new terminal to see the popular bash terminal.
Disconnect and Suspend Codespace
Once you completed your task in this environments, you can disconnect from it and reconnect to start from where you left. The main advantage of using Codespace environment is, you can work in any browser from where ever and whenever you want. It will be suspended within 30 minutes of inactivity, so we will be charged for storage only, not for compute resources.
Install VNC Server
We can use Codespace environment for developing console & web applications. We can use the port forwarding feature in Codespaces to open the web application in our local computer to see and test the application. If you want to use this environment for desktop applications which require GUI, we can install VNC server and open in any vnc viewer to debug/test. Let’s see the instructions to install VNC server below.
We just created Linux environment, so let’s ensure all updates installed first using below commands in the terminal. Please note that, it takes sometime to get all upgrades.
sudo apt update && sudo apt dist-upgradeWe can create a new user for VNC and add that user to sudoers, replace USER_NAME with your choice:
sudo adduser USER_NAME
usermod -a -G sudo USER_NAMEBefore installing VNC Server, we need some desktop environment. Codespace environment does not come with desktop environment, so let’s install open-source light weight desktop environment XFCE as below:
sudo apt install xfce4 xfce4-goodiesWhile installing, it will ask to select the keyboard layout. Choose as per your keyboard. After installing XFCE desktop environment, install VNC server as:
sudo apt install tightvncserverAfter installing VNC server, login as USER_NAME to configure VNC server. You may need to create USER environment variable as below:
export USER="USER_NAME"Configure VNC Server
Use the vncserver command to set up a secure password, create the initial configuration files and start the server. You can ignore view-only password.
As we will modify the configuration files to use XFCE desktop environment, stop the vncserver as:
vncserver -kill :1Take the backup of original xstartup file created as initial configuration as:
mv ~/.vnc/xstartup ~/.vnc/xstartup.bakCreate another file (~/.vnc/xstartup) and enter below commands which will be executed when we start/restart VNC server.
#!/bin/bash
xrdb $HOME/.Xresources
startxfce4 &Make the above file as executable
sudo chmod +x ~/.vnc/xstartupRestart the VNC server as:
vncserverIn VS Code Remote Explorer window, click “Forward port” in CODESPACE DETAILS, enter “5901” for TCP port to forward. You can keep the suggested display name and enter.
Connect to the VNC server using MobaXterm VNC session. Create a new VNC session in MobaXterm with Remote host name as “localhost” and Port as “5901”. Connect to this new VNC session and enter the password that you selected above. When you first connect, it will ask to select the Panel setup config and you can choose default config. You will see XFCE desktop in VNC server.
Start VNC Server as Service
To start VNC Server every time the Codespace environment starts, let’s configure the service. Create a file /etc/init.d/vncserver and add below lines by replacing the USER, GEOMETRY and NAME, as you like.
#!/bin/bash -e
# The Username:Group that will run VNC
export USER="vsonline"
# The display that VNC will use
DISPLAY="1"
# Color depth (between 8 and 32)
DEPTH="16"
# The Desktop geometry to use.
#GEOMETRY="<WIDTH>x<HEIGHT>"
GEOMETRY="1280x1024"
# The name that the VNC Desktop will have.
NAME="vsc-vnc-server"
OPTIONS="-name ${NAME} -depth ${DEPTH} -geometry ${GEOMETRY} :${DISPLAY}"
. /lib/lsb/init-functions
case "$1" in
start)
log_action_begin_msg "Starting vncserver for user '${USER}' on localhost:${DISPLAY}"
su ${USER} -c "/usr/bin/vncserver ${OPTIONS}"
;;
stop)
log_action_begin_msg "Stoping vncserver for user '${USER}' on localhost:${DISPLAY}"
su ${USER} -c "/usr/bin/vncserver -kill :${DISPLAY}"
;;
restart)
$0 stop
$0 start
;;
esac
exit 0Make the above file as executable and update the services
sudo chmod +x /etc/init.d/vncserver
sudo update-rc.d vncserver defaults 99Now to start the VNC server, we can suspend the codespace and connect or start using the below command
sudo service vncserver startWe can check all the services and their status using
sudo service --status-allConclusion
Visual Studio Codespaces is a great cloud-based environment for developers, we can quickly create an environment, test an application and delete it. It’s also helpful to have VNC support to develop/test GUI based applications.
