Remote Web Development with Visual Studio Code

It may be exhausting to manage your whole Development Environment on one Maschine – Lets develop in HTML via SFTP with Visual Studio Code and a remote Webserver.

Requirements

Basically every Maschine with SSH Access will work for this Tutorial

A Remote Server with SSH (root) Access
Optional: An installed Webserver (i.e. Nginx with PHP)
Visual Studio Code as Client Development Software

Preparing the Remote Server

In our Example, we would like to connect to a Remote Server running Ubuntu and an Nginx Webserver.

Optional: User and Development Folder Creation

I create a User for Development Purpose – The User will be able to remote Login and also to become root if necessary (sudo).

sudo useradd -m -d /home/developer developer -s /bin/bash
sudo passwd developer
sudo usermod -aG sudo developer

I create a development Folder “devel” inside the Webroot of nginx and link it to my new users home directory root (/home/developer/devel -> /var/www/html/devel).

We also set the highest Permissions onto the Devel Folder, due to we don’t want any restrictions while testing and developing

cd
sudo mkdir /var/www/html/devel
sudo chmod 777 /var/www/html/devel/
sudo ln -sf /var/www/html/devel/ devel

Important: Don’t use these permissions on public/productive Servers – It’s set for Development Purpose only.

Visual Studio Code remote Development Extension

Install the Visual Studio Code Extension Pack from here or directly within Visual Studio Codes Extension Management:

After the Installation succeeded, you can use the new Icon (Remote Explorer) below the Extension Manager, to establish a SSH Connection to your Host:

Inside the “Remote Explorer” Pane, select the “+” Icon and connect by typing

ssh developer@server-ip

Change the User and server-ip to your needs

Note – The Password Prompt will appear in the same Command Windows. Afterwards you should be able to browse / open / edit / save your remote Files. The saved changes will be directly available on your remote host while connected.

Pretty Cool

You made it – Remote Development is pretty cool in my eyes – There is a lot more to discover i.e. using git in this constellation, so I may extend this Post in future.

So far – happy developing!