Visual Studio Code on Cloud
- 9 minutes read - 1744 wordsAre you a fan of Visual Studio Code (VSC) and looking for option to get access to your favourite IDE anytime, anywhere? This article helps you with the steps to host VSC on a Linux server in Azure along with Terraform, Cloud CLIs, Packer.
- TL;DR
- High-level steps
- Step 1: Build linux server on Azure
- Step 2: Setup OneDrive client on the Linux server
- Step 3: Install Codercom Code Server (Visual Studio Code)
- Step 4: Install Extensions for Visual Studio Code
- Step 5: Access your IDE on Demand - anytime, anywhere
TL;DR
Visual Studio Code is my favourite IDE, hands down. I also love the option of having my favourite apps accessible over a browser or mobile app, so no wonder I was keen to explore options for having VSC online.
Soon enough, I found the three options below to have VSC online but finally settled on the third one which met all my requirements. This article explains the steps to setup VSC on Cloud, sync your working files to OneDrive and give you on-demand access to your favourite IDE anytime, anywhere.
The Three options
Following are the three options I explored to have VSC Online.
-
Visual Studio Code Online by Microsoft Microsoft has released Public Preview of VSC Online. If you need just a VSC online without any customisations or additional tools and already have an Azure subscription, you could try this one. I did not select this for the following reasons:
- could not select the specific version of Linux I wanted
- could not configure OneDrive client
- unable to access from Safari on iPad
- Expensive option compared to the other two
-
Code Server on Container It was a great relief to find Code Server on GitHub. After doing some initial tests, I figured this is the one that will finally get my favourite IDE accessible from my iPad. I just had to decide if I should run Code server in a container or on Linux server. Though I got it working on a Container and also wrote two functions to start and stop Container on demand, I did not select this for the following reasons:
- To get OneDrive sync working, I had to mount a file share to container. Performing GitHub actions on a mounted share was too slow
- There is no option to start/stop containers from Azure iOS app
-
Code Server on Linux server This option ticked all my boxes. I can run Code Server on my favourite Linux version on any Cloud and also get all my favourite DevOps tools installed on this Linux server to be accessible from VSC. Setting up OneDrive client on Linux server was a breeze and with the Azure iOS app, I can start/stop the Linux server only when I need access to VSC Online, making this also the most cost-effective option.
As all files are synced to OneDrive, I can also get access to latest files on my Mac and seamlessly switch between either the Desktop App or the Online version
High-level steps
- Build the Linux server and install basic tools - Cloud CLIs, Terraform
- Setup OneDrive Client on Linux server
- Setup Code server, including domain, certificate etc
- Install required extensions on Visual Studio Code
- Access your IDE on-demand anytime, anywhere
Step 1: Build linux server on Azure
Follow the steps in this GitHub repo to build the Linux server
Step 2: Setup OneDrive client on the Linux server
-
Install OneDrive client:
sudo apt-get -y install onedrive
-
Configure OneDrive client
-
2a. Create OneDrive Sync and Config folders
- Config folder:
mkdir -p ~/.config/onedrive
- Sync folder:
mkdir ~/onedrive
- Config folder:
-
2b. Create OneDrive config file
~/.config/onedrive/config
with the following contents# folder on Linux server that will sync with Onedrive sync_dir = "/home/vsc-user/onedrive" # to ensure .files and .folders are skipped (.git, .terraform) skip_dotfiles = "true" # to skip the .DS_Store files in Mac, also can add any other files that must be skipped skip_file = ".DS_Store"
-
2c. Create OneDrive Sync list
~/.config/onedrive/sync_list
with the list of folders in OneDrive you want to sync# The specific folder that must be sync from OneDrive (path to start from Documents as in example below) Documents/hands-on/1-Docs
-
2d. Invoke OneDrive client to login and give authorisation for the onedrive client to sync with your OneDrive. This is a one time task.
execute
onedrive
copy the URL mentioned and access it from Google Chrome browser, login to Onedrive using your credentials copy the resultant url from Chrome browser at the promptEnter the response uri:
Note: Depending on the volume of Onedrive, it can take 15-30 mins to complete. Even if you are syncing only one folder, it will stil scan your entire OneDrive
-
-
To ensure OneDrive is started on boot, execute the following command
systemctl --user enable onedrive
Note: As the service is enabled as user startup, onedrive was not starting until user vsc-user logged in. To resolve this issue, following steps were done
-
3a. Logged in as the user:
vsc-user
-
3b. Update the service startup config
systemctl --user disable onedrive mkdir -p ~/.config/systemd/user cp /usr/lib/systemd/user/onedrive.service ~/.config/systemd/user vi ~/.config/systemd/user/onedrive.service
- 3c. Add the line
After=user@1000.service
under Unit as below
[Unit] Description=OneDrive Free Client After=user@1000.service Documentation=https://github.com/skilion/onedrive
- 3d. Save the file and execute the following commands to start and also add Onedrive to startup
systemctl --user enable onedrive systemctl --user start onedrive sudo loginctl enable-linger vsc-user
- 3e. To resolve the issue of user startup scripts not starting until login, execute this command
sudo loginctl enable-linger vsc-user
-
-
Check the logs of Onedrive client:
journalctl --user-unit onedrive -f
Step 3: Install Codercom Code Server (Visual Studio Code)
-
Create a separate folder and download the latest version of Code Server
mkdir -p ~/vscode-server cd ~/vscode-server export version="3.8.0" wget https://github.com/cdr/code-server/releases/download/${version}/code-server-${version}-linux-amd64.tar.gz tar -xvzf code-server-${version}-linux-amd64.tar.gz ls code-server-${version}-linux-amd64
-
Generate self-signed certificate to use with code server Note: Use self-signed certificate if you do not have your own domain and relying on Azure FQDN to access Code Server. You will get privacy warning error, when accessing the URL if you are using self-signed certificate
cd ~/vscode-server sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout vscode-selfsigned.key -out vscode-selfsigned.crt sudo chown vsc-user:vsc-user vscode-selfsigned*
-
If you own a domain and would like to point that to the Linux server (e.g., https://dev.mydomain.com), you can create a certificate signed by Let’s Encrypt using [Certbot]https://certbot.eff.org/ instead of using a self-signed certificate
-
3a. Install certbot
sudo apt-get update sudo apt-get install software-properties-common sudo add-apt-repository universe sudo add-apt-repository ppa:certbot/certbot sudo apt-get update sudo apt-get install certbot
-
3b. Generate the certificate using Certbot Before executing the following command, login to your Domain provider and access the DNS settings
sudo certbot certonly --server https://acme-v02.api.letsencrypt.org/directory --manual --preferred-challenges dns -d dev.mydomain.com
Follow the instructions to generate the certificate
-
3c. Copy the certificate and private key to ~/vscode-server
sudo cp /etc/letsencrypt/live/dev.mydomain.com/cert.pem ~/vscode-server sudo cp /etc/letsencrypt/live/dev.mydomain.com/privkey.pem ~/vscode-server chown vsc-user:vsc-user ~/vscode-server/*.pem
-
-
Create a script to start the code server
- 4a. create the working dir for the code server
mkdir ~/code-server
- 4b. edit
~/vscode-server/start-vscode-standalone-server.sh
and copy the following lines
#!/bin/bash export PASSWORD="test.1234567" export VERSION="3.8.0" export HOSTNAME=$(hostname) /home/vsc-user/vscode-server/code-server-${VERSION}-linux-amd64/code-server --auth password --user-data-dir /home/vsc-user/code-server --cert /home/vsc-user/vscode-server/vscode-selfsigned.crt --cert-key /home/vsc-user/vscode-server/vscode-selfsigned.key --bind-addr ${HOSTNAME}:8080
If using the certificate generated by certbot use the following script
#!/bin/bash export PASSWORD="test.1234567" export VERSION="3.8.0" export HOSTNAME=$(hostname) /home/vsc-user/vscode-server/code-server-${VERSION}-linux-amd64/code-server --auth password --user-data-dir /home/vsc-user/code-server --cert /home/vsc-user/vscode-server/cert.pem --cert-key /home/vsc-user/vscode-server/privkey.pem --bind-addr ${HOSTNAME}:8080
- 4c. Save the file, change permissions to allow execution
chmod 755 ~/vscode-server/start-vscode-standalone-server.sh
-
Test access to Code Server/Visual Studio Code
- Start the Code Server by running:
~/vscode-server/start-vscode-standalone-server.sh
- Open a browser in your PC and access the FQDN of your server or the domain you configured: (https://vsc-linux.uksouth.cloudapp.azure.com:8080)
Note: If it is self signed certificate, there will be a warning
- Create a service startup file to allow code server to be started on server start
Press
ctrl+c
to stop the server Create the folder for logfiles:mkdir -p ~/vscode-server/log
Edit~/.config/systemd/user/startCodeServer.service
and insert the following lines
[Unit] Description=Visual Studio Code Server After=network.target [Service] ExecStart=/home/vsc-user/vscode-server/start-vscode-standalone-server.sh StandardOutput=file:/home/vsc-user/vscode-server/log/code-server-output.log StandardError=file:/home/vsc-user/vscode-server/log/code-server-error.log [Install] WantedBy=default.target
- Save the file and then execute the following commands to enable and start
systemctl --user enable startCodeServer.service systemctl --user start startCodeServer.service
If you skipped the Onedrive client section above, execute the following command
- To resolve the issue of user startup scripts not starting until login, execute this command
sudo loginctl enable-linger vsc-user
- Start the Code Server by running:
NOTE: Latest versions of code-server seems to support installing the extensions from the GUI itself, hence the following section can be skipped
Step 4: Install Extensions for Visual Studio Code
It is best to install the required Extensions manually. Following are few initial recommendations
- Terraform
- Markdown All-in-One
- Docs Authoring Pack
- Docs Markdown (version 0.2.59)
To install an extension manually, follow the steps below
-
Search for the required extension using a browser, go to the site and note down the following info
- publisher (first part of unique identifier)
- extension (second part of unique identifier)
- version
For example, to install Terraform extension manually, go to the URL (https://marketplace.visualstudio.com/items?itemName=mauve.terraform) and note down the following info
- publisher: mauve
- extension: terraform
- version: 1.4.0
-
Use above information to generate the URL using the following template URL
https://ms-vscode.gallery.vsassets.io/_apis/public/gallery/publisher//extension///assetbyname/Microsoft.VisualStudio.Services.VSIXPackage
For the
terraform
example above the URL would be (https://ms-vscode.gallery.vsassets.io/_apis/public/gallery/publisher/mauve/extension/terraform/1.4.0/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage) -
Download the extension to a specific folder in your Linux server
mkdir -p ~/vscode-server/extensions cd ~/vscode-server/extensions PUBLISHER="mauve" EXTENSION="terraform" VERSION="1.4.0" wget https://ms-vscode.gallery.vsassets.io/_apis/public/gallery/publisher/${PUBLISHER}/extension/${EXTENSION}/${VERSION}/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage -O ${PUBLISHER}.${EXTENSION}-${VERSION}.vsix
-
On Visual Studio Code, go to Extensions, click on
...
, select install from VSIX and select the downloaded file from the extensions folder:/home/vsc-user/vscode-server/extensions
-
For Terraform extension to work properly, perform the following additional steps
- Open
settings.json
by going to Settings and selectingedit in settings.json
and add these
"terraform.languageServer": { "enabled": true, "args": [] } "terraform.indexing": { "enabled": false, "liveIndexing": false }
- Shift+Cmd+P, select
Reload
,Reload Window
to reload Visual Studio Code - It will then install the Language server, select the verion to install
- Open
Step 5: Access your IDE on Demand - anytime, anywhere
Now that you have setup VSC on Azure, it is quite easy to access this on-demand. Just download the Azure app on Apple store, configure it to connect to your subscription.
When you need access to VSC Online, start the VM from Azure app. You should then be able to connect to it from any browser on your PC/Mac/iPad using the FQDN URL that you have configured. VM should start in less than 1 minute.
Once you have done the work, stop the VM from the Azure app again. This will ensure the VM is stopped and also de-allocated so you are not charged for this VM anymore. Only cost will be for the storage for the Azure disk allocated for this VM.