Are 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
  • The Three options
• 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.

1. 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

2. 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

3. 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

1. Build the Linux server and install basic tools - Cloud CLIs, Terraform
2. Setup OneDrive Client on Linux server
3. Setup Code server, including domain, certificate etc
4. Install required extensions on Visual Studio Code
5. 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

1. Install OneDrive client: sudo apt-get -y install onedrive

2. Configure OneDrive client

   • 2a. Create OneDrive Sync and Config folders

     • Config folder: mkdir -p ~/.config/onedrive
     • Sync folder: mkdir ~/onedrive

   • 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 prompt Enter 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

3. 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
   

4. Check the logs of Onedrive client: journalctl --user-unit onedrive -f

Step 3: Install Codercom Code Server (Visual Studio Code)

1. 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
   

2. 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*
   

3. 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
     

4. 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
   

5. 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
   

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

1. Terraform
2. Markdown All-in-One
3. Docs Authoring Pack
4. Docs Markdown (version 0.2.59)

To install an extension manually, follow the steps below

1. 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

2. 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)

3. 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
   

4. 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

5. For Terraform extension to work properly, perform the following additional steps

   • Open settings.json by going to Settings and selecting edit 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

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.