Remotely edit your work without using vim
Tags: tool, remote, ngrok, vscode
Published: 2019-04-09 08:52:10

---
title: Remotely edit your work without using vim
published: true
description: 
tags: tool, remote, ngrok, vscode
---
Remotely editing your work when your server does not have public IP address and you don't want to spend any money is not so easy. Maybe you can use Team viewer or Anydesk or even chrome remote desktop, but there are high latencies. Maybe you can use ngrok to remotely ssh to your remote server, but you have to use vim and you are not familiar with it at all :anguished:. I tried to use rmate but it is not convinient to edit across different files in a folder.

I recently found an hot github repository called [code-server](https://github.com/codercom/code-server) which is able to run **VS Code** on a remote server, accessible through the browser. So it suddenly came to my mind that I can remotely edit any code for free as long as I have a linux/macOS environment. 

Let's consider you understand the basic knowledge of SSH key as you are going to use it. For tutorial about how to generate SSH keys, please refer to [How to set up SSH keys](https://www.digitalocean.com/community/tutorials/how-to-set-up-ssh-keys--2) and [connecting to GitHub with SSH](https://help.github.com/en/articles/connecting-to-github-with-ssh).

Firstly you need to see whether your server has a public IP address. If yes (I know this is not common), then things are really easy and you can just follow step 1, 2 and 3; otherwise, directly go to step 0, then step 2 and 3.

## Step 1. SSH connect
```
ssh server_username@IP_address -L 8843:localhost:8843
```
The `-L 8843:localhost:8843` here is **local port forwarding** which allows you to access local network resources that aren't exposed to the Internet. The first 8843 is local port, `localhost:8843` is the remote **code-server** default port.

To see whether you can successfully links to the server. The prerequisites are 1) you installed openssh-client 2) you have generated SSH key. If not successfully, maybe you don't have a public IP address. Then go to step 0.

## Step 2. Download code-server
Open this page on your client browser, find the latest release of [code-server](https://github.com/codercom/code-server/releases). Find the binary file for linux and get the downloading address. 


![Download binary file](https://thepracticaldev.s3.amazonaws.com/i/nfekp57y05t3q0xts01i.png)

Then in the terminal window ssh connected to the remote server, type:
```
wget code-server_downloading_address
# Example:
wget https://github.com/codercom/code-server/releases/download/1.696-vsc1.33.0/code-server1.696-vsc1.33.0-linux-x64.tar.gz
tar -xvzf code-server1.696-vsc1.33.0-linux-x64.tar.gz
cd code-server1.696-vsc1.33.0-linux-x64/
sudo mv code-server /usr/local/bin/
sudo chmod a+x /usr/local/bin/code-server
```
Then your **code-server** will be installed!

## Step 3. Running code-server
Go to the folder of your code waiting to be edited and type `code-server` in the terminal window ssh connected to remote server.
Then open your browser and type `localhost:8843`, your workspace of VSCode will be revealed to you! The speed is satisfactory to me.

---

## Step 0. Ngrok

Some people will use VPS servers or cloud hosting providers like [Vultr](www.vultr.com), AWS and so on to pay for a public IP address. But here we just need [Ngrok](www.ngrok.com), a great tool that can create a tunnel from the public Internet to a port on your local machine. You can give this URL to anyone and any place without the need to pay any money!

Go to [Ngrok](www.ngrok.com) and sign up to get your authtoken. Follow the "Setup & Installation" and download ngrok onto your remote server (I suggest you read the [doc](https://ngrok.com/docs) and check "ngrok configuration file" section) and throw the binary file into /usr/local/bin/. Maybe need to `sudo chmod a+x ngrok`.
Then type:
```
ngrok tcp 22 --region ap
```
where --region refers to your region. There are four region options: us(Ohio), eu(Frankfurt), ap(Singapore), au(Sydney). If you don't select a region, the default one is us, which might be slow if you are not in the US.

Then your screen will show something like this:
![ngrok](https://thepracticaldev.s3.amazonaws.com/i/ik6nyv7vf0c1e76r80r3.png)

There is a number after `0.tcp.ngrok.io:` **15707**. You need to remember this port number. Please keep this window on if you want to keep this tunnel open.

Then you can ssh to your remote server by copying the command:

```
ssh hd@0.tcp.ngrok.io -p15707 -L 8443:localhost:8443
#Or your region is ap
ssh hd@0.tcp.ap.ngrok.io -p15707 -L 8443:localhost:8443
```