How to test a local website on your phone
Вставка
- Опубліковано 2 жов 2024
- How to fix "This site can't be reached" error -- 04:37
🔥 Learn how to build a responsive website from a Figma design with HTML, SCSS, JS ➡️ coder-coder.co...
😎 Join the Coder Coder Club and get sneak peeks of videos: courses.coder-...
👕 Get my hoodie here: coder-coder.co...
💻 Become a full-stack web dev with Zero to Mastery: academy.zeroto...
🎨 Get my VS Code theme: marketplace.vi...
🔽 FOLLOW CODER CODER
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#css #javascript #html
in vite, you should write npm run dev -- --host
(instead of only npm run dev, add double hyphen space then --host )
so you can visit in mobile / local network.
just to clarify for others since this took me a bit to figure out, the full line of code to run is:
npm run dev -- --host
you need the double hyphens twice, otherwise it won't show you the IP.
I use ngrok for all my testing. Great way as well!
Ngrok much love
Ya it much simple and we can use it on outside of the home network
Me three!!
yes! but just for testing purpose it's the best method
Yap Ngrok is really amazing.
The one who is facing same problem after all the steps...
Maybe your wifi network is selected as public network in wifi settings , change it to private
It worked for me ✨️
Holy shit, thank you! No one mentioned this, and it was driving me crazy. Working fine now!
I love your straightforward approach to explaining the content, some people seem to be more interested in speaking than teaching. Great job. Thank you!!
This right here might be one of the most handy video I've seen so far as a junior. Thanks!!
When I enter ip address with port number the browser didn’t show anything it just reloads
Please help
This doesn't work for me. My phone just loads from 3 minutes then said "Connection timed out". I'm on Windows, using Vite instead of Live Server.
Same
Wow, really simple but very very useful. Thank you for the clear, concise explanation.
Amazing content, very concise and perfectly clear.
It is very concise
Cant we do this in websites using inspect element and the responsive design mode in firefox?
Yes. But if your web app does some special stuff like opening camera or mic stuff it might be good to check on the device to ensure the mobile browser api is working as expected.
How about if I use my phone for hotspot
This is THE MOST useful tutorial on UA-cam. Period
There are people downloading sketchy and not super secure softwares. In order to do this, excellent video!
Thanks for watching!
Now show me how to test my site at the theatre
💀 man's on a mission to create the world's best site
@@jumah_tj I just want to be able to use my site on my other phone. But I pay someone else money for that apparently
@@jumah_tj idk what site your referring to
Why tutorials always don't work for me
How did you get the monitor scroll when scrolling on your phone 0:03 ?
Using her mouse scroll 😮
For those who using REACT-VITE
update package.json file's "script" object.
"scripts": {
"dev": "vite --host",
(rest same)
}
Type 'npm run dev' command on terminal.
Now a new link will be available which can be used on any device connected on same network.
Enjoy😇
Why are devs still using Ritwick Dey's live server? That has been abandoned for quite some time, there is a newer alternative called Live Server (Five server) by Yannick.
Can you show how to do that for ReactJS web apps?
I've been looking for how to do this for months.
Cause mine always showed that error.
God bless you lady. 😘
Many people dont even bother teaching their viewers how tondo it asif they dont know that people are beginners in all these. Tech things.
Thanks.
Now I can share my site for testing with my friends.
Hi, why is it showing the directory on my phone instead of loading the website?
it still showing this site can't be reached. i don't know where am i making mistake
Same😢
Thank you this is a great solution that I've only found out about recently. I tried to use virtual android but my PC isn't that powerful enough so the vitual phone tends to hang. Now this method is so much faster using my own phone to view the apps I'm trying to format for mobile.
i had the "this site is unreachable " problem and i searched the internet and i couldn't find any solution ...that was really helpfull vedio for me thanks
I use wifi thatering from myphone, mycomputer connect to wifi, and myphone access ip from computer
Hello maam, I tried this , but in my VSCODE "LIVE RELOAD IS NOT POSSIBLE A HEAD OR BODY TAG." alert is coming from LIVE SERVER extension... please help me with that problem
Awesome, thank you very much, I needed videos like these to help me with my problem to know if my application will work well on my cell phone. A big hug, I'm really enjoying your channel.
Hello, thanks for sharing but it didn't work for me, the live-server won't show my images, even after getting the whole images in my HTML File but when I run my code on Chrome it works, please what can I do???
I am having problems with the extension:
Previously I used local I'd and after that the mobile view was working good but I shifted to other network & place and my ip changed now I am getting this error
the ip address "xyz" can't be used to host the server using the default IP
Please answer now what should I do?
I already studied all of this in a networking course, but I somehow forgot it all.
Watching your video when I was wondering about how to answer this specific question, I felt kinda stupid because of how obvious it is for someone who should supposedly know how networks work...
Thank you
I cannot get this to work for Shopify Liquid on Mac. Any ideas why?
Will this work is phone is the hotspot?
Nice! Is there a way to do this with a php generated page? Wondering if it's possible with WordPress. Right now it just takes me to the root folder.
Would this work for a local react app?
I tried and it doesnt work. Also included the backend port.
Not sure what im doing wrong.
Any body, any ideas?
Hi ma'am, I have a doubt, in my laptop showing 2 ip address like ip6 and ip4 what will I choose ma'am
Is there a way to do this while simultaneously running a backend server? I want to use this method to test my MongoDB/React app
any way I can do this for my angular apps? live server i guess does not support angular projects. Whats the way I can test the app on mobile in real-time?
Hi I use an android phone but when I login it tells me connecting as a Linux device. Prior to this my phone was hacked and they listen to me remotely. How can I stop this thing.
IDK why it's not working for me, it's still showing The site can't be reached
can anyone help me out?
Can we use this feature for flutter?
THANK YOU!!! using inspect in chrome and selecting the type of phone was not as useful as this
I've been scratching my head for days to put website on my local network. Thank you so much for this video.
❤🔥❤🔥 You are scrolling on desktop, but its also scroll in mobile automatically, how?
hey there, i still cannot access it through my phone even after the firewall settings. it says the site cant be reached. is there any other solutions to this?
Make sure that the network that you are connected to is set as a private network. Go to windows settings and set the connection to a private network
@@NINJAxxLEMUR I did this and it still does not work
@@Truthseeker_12638 did you find a solution? pls bro im so down bad
Hi thank you this works but when I have a video it does not stream the sound on other devices just on my pc. Can you help?
i prefer to install node http-server and just run http-server, it will auto generate both IP and local host.
The project I am wroking on the vs code, but not uploaded to the github, so does the website has to be uploaded to the github account?
I totally agree on the approach , it's working fine but my images are not loading any idea why?
I once downloaded its and reinstalled its and now I'm trying to install its back, but its telling me that my window does not accept installing its any assistance or guide
My computer doesn't show the wireless LAN adapter IPs, what can I do?
Hi, can a person start their web development career using their phone? Say they don’t own a laptop
Does this also work when you just use 'npm start' as a replacement for Live Server?
Thank you so much, it worked ❤
Hello i am Web developer I have a 5 years experience in wordpress, node js, React js development
I really need help I can’t load the site it’s just perpetually loading I followed everything to a tee :(
Does this work with react? Coz i will be using nodemon or node for it... So will it work the same?
I’m legit confused I did both the firewall step and the IP step and both it still doesn’t work for me
You have a nice teaching, please I'm having an issue installing visual studio code on my window 8
dang this worked but now my website looks terrible on mobile and I have work to do :"( 😢
doesnt work work me
Cool. I opened those ports in Defender but it's just not working. I see the IP address from ipconfig used is on a WiFi adapter but I'm wondering if this is possible when my dev machine is connected to my router via Ethernet cable and my phone and tablet connect to the same router over WiFi?
Hi...i have used the method you showed but why does my Django API works fine when i submit a form from my web application running on a desktop browser but doesn't give any response when i try to submit the form from my phone using VSCode Live Server...it was very simple login form and api
Hello, mine seem not to be wworking. How you come up with the 5500 server?
can anyone help me to do this
I tried it several times but it is not working
plz help me
I need to restart the computer? after allowing the port from firewall, still it is not opeing in my iphone
But my javascript code is not working on mobile view why???
Thank you so much for this amazing video! It was incredibly helpful and made everything so much clearer. Your explanations are always on point. Keep up the great work!
This is cool, but it's way too much work. The browser inspector has a built in feature for viewing a website on different devices.
Thanks a lot!
You are awesome, it works ❤❤❤ thanks a lot ma'am..
I did everything you said but yet whenever I search using the IPv6 address, it shows me "login to admin page something something...
What else can i do?
She looks like smriti mandhana.. India women's cricket team player
UA-cam keeps deleting my comment for reason that's still unknown to me, I couldn't get it to work until I found a solution that I simply had to add the name of file in the browser. Local Address, port, /filenamehere. I proudly obey my youtube overlords, leth thy comment through your divine algorithm
Thank you❤
This is awesome. Thank you. Btw ur Responsive webpage course is closed for enrolling. Is there anyway I can get to your Basic Course?
Does not work here, ive tried everything you mentioned also
For MERN stack app on mobile with full working functionality of both backend and frontend:
First connect phone and laptop to same wifi, then find ipv4 address of laptop, run all backend api and context api on that ip adress. Type in same ip address in phone to be able to use the functionalities of the app on phone.
i'm having issues doing this on my mac. it says "url cant be found"
hi
I really enjoy your video👍
but can you made a video on how to start open source?
Huh.
Tried everything, Still not working😥. Could you help
On Mac and with an iPhone I can only get this to work if my iPhone has hotspot sharing enabled and both devices use my phones hotspot for wifi. If you can't get it working for iPhone and Mac, try that approach.
This is all fine and dandy, but if you want to debug styling and the likes, then (at least with Android phones) you can connect it to the laptop with a cable install adb debugging and use chrome to show devtools on the laptop for the site that is running on your phone. Don't know about iphones though.
Thanks for the tip!
Thank you for this tutorial, this was the first time I did this! Note for anyone using their phone as a hotspot: it doesn't work if you tey to load the website on the same phone you are using as your internet source. But! I am still learning so maybe it is possible somehow? You have to have your computer and phone both connected to the same wifi source.
gamechanger, especially with me using old monitors on desktop
does this works with php websites running development server using xampp
Please, there's a cool animation on your website I would really like to learn. That unicorn throwing some stars.
Hey, Shall we play Fortnite Together? 😅
But how to get port for react website.....it only shows local host 3000 .
thanks very much but can you help about the php files it is so confusing
Is it possible to achieve it when the wifi is a phone's hotspot? Thank you.
I thought you are Smriti mandhana. Indian women cricketer.😇
Hi ma'am how to make your website responsive in any devices.
After setiing New Rule also , It showing the error site cant be reached
I had been trying it so many time but this doesn't qork and didn't open anything
it still says this site cant be reached. After setting rules in my defender firewall
I don't have any wifi 😒 😕
So what should I do now? 😮💨
Thanks it is amazing 👏 😀 😊 ❤️ ☺️ 🙏 👏 😀 😊 ❤️ ☺️ 🙏 👏 😀 😊 ❤️ ☺️ 🙏 👏 😀 😊 ❤️ ☺️ 🙏 👏
it's not work when I use zustand, I don't understand what's wrong with zustand
Thank you. Its so usefull. I wished me that in my last editor and was very blessed when I saw it right now. Pretty cool. Last but not least I am a big Fan of your funny faces. You are awesome. Peace & Love from Germany.
Amazing content, very concise and perfectly clear.
Hey thanks for this detailed content.
Helpful for me.