How to test a local website on your phone

[@matetheking]

I love your straightforward approach to explaining the content, some people seem to be more interested in speaking than teaching. Great job. Thank you!!

[@voidtracer2397]

This right here might be one of the most handy video I've seen so far as a junior. Thanks!!

[@2u841r]

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.

[@I.Love.Kishka]

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.

[@ahmad-g-mustafa]

@@I.Love.Kishka thanks, this is so correct npm run dev -- --host (double hyphens twice)

[@anupkhismatrao9280]

What to do if we want to test the complete application? I am able to access the vite frontend, but when i try to use functionality like Login in vite application which makes use of express backend for api I am not able to do this function.

[@sinskiyy]

thank you so much, it worked

[@SurajSingh-hl3gc]

I've been scratching my head for days to put website on my local network. Thank you so much for this video.

[@glitchinLife]

This is THE MOST useful tutorial on KZbin. Period

[@DominicNweze]

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.

[@santosh_rawat]

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 ✨️

[@danhargsten9024]

Holy shit, thank you! No one mentioned this, and it was driving me crazy. Working fine now!

[@rockstarboy8339]

Thank you 😂

[@ifroxxx1226]

thank you!!!

[@lakhaidir9284]

where did you change it? is it on pc or phone?

[@samadeniji]

Wow!!!! This is super helpful. Thank you! I love the fact that I can see my website in real-time on my MacBook, iPad and iPhone. I also love that I don't have to refresh to see the changes. Subscribed.

[@bassfishin91]

I use ngrok for all my testing. Great way as well!

[@hugo-onzakorderra8851]

Ngrok much love

[@goldentertainment2335]

Ya it much simple and we can use it on outside of the home network

[@lemmynjaria2015]

Me three!!

[@otpsalman7113]

yes! but just for testing purpose it's the best method

[@royhyde8842]

Yap Ngrok is really amazing.

[@iamabishekbaiju]

In Vite, you can add the following and when running npm run dev, it will show the localhost as well as local network address: export default defineConfig({ plugins: [react()], server: { host: true, }, });

[@003_mdazamalam.2]

Thanks dude, your comment really helps me

[@peteremad5228]

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

[@wayneswildworld]

There are people downloading sketchy and not super secure softwares. In order to do this, excellent video!

[@TheCoderCoder]

Thanks for watching!

[@fuzzy-02]

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

[@personalgamedevyt9830]

Wow, really simple but very very useful. Thank you for the clear, concise explanation.

[@lyraasim4677]

My Number 1 inspiration here in youtube. Hoping to be just like you in the future :) sending love from Philippines.

[@pazir_r]

wow, with another pc, laptop, tablet, smart phone. You are amazing! Thank you!

[@CarlosMagnoBG]

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.

[@nichobeastmode8361]

thanks to this, I was able to get my website looking perfect for mobile devices in no time! This trick was a life saver.

[@mattlaws6157]

Great timing Coder Coder. I was going to research a solution for this problem. You’ve saved me lots of time. Thanks for sharing.

[@megapet777]

Cool tutorial. Sadly I didn't get it to work even after changing firewall settings.

[@lorenorzoroderpiratenjager4162]

you have to make your wlan network connection "privat". Your connection is probaby on "public".

[@darianzuvic5390]

Amazing content, very concise and perfectly clear.

[@ogunleyeazeez5952]

It is very concise

[@maheshshanbhag7392]

When I enter ip address with port number the browser didn’t show anything it just reloads Please help

[@duncan51]

Nicely done! This was super helpful. Cool Steam Deck btw!

[@zakariyyamulla6635]

thanks to you ma'am now I can test my website in my phone I was trying same procedure before but unable to get any results because of errors you mentioned but I followed your instructions and bravo I got it

[@X3ro1-01]

Thank you very very much for this little hack because it helps so much. My browser side of mobile development was not actually showing me how the website would look on a smaller screen. Now I can see it without deploying on both of my screens on an android and an iPhone thank you so much.

[@TinyMaths]

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.

[@ideguchi]

excellent content and format, I loved watching it.

[@anupkhismatrao9280]

What to do if we want to test the complete application? I am able to access the vite frontend, but when i try to use functionality like Login in vite application which makes use of express backend for api I am not able to do this function.

[@Mr.Yaqoobi]

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!

[@programingworld5183]

Thank You for uploading this video. It saves my life in web development

[@vilashvarghese9942]

The new VS Code port forwarding feature should be able to address this problem during development phase itself.

[@shubhamkumar-di5si]

it still showing this site can't be reached. i don't know where am i making mistake

[@AI_Nexus39]

Same😢

[@pepperdayjackpac4521]

for me, I had to get into my network settings and made sure that my Network profile type was private instead of public

[@djlclopez128]

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.

[@Escalator0921]

What the!!! It worked!!!!.... You just made my life a whole lot easier...

[@PicyPoe]

Finally you are back!

[@abagatelle]

Very helpful, works a treat on iPhone and iPad with VSCode running in Linux on an ancient old laptop. Thanks very much!

[@CarlaLopez-hw4kj]

how did you do it for mac? i used ipconfig getifaddr en0 and then opened the ip adress on phone/ipad and it isnt working

[@archiem6323]

🤠 You are always bringing great content!😃 Jessica the greatest!!!🥳🥳💛💛

[@olopadev6306]

wow, amazing... You are always bringing great content! Thanks!!!

[@privateuser047]

Always comes up with great content. Just cool stuffs. 😎

[@prakritimukherjee6562]

I am learning coding...And this was so helpful. Thank you so much. Super useful!!!

[@garudacasasena5736]

OMG I REALY NEED THIS AND IT'S WORK THANK YOU FOR THIS INFO,APPRECIATE IT

[@kasumbaemmanuel9336]

How about if I use my phone for hotspot

[@lauris5275]

I been learning for quite some time. And didnt know that you can connect with phone that easy... Ty. xD

[@justamongus7541]

Good to see your beautiful face my girl is getting on pace 🤩.keep posting more frequently.

[@NK-hv9zt]

Amazing information which hardly anyone was knowing

[@matthiasdennerlein3817]

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.

[@SuryakantYadav-m7o]

havent seen a more important video, thanks

[@leticiaqueirozcarvalho2367]

Amazing, thank you! Very straight forward and well explained.

[@pepperdayjackpac4521]

This was amazingly useful, thank god.

[@iamsachin619]

Thankyou for such a good explanation, this eill come very useful for most of web devs. Also you are look so cute!

[@electricity2703]

One of the best useful tutorial I have ever seen. Thank you 🙂

[@mohamedh.guelleh630]

How did you get the monitor scroll when scrolling on your phone 0:03 ?

[@timothypsina]

Using her mouse scroll 😮

[@anisdz6618]

Thanks a lot, really appreciate all the hard work you put in these lessons. Clear and straight to the point

[@ashwniuikey678]

Hello i am Web developer I have a 5 years experience in wordpress, node js, React js development

[@tiktaktictac]

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.

[@Truthseeker_12638]

Same

[@BonesD23]

I been using the Live Server For I while, and I never thought on testing this way, Well thanks for the information.

[@mujupaul]

Please, there's a cool animation on your website I would really like to learn. That unicorn throwing some stars.

[@MichaelShingo]

works amazing, thanks helped me troubleshoot my mobile layout

[@raghavsinghal6409]

I had been trying it so many time but this doesn't qork and didn't open anything

[@jnkjdjkl5656]

you saved me from a lot of struggle thanks a lot

[@randomweins4894]

Super Simple Dev, cool works!👍

[@growingheartstories]

Can you show how to do that for ReactJS web apps?

[@hemantsharmachannel]

you got a new suscriber , your trick was amazing

[@ryostyles9904]

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.

[@hariharans8686]

It's not working on my mobile phone any solutions? please tell me

[@joshuaberrios]

Wow! This is a life-saving tutorial. Thank you so much for producing this video.

[@Samuel01477]

​@dheerajEdits same here, it refuses to show my images even after getting the whole images into the same HTML File, i'm stuck

[@nnivxix]

04:37 thank you very much, now i can access my localhost on my Android.

[@ayushgupta137]

Really i was in urgent need of the same thing and this video completely helped me. Thank you so much for this video.

[@davidgaiakano9747]

Thanks for the helpful tip for finding the ip address to use to connect with my phone. I wasn't sure it was going to work, because my laptop is on a hotspot on the same phone I wanted to use, but it did!

[@itsfoss5268]

Had really missed you Coder coder

[@animaxlotoffunanime9117]

Thanks for help ❤❤❤

[@priyam857]

Glad you posted something today, I was taken aback because Twitter is being shutting down. Twitter is a... website

[@andyl9920]

This is awesome. Thank you. Btw ur Responsive webpage course is closed for enrolling. Is there anyway I can get to your Basic Course?

[@kishoreandra]

Thanks Jess, A react app when run by npm start or npm dev start or w/e it shows the address On Your Network, copy paste enjoy

[@cutecode324]

Wow Amazing, Thank you for sharing Coder

[@ivikiwi06]

you saved me with your windows firewall tip. Thank you very much!

[@aariskazi9002]

Well there is an option in live server you have to enable it so you can perform local network changes and check in your phone

[@ninjanithin9048]

It's my first time on your channel , I like your video and i new to you

[@chivicks_hazard]

I thank God I'm seeing this video. I'm gonna give this channel a subscribe

[@open-container550]

Super cool! Such an amazing content

[@Abinbn]

Thank you verymuch , i spend many days checking for the way to view in my device without downloading the whole code

[@MrSimombo]

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.

[@joweldas1829]

this is very helpful video that i was looking for many times ❤

[@suvrotica]

This was very helpful. You are really doing it right. Thanks a whole bunch.

[@KiranRai10158]

I don't know why but it's not working on my side, I have followed all the steps that you have mentioned in the video it still says, can't reach the network. I am using windows 11.

[@drixares3569]

I'm on w11 and it doesn't work too, same problem...

[@mangos489]

@@Nixv_01 @drixares3569 @KiranRai10158 Hi, Make sure to do the following at any point of the video. Enter Windows Settings and follow this path. Network & Internet> Wifi> (Your wifi Network) You should find a section within this page titled (Your wifi network) properties. Within this page you will have to look at a section titled network profile type. Under this you should find the option to choose between a public or private network. Choose private network. Follow the steps she showed within the video and you should be able to connect to your website through your mobile device. Why does this work? This works because the rule she is creating in windows defender is applied to networks under the class of private. By default most home networks are set to public. So if you are following her instructions to the T, you will be applying rules to the private network class despite your own being under the public class, hence seeing no change.

[@clayzz5695]

This is legit, thanks! didn't found any issues yet 👌

[@shadmanrashid9991]

thanks sis ... i was looking for this for a long time...

[@iamashleymscott]

OMG thank you so much as this is such a need and a game changer for me. You just got a new follower ❤❤❤❤

[@TheCoderCoder]

Glad it helped you!

[@horizon6309]

Thank you for this. This will really come in handy for me.

[@PranjalChaurasiya-z1e]

Hey thanks for this detailed content. Helpful for me.

[@constantine9074]

Ive benn passing your videoes but this one made me to hit subscribe thanks

[@balajin6973]

your vscode theme looks cool!!!!. what's the name of your theme extension?

[@allediting9180]

Git hub extension i think

[@TheCoderCoder]

Coder Coder Dark, should be linked in my video description!

[@domkh6574]

your theme so amazing. what theme name?

[@ganeshdandale8301]

It worked, thank you for such useful content

[@alliolarinde5252]

wow, Amazing, it actually works, great job

[@travisScottFan3]

Why tutorials always don't work for me

[@mdkawsarislamyeasin4040]

Wow amazing, I need to know this. I searched for this kind of video some days ago.

[@progmell]

Thank u so much, It was completely easy to follow those instructions.

[@community7757]

Hi Coder Coder! In your website you say you were launching a course in Spring 2022. I was waiting for it since the beginning of the year. Are you going to launch it at any time? Thanks :)

[@TheCoderCoder]

Sorry, I'm still working on it, but I think realistically it will be released in 2023!

[@samsiddique4751]

@@TheCoderCoder what about responsive design course?

[@TheCoderCoder]

@@samsiddique4751 That's the responsive design course that I am talking about

[@demicoderr]

This has been really helpful! thanks a ton!