<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Saud Alhelali</title>
    <description>The latest articles on Forem by Saud Alhelali (@alhilali).</description>
    <link>https://forem.com/alhilali</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F180858%2Fbbaed4be-ecfc-4ec2-9918-caf707c855b5.jpeg</url>
      <title>Forem: Saud Alhelali</title>
      <link>https://forem.com/alhilali</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/alhilali"/>
    <language>en</language>
    <item>
      <title>How to get VSCode for iPad</title>
      <dc:creator>Saud Alhelali</dc:creator>
      <pubDate>Sat, 15 Jun 2019 17:35:19 +0000</pubDate>
      <link>https://forem.com/alhilali/how-to-get-vscode-for-ipad-3p91</link>
      <guid>https://forem.com/alhilali/how-to-get-vscode-for-ipad-3p91</guid>
      <description>&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu36nuy635mvqwp6j3k1v.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu36nuy635mvqwp6j3k1v.jpeg" width="800" height="558"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I will walk you through how I managed to get the above on my iPad Pro. This is inspired by another &lt;a href="https://medium.com/@ow/its-finally-possible-to-code-web-apps-on-an-ipad-pro-90ad9c1fb59a" rel="noopener noreferrer"&gt;blog&lt;/a&gt; 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, &lt;a href="https://github.com/cdr/code-server" rel="noopener noreferrer"&gt;&lt;strong&gt;Coder&lt;/strong&gt;&lt;/a&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pre-requests&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;a href="https://github.com/cdr/code-server" rel="noopener noreferrer"&gt;&lt;strong&gt;Coder&lt;/strong&gt;&lt;/a&gt; (an amazing open source project to get VSCode on your browser)&lt;/li&gt;
&lt;li&gt;A machine that can run Coder — I will be explain how I did it from MacOS&lt;/li&gt;
&lt;li&gt;An iPad :)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;em&gt;Pro-tip: Use Chrome remote desktop to control your PC from your iPad to perform steps mentioned in this tutorial.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Let’s get started&lt;/strong&gt;&lt;br&gt;
We will first make sure we set up the machine we will be connecting to from our iPad. From that machine:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Head to Coder github page &amp;gt; releases page&lt;/li&gt;
&lt;li&gt;Download the latest version (Darwin version for MacOS)&lt;/li&gt;
&lt;li&gt;After unzipping the file, you can simply run it from terminal using &lt;code&gt;./code-server --no-auth --allow-http&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You should be able to access it on &lt;a href="http://localhost:8443" rel="noopener noreferrer"&gt;http://localhost:8443&lt;/a&gt; from your machine.&lt;/p&gt;

&lt;p&gt;Now let’s make sure that we can access this server from outside your local network AKA the Internet.&lt;br&gt;
From the same machine:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Access your router settings &amp;gt; Port forwarding (Find your router IP from System Preferences &amp;gt; Network &amp;gt; Router IP)&lt;/li&gt;
&lt;li&gt;Enable external port of your choice to code-server’s port 8443 and point it to your Machine’s IP&lt;/li&gt;
&lt;li&gt;Get your public IP (Google it)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Here’s how I had my Huawei router configurations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn5e35s5ryw1dhecrxo0e.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn5e35s5ryw1dhecrxo0e.jpeg" width="800" height="408"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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 &lt;a href="https://github.com/cdr/code-server/blob/master/doc/security/ssl.md" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

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

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Please let me know if you have faced any problems along the way, I will try my best to help out.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>vscode</category>
      <category>webdev</category>
      <category>ios</category>
    </item>
  </channel>
</rss>
