How to get VSCode for iPad

I have always wanted to be able to code effectively on an iPad. Apple recently announced new iPadOS, I thought this was the right time to give this a shot.

I will walk you through how I managed to get the above on my iPad Pro. This is inspired by another blog that explained how to get VSCode running using Digital Ocean. However, I decided to make use of my Macbook Pro w/ 16gb RAM instead. The reason being, Coder eats up your memory and to be able to effectively use it on Cloud server providers (AWS, Digital Ocean, etc...) you would need to spend at least $20 a month.

Pre-requests

1. Coder (an amazing open source project to get VSCode on your browser)
2. A machine that can run Coder — I will be explain how I did it from MacOS
3. An iPad :)

Pro-tip: Use Chrome remote desktop to control your PC from your iPad to perform steps mentioned in this tutorial.

Let’s get started
We will first make sure we set up the machine we will be connecting to from our iPad. From that machine:

1. Head to Coder github page > releases page
2. Download the latest version (Darwin version for MacOS)
3. After unzipping the file, you can simply run it from terminal using ./code-server --no-auth --allow-http

You should be able to access it on http://localhost:8443 from your machine.

Now let’s make sure that we can access this server from outside your local network AKA the Internet.
From the same machine:

1. Access your router settings > Port forwarding (Find your router IP from System Preferences > Network > Router IP)
2. Enable external port of your choice to code-server’s port 8443 and point it to your Machine’s IP
3. Get your public IP (Google it)

Here’s how I had my Huawei router configurations.

There’s one more thing I had to do to be able to access from my iPad, which is to secure the connection using SSL/TSL certificates. You can find out more on how to do it here.

After you are done following above steps, run coder again with certificates generated:
./code-server --cert=/Users/{user}/certs/MyCertificate.crt --cert-key=/Users/{user}/certs/MyKey.key --allow-http --no-auth

You should be able to access code-server from outside your own WIFI on http://{public-ip}:{port} (note we are using http not https). You now have a full version of VSCode on your ipad, with an integrated terminal to run your favorite frameworks.

You can repeat above steps to open different ports to be able to run VSCode along with Angular/React/Ionic or any project that you will develop using VSCode at the same time.

Even though, I have not used it frequently on my iPad yet, I think the experience of VSCode on the iPad is truly a blast. This way I’m able to tweak in any project literally anytime, anywhere.

Please let me know if you have faced any problems along the way, I will try my best to help out.

Comments

[dumdumdev]

Have you tried Codesandbox.io?

[Saud Alhelali]

I have used it lightly along with stackblitz.com. However, I’m more productive when working on VSCode with my own terminal and local files right there.