VS Code on my Phone for Website Dev... (How I did it)

VS Code on my Phone for Website Dev... (How I did it)
I setup VS Code on my mobile phone and started developing websites. This is entirely possible to do from any location, on any devices such as an iPhone, iPad, Android or tables.
Using vscode on any devices requires it to be accessible on the browser. To do this, we use a package called code-server. This allows us to access our physical machine remotely via the web, which VS Code will be running on. Since VS Code works on Electron, it's not normally accessible on platforms outside of a desktop.
However, this solution allows you to perform web dev through the browser. This setup can also be done through workspaces, or even through your own cloud server via Amazon or Google Cloud platform.
If you're a web developer, you should definitely give this a go. Be aware that security is a must for this implementation, as it does mean that your system is accessible remotely, so use SSL, have passwords, etc.
Code Server can be found here on github:
github.com/cdr/code-server
#vscode #website #development
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: www.enhanceui.com/
Feel free to follow me on:
🐦 Twitter: intent/follow?scr...
💬 Discord: / discord
💸 Patreon: / adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: 1.envato.market/yRZjz2
🌿 Envato Elements: 1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: www.editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE

[@developedbyed]

The video I always wanted to make but I was too lazy to set the whole thing up lol. Good job! Now code out a whole website on your phone and film it

[@AdrianTwarog]

Based on the amount of time this took, and the number of camera angles required, sure, no worries, I’ll do this in my sleep!

[@hakemrayan9795]

Edwin c'mon man I was trying to install vs code on my new phone u should make a video my gorgeous friend😂

[@hakemrayan9795]

Adrian this did really work for me thanks alot, I have a potato laptop

[@SandeepSingh_0x0]

Nice to meet you " PewDiePie of Computers" , literally I am having a great respect for you sir , by the way I am from India 🙏 , I will be purchasing your courses whenever I have collected some money😂 thanks for your GOLD content

[@abhiramam5752]

@Dev Ed Hello My Gorgeous Teacher On The Internet. ❤ FROM 🇮🇳

[@AdrianTwarog]

This was heaps of fun to do, if you want to check out another cool vid, watch kzbin.info/www/bejne/fX7RaqaueLyBZq8 shows you what a day in my life looks like!

[@harieshwarja2628]

Is there a way to do it in windows... Using workspace will be a little overkill if it's just for editing using phones or tablets, I guess. Can you please post a video for windows too!

[@joonyoon1626]

Hi Adrian, I encountered my MacBook Pro shutting down and restarting every time I connect from my iPad...wonder why that would be?

[@AdrianTwarog]

@@joonyoon1626 hardware error maybe?

[@avengersbro1530]

Give me name apps phone.

[@jonathantribble7013]

If it can run in a server on your laptop, can it run in a server on your phone?

[@BenRogersWPG]

Two things: Amazing video, great tips I love your little dances when you talk as well. Very exciting for keeping my focus

[@WayneWhitaker314159]

Fantastic info, fantastic video. Love the multiple camera angles.

[@AdrianTwarog]

Thanks, I put a heap of effort into it!

[@ZernityX]

Isn't anybody going to talk about his body language and facial expression while explaining? I mean that's unique.

[@AdrianTwarog]

Haha thanks man!

[@poldilite]

I’m getting nervous watching it 🙈

[@mirzaaghaalikhan183]

Dont quite remeber but he has played either his video on low FPS or Higher FPS in post production!

[@AdrianTwarog]

@@mirzaaghaalikhan183 neither, but I did use to play a lot of FPS if that counts!

[@mirzaaghaalikhan183]

@@AdrianTwarog I am quite happy I got attention of a programmer at index 0. And by FPS, if you mean videogames, then I am your fan already.. Cheers ¦--} Edit: my assumption was based on this, you may want to check this out! kzbin.info/www/bejne/fWGVZqKurrypZqc

[@MaxProgramming]

Wait what! VS Code on phone? I think it is about Codespaces. That's so different! Thanks a lot for the video Adrian!

[@AdrianTwarog]

Always testing the water for new tech

[@Jorgitopy101]

Wow! This is so simple. A great option for it could be a cheaper Mac Mini, setup as a home server.

[@AdrianTwarog]

Or a free cloud server!

[@Kukalooka]

I was looking for this Thank you!!

[@AdrianTwarog]

Haha great!

[@soul.rebel1986]

This is awesome ^^ I really appreciate you sharing this with us🙏🏽

[@AdrianTwarog]

My pleasure 😊

[@Weibenfalk]

Another awesome video Adrian!

[@AdrianTwarog]

Thanks!

[@heinekhalwin8735]

Wow ! I never knew about this ! Thanks for info. :D Was gonna ask Ben Awad to create vs code for ipad. Now i dont need to. :D

[@AdrianTwarog]

Awesome idea though, feel free to send more like those my way any day!

[@amrinderc]

Great tutorial.. which font are you using on this? I am not able to use the font that I typically use like CasCadiaCode with Powerline Gylphs which give me custom symbols. Any idea how to do that?

[@masterhifi3939]

Wow. Cool. The best video of my mind. Thanks for sharing.

[@developerfilip]

Thanks for doing the thing I always wanted to do but never wanted to do :D lol

[@AdrianTwarog]

This is what I’m here for :)

[@rohanmathewalex5470]

Awesome thank you man. Great 🔥

[@AdrianTwarog]

No problem 👍

[@folarichards8704]

You're awesome Adrian.

[@iM4yur]

Helpful, Liked & you got subscriber too ☺️

[@rrarrrr]

This is cool and I'm toying with the idea of making a website on my phone. Only problem I have is that the backspace key doesn't work on my phone. Works fine when using my PC though.

[@mohamadou.mouktar]

Awesome thank you. 🤗

[@glendemarcos3696]

I've tried codespaces and it is the future... Also, a phone can be a desktop - using a Samsung phone and DEX I just needed peripherals (monitor, mouse and keyboard) to have a desktop experience running VS code from my phone.

[@codevev]

Yes but I think the idea is to not be tied to a desk

[@ben-cb5er]

Excellent video!! Thank you... Now I can't get away from vscode ever 😂

[@AdrianTwarog]

Exactly!

[@Draxen]

I just need a tiny keyboard to Bluetooth to my phone, then easy web dev on the go 🤘🤘

[@AdrianTwarog]

Perfect

[@thatcurioustrader2166]

and VR headset and boom you have vscode projector on the go.

[@AdrianTwarog]

@@thatcurioustrader2166 stay tuned for the next video :)

[@alwinvillero4404]

@@AdrianTwarog holy shit

[@mosesondari8725]

Wow my mind is open

[@MrDe0]

Wow, that is amazing !!

[@ocavuew7422]

Just to be clear, vscode (and the editor behind vscode called Monaco) doesn’t support touch screen well. You can move the cursor by touch the screen, but you can’t select characters.

[@justinTime077]

Yeah but Splashtop does. (Just to be clear)

[@FalseHuman]

It's great, thank you:)

[@rudresh7]

This is so Cool Video . Just Love It

[@jared4670]

Here I am fighting with hackintosh and what not all the time but the idea just clicked that I can just run codeserver on a VM under proxmox. So now I have a plan B if my hackintosh blows up when upgrading to Big Sur. Still is a bummer about the extensions, it's the one thing that has kept me at the testing stage of codeserver. At the start of your video it looked like you were launching and app for codeserver?

[@darakushitatamashi8837]

VS code is an open source project, and electron aps can be compiled to run on Android, in conclusion it should be possible to compile VS code to an android app. If it works and is useble is an other question

[@explore9853]

Awesome video! I was just wondering, by doing the first part of this video (the config and ip address and by putting in that url) will that install anything on my wifi network and/or on my computer?

[@enemysenemyPS]

Thanks for the video! I will try it! But first, is the VS code vim extension works? I came across several online editor all of them doesn't work in any browser in iOS (webkit)

[@tadorleestudiotv2037]

Good job bro👍🏻👍🏻

[@latinstuff1]

you move so much dude lol, but great quality video, loved it.

[@console.logged]

Great work! but code-server keeps losing the connection and I need to run the command every time. Any way to fix this?

[@Gameplayer55055]

Now you can do site mobile adaptive design without pain But with magnifying glass hehe

[@geekdeelino]

Lovely, nice content.

[@erikreider]

"maybe also Linux"😂 Dude, it's electron

[@user-un2qi4eo9n]

What meaneth you?.... I am i new a stupid person to this realm of coding gibberish

[@erikreider]

@@user-un2qi4eo9n Electron is like a simplified web browser that uses websites to create applications like Discord, MS Teams, VSCode. It supports almost every desktop platform 😀

[@FalseDev]

I'm on Linux and I use vs code

[@erikreider]

@@FalseDev me too :)

[@Adi-xe4ut]

slurp i ever install VS Code on Ubuntu

[@fermincabrera1772]

Your gestures are cool

[@jaygohel1728]

That trick is very unique and simple i like it.

[@MrXHDTV]

Great video but it kinda sucks companies don't release IDE's like VSCode for Android Tablets like Samsung Tab S7+ or iPadOS tablets. Modern tablets are very powerful and can fully replace a PC or Mac, the only issue is the software.

[@sirAvdul]

I agree for android, since android is more open than iOS/iPadOS. I think the only issues is big IDE maker don't see the Android tablet community for programming is big enough to bother. The Ipad has more potential to make big IDE maker interested but the iPadOS limitation is the issue.

[@MrXHDTV]

@@sirAvdul you can run vscode on android with a local linux virtual machine but it's not the best

[@bhanusrinivaskoppolu4814]

how can you guide me

[@alexandrakassis]

I’m trying to get into the config file but I don’t have links like you do in my terminal! I don’t know how to open the config file! Helppp

[@AdrianTwarog]

It should start off with an IP address

[@learnmaziyyah473]

yeah brad already did this before 1-2 years ago : really good piece of technology

[@AdrianTwarog]

It’s super, their alpha beta system makes it even easier now

[@beverly2jaustin]

With some tech, I don’t bother watching a possibly outdated video from 1-2 years ago. Thank you Adrian!

[@eiodelami]

Lots of love @AdrianTwarog wonderful tutorial ❤

[@worke7270]

@@AdrianTwaroghow not clear

[@scottycee6655]

I love how you said maybe also Linux. Don’t worry you got it right. It is on Linux.

[@AdrianTwarog]

Oh god I wasn’t stressing, I wasn’t, I wasn’t. I was?

[@sairajk19]

Linux is god🙇🏻‍♂️

[@sairajk19]

@@AdrianTwarog I don't think so :-)

[@rifkiardiansyah616]

im using ubuntu x vscode

[@fernwood]

I was just wondering this last night! If I saw this video 24 hours earlier I wouldn’t have spent $10 on an iOS remote code editor 😦

[@michaelakubas]

Hi Adrian, I tried this but its not working for me. I have macos and vs code but its not working. Any ideas about that? Thanks

[@santiagotrindade2724]

Do you recommend using Mac for programming? I have seen that it has a lot of problems using some frameworks. Would like to know your opinion :) .

[@Supperconductor]

I use macOS, Windows and Linux daily. My preference is to run Linux for development.

[@AdrianTwarog]

I used a bit of everything, depending on the use case

[@AdrianTwarog]

I'll have to try Linux a bit more

[@sharriceowens913]

Sir I'm confused vs code IS available in the play store as an app to download so why do all this?

[@musa94]

Really cool!

[@rahavareddy5510]

This is the video I am looking for

[@AdrianTwarog]

Haha great!

[@timkim0713]

Is there a big difference between this and Google Remote Desktop?

[@petercheung63]

thanks for your video :-)

[@Pankaj-Verma-]

Thank you.

[@thevarungrovers]

Can you please also tell about how to add a ssl to the ip address?

[@sidsss2036]

Can we run angular in visual studio code or any other IDE on ipad pro?

[@marcello4258]

i guess using the broadcast will find some servers ;) ..do you have an idea how much data is transferred over the internet? speaking of how heavy it is on your data plan.. 2ndly.. can you run terminal commands to be executed on the remote machine? like compiling the code and run a the jar or whatsoever?

[@IsusVonBier]

Yes

[@GameBOY69]

Hey!! Bro when i running any python program it is asking to install python but i don't know how to do that so please do something for it ❤️❤️

[@itchannel5440]

Thanks buddy

[@AdrianTwarog]

No problem 👍

[@user-ue5kt1tj7i]

Can someone please tell me what that is @ 3:36 and what it's use is? The very small text on the upper right of his VS Code program. I have that too. Its the thing right next to the scroll bar. It erks me because I dont know what it does or how to toggle it off.

[@CoderHQ]

5:48 haha, epic video!

[@alimansourey2076]

Yes .. Exactly ... ! You lost me after one second , I will forget about this idea and go with codepen 😃

[@jaylenpersad5320]

how to get a terminal for ios ;-;

[@TheCodingOdyssey]

drink a shot everytime the scene changes...or maybe not :D ha ha just kidding, great editing!

[@nathimthembu1199]

Like three days ago I was wondering if there is code editor app like for mobile phones, today I get a notification.

[@AdrianTwarog]

Perfect!

[@asandax6]

Don't code your phone. Trust me I've been in the situation Where I didn't have a laptop or desktop and Tried learning to code on a phone it was a waste of time because I couldn't test some applications.

[@frankvonhoven]

lol we have the same monitor nice vid :)

[@itsSpidey-]

Nice background on your computer

[@jokesuniverse8469]

Hello, As i was setting uo Visual studio i kind of broke it, now it doesn't let me debug the code? Please help

[@666Odysseus666]

I don't get this, why do this when you still need the physical server in addition to your phone/tablet anyway? Why not just remote into your server on VNC, TeamViewer etc. and just use VS Code there? You can access the whole server desktop as well as VS Code then? Am I missing something? Surely the point is to actually run VS Code on your phone via Linux emulation and not need a physical server?

[@nitinprabhu291]

You are amazing

[@AdrianTwarog]

Haha thanks

[@krnotveryjetty9186]

sh : The term 'sh' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. Also, how did you create it as an 'app' (link to browser type thing) on your iphone? Thanks!

[@blueninja7113]

u need to get a linux terminal

[@asaffisher8890]

Instead of binding the to the IP given in ifconfig you can just bind it to 0.0.0.0 that way you won’t need to change it when dhcp changes your ip... also it will work with all your network interfaces..

[@matttroughton7391]

had to stop three minutes into your video cuz I kept running into issues with my terminal. do you think you could help me out with it. 'im not currently having much luck using terminal in the way you did

[@beinghomie]

Any alternate for windows users other than termux?

[@style-it-up]

I don't get to see the configuration file where I could get to change the password as a link. Any assistance with that?

[@anishkumar6062]

I facing a issue : "error Please specify at least one file or folder" what is solution to this please answer !!

[@b2c205]

How did you make your ip so fancy ?

[@gauravrathod5858]

Nice❤️

[@user-bx6eg1dt1p]

Hi, I got 'error listen EADDRINUSE: address already in use 127.0.0.1:8080' message...what I can do?

[@nageshsahu4964]

Will vscode support on 2 GB ram phone?

[@minikame2272]

I have a similar setup using Code Server, and it's my daily driver - even at home. Why at home? Because it has the ability to be installed 'natively' as a PWA! Since Electron is just a glorified PWA in the first place, it looks and feels as good as the native app with almost zero compromises, but with the added benefit of being able to simply disconnect whenever I like without ever stressing about losing work etc and picking it up wherever I am in the world.

[@twarogchat___my__Teleqram_id]

👆send a direct message for support and guidance.

[@francescociulla]

WATCHING!

[@sripathiavinashkumar936]

Is it Works When The Laptop or Pc Is Poweroff🤔

[@michalski9141]

this + a portable monitor and keyboard 😍

[@justinbhalla746]

Smashed the like button!

[@AdrianTwarog]

Boom! Yes!

[@ledinhthai69]

Hi! I code by VScode and show result by android studio. Everything is ok and then I change my screen from portrait to landscape but the layout does not change to. You please tell me why and what I should do to repair the error. Thanks for your help

[@twarogchat___my__Teleqram_id]

👆send a direct message for support and guidance.

[@bennett322]

When I type in code-server it says command not found. What do I do

[@UngabungaRD2.0-kz4cu]

i did not have laptop or computer or macbook. how i can install or run in chrome

[@naoremsana5664]

Hey, can you make video of installing code-server in digitalocean server?

[@talktime_s]

Do you have to have a desktop pc?

[@blueninja7113]

When im trying to Connect to it via my mobile device. Its not loading. but if i use my public ip it loads but asks me for Sign in. ""my ip" requires a username and password. Your connection to this site is not private

[@twarogchat___my__Teleqram_id]

👆send a direct message for support and guidance.

[@jobekun]

Can you use it offline tho?

[@mr.anonymous8410]

Thank you I wrote this in the terminal yarn global add code-server code-server & Got the server link but don't know how to stop the server.

[@AdrianTwarog]

Just control c should cancel the terminal and session

[@mr.anonymous8410]

@@AdrianTwarog Thanks a lot.

[@rangabharath4253]

awesome

[@AdrianTwarog]

Good!

[@_fuji_studio_]

sadly this is too lag in my 3gb ram phone android 11, so I still use acode editor, basically I face no issue with acode editor, its fast and can edit file that located in termux home directory, can do sftp that also fast, it has some extention that usefull like tailwind completetion, color preview, etc, but it lacks advance extention that available in vscode that make me want to try install it in my phone like golang/rust extention but actually it is not big deal because I can see the error in termux and browse the syntax, just want to try to improve productivity by simplifying thing if possible

[@Anhar001]

While an interesting approach, a much better way would be to use one of the many existing Web based IDEs that actually just VSCode. I forget the name of the product, but I'm sure someone else might remember

[@Ayush-vm8mg]

Spck editor is good to go👍

[@celestialadministration]

Can this work on free bsd or open bad?

[@showmickkar7793]

I have the same desktop wallpaper!!!

[@aamishakhtar4763]

When i paste the first line of code, it says not recognized. Please help

[@demonsrgttxyt6348]

Can u tell how u did it on mobile plz i was searching for discord bot code

[@VenkatGudavalli]

Unbelievable 🥶

[@scaleless8875]

I get an Error wich says that "sh" was not found. Somebody know the Problem? I am using Windows

[@jjophoven]

When I try to type the command to install it it says that sh is not a command. Can someone please help!