How to use WebStorm on the server
Tags: javascript, webdev, development
Published: 2021-04-23 18:10:42

---
title: How to use WebStorm on the server
published: true
description: 🔥 Step-by-step guide on how to run your favorite IDE on the server.
tags: javascript, webdev, development
cover_image: https://www.jetbrains.com/webstorm/img/screenshots/webstorm-main.png
---

TLDR: Running WebStorm via Projector requires a noticeable amount of resources, 1CPU, 2Gb RAM won't be enough 🤷‍♂️

Recently I've stumbled upon the new Jetbrains technology called [Projector](https://blog.jetbrains.com/blog/2021/03/11/projector-is-out/), tried it on the local virtual machine. It worked very nice, so I've decided to give it another try on my [DigitalOcean](https://www.digitalocean.com/) machine. 

Make some tea and get cookies, we are diving in 🤿

## Requirements

✅ DigitalOcean machine.
✅ Domain connected to DigitalOcean.
✅ Some free time 🤷

## Setup

My DigitalOcean machine is super basic, it is just 1CPU/2GB RAM/10$ per month.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/705u82hkzrhwomq7jmh9.png)

As you can see, I'm running default ubuntu 20.04 LTS, which, again, should be the most popular choice, so I won't stop here for long. 

## Projector setup

In order to run the projector, we need to install [projector-server](https://github.com/JetBrains/projector-installer) on our DO server and [client](https://github.com/JetBrains/projector-client/releases) on your own computer.

First, we need to install all dependencies (the most recent docs are [here](https://github.com/JetBrains/projector-installer)).

```
sudo apt install python3 python3-pip -y
python3 -m pip install -U pip 
sudo apt install less libxext6 libxrender1 libxtst6 libfreetype6 libxi6 -y  
pip3 install projector-installer --user
# you may need to add this line to .bashrc or to .zshrc
source ~/.profile 
```

Now we can install the needed version:
```
### Just select WebStorm, all options are straightforward
projector install
```

❗️It will automatically run it after the install steps, so I would recommend immediately turn it off because it will be exposed without any password protection right away❗️

There are some "secure" steps described in the official FAQ, but they turned out to be misguiding and hard to follow for me 🤷‍♂️ We will choose a bit different direction here.

To make the projector run in a password-protected mode we need to manually configure it.

```
projector config edit
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d59uahx0a1b1qy2fofks.png)

Here are the most important questions.
**Use secure connection (this option requires installing a projector's certificate to browser)?** - you need to select **No** here, we will configure it later.

**Would you like to set password for connection? [y/N]** - you must select **Yes** here. You don't want your editor to be exposed to the world, do you?

So right now we can try to run it locally.

```
projector run
```

If you see something like this, it means your projector is working.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3c46vmyv1abqpg0dkpd.png)

Let's configure encryption 🔐

## NGINX

We will be using [NGINX](https://www.nginx.com/) and [certbot](https://certbot.eff.org/) to handle all encryption.

Long story short, here are the Nginx config which we need to put to `/etc/nginx/sites-enabled/projector.example.com`

{% details projector.example.com %}
```
server {
    listen 80;
    listen [::]:80;

    server_name projector.example.com;

    location / {
      proxy_pass http://localhost:9999;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
      proxy_set_header Host $host;
    }
}
```
{% enddetails %}

Now we just need to reload Nginx
```
sudo systemctl restart nginx
```

## Certbot

[Certbot](https://certbot.eff.org/) is a CLI for [LetsEncrypt](https://letsencrypt.org/), which allows us to use SSL(HTTPS) for free, big thanks to them 🙏
 
The installation process is SUPER simple, so I won't even list it here. You can just follow [these instructions](https://certbot.eff.org/instructions).

In the end, your /etc/nginx/sites-enabled/projector.example.com should look like this:

{% details projector.example.com %}
```
server {

    server_name projector.example.com;

    location / {
      proxy_pass http://localhost:9999;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
      proxy_set_header Host $host;
    }

    listen [::]:443 ssl; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/projector.example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/projector.example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
    if ($host = projector.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    listen [::]:80;

    server_name projector.example.com;
    return 404; # managed by Certbot


}
```
{% enddetails %}


## Final blow

✅ The projector is installed.
✅ NGINX & Certbot are installed and configured.
...

We are good to go, let's run it!

```
projector run
```

Check your password on the console and you will be able to access the projector even via your browser at `https://projector.example.com/?token=$TOKEN`

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cif2vgbymzipxb6rz8ka.png)

Also, you can install the [projector client](https://github.com/JetBrains/projector-client/releases), you will be able to access WebStorm via the desktop app.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lz0nbe36roozhhl1vg7.png)


## Performance
Default (1% of CPU, 224MB of RAM):
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0vrddb28xqd7kwr7i31.png) 

Just opened WebStorm (3% of CPU, 976MB of RAM):
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15djcozoz7terdy4kf6j.png)

Editing file (98.7% of CPU, 978MB of RAM):
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gobdg1ftm157400050uk.png)

It feels ok, but sometimes it is a bit laggy, especially when you are building something in the background.

---

Btw I will post more fun stuff here and on [Twitter](https://twitter.com/kozlovzxc) let's be friends 👋