---
# System prepended metadata

title: Setup code-server @ PrimeHub Jupyter Session

---

# Setup code-server @ PrimeHub Jupyter Session
We love VSCode, for its convenient IDE extensions.

But how can we use that in our PrimeHub Jupyter session? With our precious GPUs?

Here is the guide to host a VSCode server that can be accessed by web browsers!!!

# Installation 

## A. Install Code server
Fist we nee to install [code-server](https://github.com/coder/code-server), an open source tool that host vscode in anywhere~

Install curl for fetching the installation code:
```
sudo apt-get update -y
sudo apt-get install curl -y
```

You will have it after this installation step:
``` Bash
curl -fsSL https://code-server.dev/install.sh | sh
```
Then you can host the code-server by running ```code-server```, but hold on for a second~


## B. Get your Extensions from web
You might find some extensions not available in Extension marketplace in the code-server IDE...

So get your extensions in https://marketplace.visualstudio.com/ :
> suggestions: EasyCodeAI, MS-vsliveshare, Tabine
1. Goto their webpages
> e.g. https://marketplace.visualstudio.com/items?itemName=EasyCodeAI.chatgpt-gpt4-gpt3-vscode
2. Click 'Download Extension' to download .vsix file
3. Drag and drop the .vsix file to the directories in the Jupyer environment
> e.g. EasyCodeAI.chatgpt-gpt4-gpt3-vscode-0.6.7.vsix

Install Extensions by:
```
code-server --install-extension EXTENSION_FILE_NAME.vsix
```
e.g. Install GPT Extension
```
code-server --install-extension EasyCodeAI.chatgpt-gpt4-gpt3-vscode-0.6.7.vsix
```

## C. Install ngrok
[NGROK](https://dashboard.ngrok.com) help you forward the service from local to public web.
e.g. form ```http://127.0.0.1:8080``` to ```http://my.website.com:80```

1. Get NGROK zipfile
```
wget https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-v3-stable-linux-amd64.tgz --no-check-certificate
```
2. Unzip it to the place for execution and remove zip file

```
sudo tar xvzf ngrok-v3-stable-linux-amd64.tgz -C /usr/local/bin
rm -f ngrok-v3-stable-linux-amd64.tgz
```

3. Get your own NGROK token
    a. open https://dashboard.ngrok.com and register for member
    b. open https://dashboard.ngrok.com/get-started/your-authtoken
    c. copy that NGROK_TOKEN


# Run Host and Client

## A. Start code-server
- You cand starat it in the foreground
```
code-server
```
- or in the background
```
code-server &
```

Then it will return an address with port number.
> e.g. ```127.0.0.1:8080```

You can access the hosted session with that address if you host the service but we are not in this case here...

### B. Run ngrok
1. You have to config your ngrok service with the token you got:
```
ngrok config add-authtoken NGROK_TOKEN
```

2. Now start the ngrok service and for ward your port to the public website
```
ngrok http 8080
```
## C. Start the client from browser
Go to the site that ngrok provide, and...
> e.g. https://c302-180-109-17-41.ngrok-free.app/

Voila!!! Now you can have them both:
1. GPU resource from AIA PrimeHub server
2. Your favorite IDE extensions for coding
3. Spare your resources for local computer 

Note that your password for login will be at ```~/.config/code-server/config.yaml```.
You can show that with ```cat ~/.config/code-server/config.yaml```