Skip to main content

My VNC based development environment with Visual Studio Code running on Ubuntu

I've used this setup for my development environment for several years - giving me a developer desktop I can access anywhere. Even from my mobile phone. I've been fixing bugs, writing code and deployed emergency fixes from the bus, train and mountain tops.

The setup is based on a lightweight desktop environment. There are lot of alternatives, but I've chosen fluxbox. From a plain AWS Amazon Ubuntu 16.04 ec2 instance I've started like this:

sudo apt-get update
sudo apt-get install fluxbox

Download and extract tigervnc from https://github.com/TigerVNC/tigervnc/releases (I downloaded the binary file from https://bintray.com/tigervnc/stable/tigervnc/1.7.0 named tigervnc-1.7.0.x86_64.tar.gz )

then extract:

tar -xvzf tigervnc-1.7.0.x86_64.tar.gz

You need to install:

sudo apt-get install x11-xkb-utils

You need to edit .vnc/xstartup:

nano .vnc/xstartup

last line replace "twm &" with:

fluxbox &

Then you can start the vnc server:

./tigervnc-1.7.0.x86_64/usr/bin/vncserver

For code editing I'm using Visual Studio Code - which you can download from here https://code.visualstudio.com/Download

Install it by running (replace code.deb with the exact name of your downloaded file):

sudo dpkg -i code.deb

You may have to run (to install dependencies):

sudo apt-get install -f

Also vscode won't run unless you install libxss1 and libasound2:

sudo apt-get install libxss1
sudo apt-get install libasound2

Now you should be able to launch visual studio code by typing:

code

For VNC clients there are a lot of options. On my mobile phone I use Jump remote desktop (works great on both Android and iOS). For desktop there are several alternatives, but I like tightvnc on windows, jump remote desktop on osx, and on Ubuntu I use the built-in alternatives.


Comments

Unknown said…
I got away with install tigervnc (similar to you) but then did this.

sudo sed -i 's/BIG-REQUESTS/_IG-REQUESTS/' /usr/lib/x86_64-linux-gnu/libxcb.so.1

Unknown said…
Here is the link that I followed

https://github.com/Microsoft/vscode/issues/3451

Popular posts from this blog

Angular components not reloading on route change

Spent a long time wondering why route changes caused strange effects on my component, and found out that it was because my component wasn't reloading at all. I had this assumption that when a route parameter changed (e.g. /projects/1 changed to /projects/2 ) the component for the route would be reloaded. But this is not the default behaviour of the Angular router. The default behaviour of the Angular router is to reuse the route if the configuration is the same (and not reload the component). But we can override this by providing a RouteReuseStrategy to our @NgModule: providers: [ { provide: RouteReuseStrategy, useClass: AARouteReuseStrategy } ] The full custom implementation of the RouteReuseStrategy will then be like this (and it's the shouldReuseRoute method that changes the behaviour so that the component is reloaded on route parameter change): export class AARouteReuseStrategy extends RouteReuseStrategy { shouldDetach(route: ActivatedRou...

Using Angular i18n translation strings outside templates

As of today in Angular 6 i18n is only available in the templates. So what if we want to use translated messages programatically and outside templates? I still use the component template html file to declare the message to be translated, but by obtaining the TemplateRef ViewChild in the component typescript file I can get the translated messages from typescript. <ng-template #boardInvitationEmailBody let-organization="organization" let-url="url"> <ng-container i18n>You have been invited to join the board portal for</ng-container> {{organization}}. <ng-container i18n> Please follow the link to: </ng-container> {{url}} </ng-template> So in the typescript code i can now call the createEmailBodyTranlated text method to get the translated text for use outside the template. @ViewChild('boardInvitationEmailBody') boardInvitationEmailBody: TemplateRef ; createEmailBodyTranslatedText(org...

Using GIT for offline web app syncing and storage

Offline web applications, progressive web apps (PWA) using service workers for being available offline also needs a way to sync changes with the server. Mostly we store data in JSON documents, and we could identify changes per line - which is something GIT is excellent at. So how could we make the browser a GIT client? I've been working on this for some months now, and compiled libgit2 to webassembly using emscripten - and it turns out to work very well. Some video demos: Cloning a repository: https://youtu.be/rcBluzpUWE4 Merging of file changes: https://youtu.be/xfGrMwLy_tw The project is here: https://github.com/fintechneo/angular-git-filebrowser