VS Code on my Phone for Website Dev... (How I did it)
HTML-код
- Опубликовано: 11 сен 2024
- 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...
#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....
Feel free to follow me on:
🐦 Twitter: in...
💬 Discord: / discord
💸 Patreon: / adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.i...
🌿 Envato: 1.envato.marke...
🌿 Envato Elements: 1.envato.marke...
🔴 Elementor: elementor.com/...
✖ Editor X: www.editorx.co...
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
![How to code on your iPad with VS Code for free [Beginners guide]](http://i.ytimg.com/vi/zlhfnEiNn1o/mqdefault.jpg)
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
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!
Edwin c'mon man I was trying to install vs code on my new phone u should make a video my gorgeous friend😂
Adrian this did really work for me thanks alot, I have a potato laptop
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
@Dev Ed Hello My Gorgeous Teacher On The Internet.
❤ FROM 🇮🇳
Isn't anybody going to talk about his body language and facial expression while explaining? I mean that's unique.
Haha thanks man!
I’m getting nervous watching it 🙈
Dont quite remeber but he has played either his video on low FPS or Higher FPS in post production!
@@mirzaaghaalikhan183 neither, but I did use to play a lot of FPS if that counts!
@@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!
ruclips.net/video/G025oxyWv0E/видео.html
Wait what! VS Code on phone? I think it is about Codespaces. That's so different! Thanks a lot for the video Adrian!
Always testing the water for new tech
Wow! This is so simple. A great option for it could be a cheaper Mac Mini, setup as a home server.
Or a free cloud server!
Two things:
Amazing video, great tips
I love your little dances when you talk as well. Very exciting for keeping my focus
This was heaps of fun to do, if you want to check out another cool vid, watch ruclips.net/video/GMn9sxCWN0M/видео.html shows you what a day in my life looks like!
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!
Hi Adrian, I encountered my MacBook Pro shutting down and restarting every time I connect from my iPad...wonder why that would be?
@@joonyoon1626 hardware error maybe?
Give me name apps phone.
If it can run in a server on your laptop, can it run in a server on your phone?
Fantastic info, fantastic video. Love the multiple camera angles.
Thanks, I put a heap of effort into it!
Thanks for doing the thing I always wanted to do but never wanted to do :D lol
This is what I’m here for :)
I just need a tiny keyboard to Bluetooth to my phone, then easy web dev on the go 🤘🤘
Perfect
and VR headset and boom you have vscode projector on the go.
@@thatcurioustrader2166 stay tuned for the next video :)
@@AdrianTwarog holy shit
Wow my mind is open
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.
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.
@@sirAvdul you can run vscode on android with a local linux virtual machine but it's not the best
how can you guide me
Another awesome video Adrian!
Thanks!
I love how you said maybe also Linux. Don’t worry you got it right. It is on Linux.
Oh god I wasn’t stressing, I wasn’t, I wasn’t. I was?
Linux is god🙇🏻♂️
@@AdrianTwarog I don't think so :-)
im using ubuntu x vscode
"maybe also Linux"😂 Dude, it's electron
What meaneth you?.... I am i new a stupid person to this realm of coding gibberish
@@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 😀
I'm on Linux and I use vs code
@@FalseDev me too :)
slurp i ever install VS Code on Ubuntu
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.
Yes but I think the idea is to not be tied to a desk
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
Awesome idea though, feel free to send more like those my way any day!
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.
Yeah but Splashtop does. (Just to be clear)
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
yeah brad already did this before 1-2 years ago : really good piece of technology
It’s super, their alpha beta system makes it even easier now
With some tech, I don’t bother watching a possibly outdated video from 1-2 years ago.
Thank you Adrian!
Lots of love @AdrianTwarog wonderful tutorial ❤
@@AdrianTwaroghow not clear
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?
I was looking for this
Thank you!!
Haha great!
For people who got confused, he edited the part where it showed his own public IP to 255.255.255.255 (it's not a valid Public IPv4) don't try. ^^
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.
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?
Man probably just doxxed himself for educational purposes. What a legend. Truly brings a tear to my eyes. 🥺
This is awesome ^^ I really appreciate you sharing this with us🙏🏽
My pleasure 😊
Excellent video!! Thank you... Now I can't get away from vscode ever 😂
Exactly!
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?
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 😦
Now you can do site mobile adaptive design without pain
But with magnifying glass hehe
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..
Wow. Cool. The best video of my mind. Thanks for sharing.
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!
u need to get a linux terminal
how to get a terminal for ios ;-;
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
It should start off with an IP address
Awesome thank you man. Great 🔥
No problem 👍
Unpopular opinion: Restricting where you can write code and where you can write code actually makes you a better developer.
Why?
Not the case. Whenever you impose restrictions upon the tools you use you simultaneously restrict the scale of what you can create
Do not attempt to do this at home. Do not port-forward anything to your personal computer. It’s a major security risk.
It’s like giving the whole world access to this service. It’s bad. Use an external server. Someone can easily find your use one days on your vscode plug-in and bypass the password accessing your personal information and changing it.
Sir I'm confused vs code IS available in the play store as an app to download so why do all this?
this + a portable monitor and keyboard 😍
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
Spck editor is good to go👍
You're awesome Adrian.
Yes .. Exactly ... !
You lost me after one second , I will forget about this idea and go with codepen 😃
The question is not how, but why!
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)
You can run vs code on Android easily with termux.
Is it ?
umm ok
How??
Don't work :(
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 :) .
I use macOS, Windows and Linux daily. My preference is to run Linux for development.
I used a bit of everything, depending on the use case
I'll have to try Linux a bit more
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 ❤️❤️
Great work! but code-server keeps losing the connection and I need to run the command every time. Any way to fix this?
5:48 haha, epic video!
"runs maybe even on Linux"
XD
like.. bruh
Linuix in phone is possible
That trick is very unique and simple i like it.
This is the video I am looking for
Haha great!
That's great. But for me uncomfortable to code on a mobile phone. Thanks for sharing
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.
👆send a direct message for support and guidance.
Like three days ago I was wondering if there is code editor app like for mobile phones, today I get a notification.
Perfect!
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.
Good job bro👍🏻👍🏻
Helpful, Liked & you got subscriber too ☺️
This is an affordable option. I cannot move my laptop from its place (battery died) so my only portable option is my phone.
OMG, why is this guy dancing while talking.?? hahaha
I have too much energy!
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?
WATCHING!
Great, But I sense security breaches. Can't be trusted. But can be tested. 👍🏻
Yep security is a must with this one
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
Nice background on your computer
This is so Cool Video . Just Love It
you move so much dude lol, but great quality video, loved it.
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.
Just control c should cancel the terminal and session
@@AdrianTwarog Thanks a lot.
Awesome thank you. 🤗
drink a shot everytime the scene changes...or maybe not :D ha ha just kidding, great editing!
I just shared the vid to my friends 😂😂...
Haha that’s great you liked it!
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?
Yes
It's cool but I need my physical keyboard to work.. not phone keyboard 😅
Good point!
Just connect your physical keyboard to phone using otg
Thanks, I have a question and I hope you dont find it rude:
why in all your pictures you catch your chin? what's with the chin?
I reply don’t know, but now that I started, I can’t stop! It’s almost iconic!
I think he thinks a lot!! Lol😂😂
Can you please also tell about how to add a ssl to the ip address?
isnt 255.255.255.255 the broadcast address of every network?
Nice find, I was a bit cheeky here, not many people noticed!
Wow, that is amazing !!
Meanwhile Android users: Downloads vhe editor from Play store
It runs vs code virtually so no PC is required and using this application u can also save files to your local machine (phone)
Lovely, nice content.
It's great, thank you:)
This was 3 years ago. Ohh . Bro in 2024 we now have vscode on mobile 😂😂😂
Funny how ppl differentiate Macs from PCs like Mac aint a PC....we shld separate windows too 😂
hahah good point
Didn't like Apple themselves separate it too in commercial?
Your gestures are cool
When I try to type the command to install it it says that sh is not a command. Can someone please help!
I facing a issue : "error Please specify at least one file or folder" what is solution to this please answer !!
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
why would you want to code on a mobile phone or tablet? Screen would be too small
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.
this is a problem for me because i need to use vs code on my android tablet without my computer being on
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
👆send a direct message for support and guidance.
but... why? Painful to think about trying to program on a touchscreen, especially a small one.
There is also an alternative
When you are on your github repo just press "." and VSCode will open with your account.
👆send a direct message for support and guidance.
How did you make your ip so fancy ?
I don't get to see the configuration file where I could get to change the password as a link. Any assistance with that?
When I type in code-server it says command not found. What do I do
When i paste the first line of code, it says not recognized. Please help
Hi, I got 'error listen EADDRINUSE: address already in use 127.0.0.1:8080' message...what I can do?
Is there a big difference between this and Google Remote Desktop?
i did not have laptop or computer or macbook. how i can install or run in chrome
IMHO : why? 🙃 I would prefer taking my windows tablet and work there. But to take it to other platform such as iOS / Android, this is great!
Do you have to have a desktop pc?