DEV Community

loading...
Cover image for How to use WebStorm on the server

How to use WebStorm on the server

kozlovzxc profile image Nikita Kozlov ・4 min read

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, tried it on the local virtual machine. It worked very nice, so I've decided to give it another try on my DigitalOcean 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

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 on our DO server and client on your own computer.

First, we need to install all dependencies (the most recent docs are here).

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 
Enter fullscreen mode Exit fullscreen mode

Now we can install the needed version:

### Just select WebStorm, all options are straightforward
projector install
Enter fullscreen mode Exit fullscreen mode

❗️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
Enter fullscreen mode Exit fullscreen mode

image

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
Enter fullscreen mode Exit fullscreen mode

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

image

Let's configure encryption πŸ”

NGINX

We will be using NGINX and certbot 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

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

Now we just need to reload Nginx

sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

Certbot

Certbot is a CLI for LetsEncrypt, 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.

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

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


}
Enter fullscreen mode Exit fullscreen mode

Final blow

βœ… The projector is installed.
βœ… NGINX & Certbot are installed and configured.
...

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

projector run
Enter fullscreen mode Exit fullscreen mode

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

Also, you can install the projector client, you will be able to access WebStorm via the desktop app.

image

Performance

Default (1% of CPU, 224MB of RAM):
image

Just opened WebStorm (3% of CPU, 976MB of RAM):
image

Editing file (98.7% of CPU, 978MB of RAM):
image

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 let's be friends πŸ‘‹

Discussion (0)

Forem Open with the Forem app