How to test a local website on your phone

Поделиться
HTML-код
  • Опубликовано: 5 янв 2025

Комментарии • 632

  • @matetheking
    @matetheking Год назад +43

    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
    @voidtracer2397 Год назад +11

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

  • @glitchinLife
    @glitchinLife Год назад +12

    This is THE MOST useful tutorial on RUclips. Period

  • @SurajSingh-hl3gc
    @SurajSingh-hl3gc Год назад +2

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

  • @DominicNweze
    @DominicNweze 2 года назад +4

    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.

  • @samadeniji
    @samadeniji 2 года назад +3

    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.

  • @2u841r
    @2u841r 9 месяцев назад +19

    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
      @I.Love.Kishka 3 месяца назад +2

      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
      @ahmad-g-mustafa Месяц назад +1

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

    • @anupkhismatrao9280
      @anupkhismatrao9280 29 дней назад

      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.

  • @santosh_rawat
    @santosh_rawat Год назад +12

    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
      @danhargsten9024 3 месяца назад

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

    • @rockstarboy8339
      @rockstarboy8339 Месяц назад

      Thank you 😂

    • @ifroxxx1226
      @ifroxxx1226 29 дней назад

      thank you!!!

    • @lakhaidir9284
      @lakhaidir9284 12 дней назад

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

  • @CarlosMagnoBG
    @CarlosMagnoBG 3 месяца назад

    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.

  • @peteremad5228
    @peteremad5228 2 года назад +1

    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

  • @lyraasim4677
    @lyraasim4677 2 года назад

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

  • @nichobeastmode8361
    @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.

  • @personalgamedevyt9830
    @personalgamedevyt9830 2 года назад +26

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

  • @pazir_r
    @pazir_r Год назад

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

  • @fuzzy-02
    @fuzzy-02 Год назад +1

    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

  • @wayneswildworld
    @wayneswildworld 2 года назад +2

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

  • @thewlabs
    @thewlabs 2 года назад

    Miss your content so much ! Finally !😍

  • @Mr.Yaqoobi
    @Mr.Yaqoobi 5 месяцев назад

    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!

  • @mattlaws6157
    @mattlaws6157 2 года назад +6

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

  • @bassfishin91
    @bassfishin91 2 года назад +130

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

  • @anupkhismatrao9280
    @anupkhismatrao9280 29 дней назад +1

    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.

  • @zakariyyamulla6635
    @zakariyyamulla6635 2 года назад

    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

  • @iamabishekbaiju
    @iamabishekbaiju 2 месяца назад +1

    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,
    },
    });

  • @electricity2703
    @electricity2703 4 месяца назад

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

  • @TinyMaths
    @TinyMaths Год назад +1

    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.

  • @X3ro1-01
    @X3ro1-01 2 года назад

    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.

  • @duncan51
    @duncan51 2 года назад +2

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

  • @iamsachin619
    @iamsachin619 2 года назад

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

  • @ideguchi
    @ideguchi 27 дней назад

    excellent content and format, I loved watching it.

  • @darianzuvic5390
    @darianzuvic5390 2 года назад +31

    Amazing content, very concise and perfectly clear.

  • @maheshshanbhag7392
    @maheshshanbhag7392 11 месяцев назад +1

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

  • @justamongus7541
    @justamongus7541 2 года назад

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

  • @programingworld5183
    @programingworld5183 Год назад

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

  • @prakritimukherjee6562
    @prakritimukherjee6562 8 месяцев назад

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

  • @Escalator0921
    @Escalator0921 2 года назад

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

  • @archiem6323
    @archiem6323 2 года назад +1

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

  • @djlclopez128
    @djlclopez128 7 месяцев назад

    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.

  • @PicyPoe
    @PicyPoe 2 года назад

    Finally you are back!

  • @anisdz6618
    @anisdz6618 2 года назад +7

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

  • @BonesD23
    @BonesD23 Год назад

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

  • @MichaelShingo
    @MichaelShingo Год назад

    works amazing, thanks helped me troubleshoot my mobile layout

  • @matthiasdennerlein3817
    @matthiasdennerlein3817 10 месяцев назад

    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.

  • @mohamedh.guelleh630
    @mohamedh.guelleh630 2 года назад +3

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

    • @timothypsina
      @timothypsina 5 месяцев назад +1

      Using her mouse scroll 😮

  • @lauris5275
    @lauris5275 Год назад

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

  • @garudacasasena5736
    @garudacasasena5736 Год назад

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

  • @abagatelle
    @abagatelle Год назад +1

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

    • @CarlaLopez-hw4kj
      @CarlaLopez-hw4kj Год назад +2

      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

  • @SuryakantYadav-m7o
    @SuryakantYadav-m7o Месяц назад

    havent seen a more important video, thanks

  • @nnivxix
    @nnivxix Год назад

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

  • @privateuser047
    @privateuser047 2 года назад

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

  • @ayushgupta137
    @ayushgupta137 Год назад

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

  • @NK-hv9zt
    @NK-hv9zt Год назад

    Amazing information which hardly anyone was knowing

  • @megapet777
    @megapet777 Месяц назад +1

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

  • @davidgaiakano9747
    @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!

  • @leticiaqueirozcarvalho2367
    @leticiaqueirozcarvalho2367 Год назад +1

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

  • @joweldas1829
    @joweldas1829 11 месяцев назад

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

  • @randomweins4894
    @randomweins4894 Год назад

    Super Simple Dev, cool works!👍

  • @iamashleymscott
    @iamashleymscott 2 года назад

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

  • @pepperdayjackpac4521
    @pepperdayjackpac4521 2 месяца назад

    This was amazingly useful, thank god.

  • @olopadev6306
    @olopadev6306 2 года назад

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

  • @jnkjdjkl5656
    @jnkjdjkl5656 3 месяца назад

    you saved me from a lot of struggle thanks a lot

  • @hemantsharmachannel
    @hemantsharmachannel Год назад

    you got a new suscriber , your trick was amazing

  • @Abinbn
    @Abinbn Год назад

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

  • @animaxlotoffunanime9117
    @animaxlotoffunanime9117 9 месяцев назад +1

    Thanks for help ❤❤❤

  • @clayzz5695
    @clayzz5695 2 года назад

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

  • @itsfoss5268
    @itsfoss5268 2 года назад

    Had really missed you Coder coder

  • @mujupaul
    @mujupaul 4 месяца назад

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

  • @ninjanithin9048
    @ninjanithin9048 Год назад

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

  • @chivicks_hazard
    @chivicks_hazard Год назад

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

  • @ivikiwi06
    @ivikiwi06 Год назад

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

  • @kishoreandra
    @kishoreandra 2 года назад

    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

  • @kasumbaemmanuel9336
    @kasumbaemmanuel9336 2 года назад +2

    How about if I use my phone for hotspot

  • @priyam857
    @priyam857 2 года назад

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

  • @cutecode324
    @cutecode324 2 года назад

    Wow Amazing, Thank you for sharing Coder

  • @alliolarinde5252
    @alliolarinde5252 2 года назад

    wow, Amazing, it actually works, great job

  • @SufiAdam01
    @SufiAdam01 2 года назад +2

    Cant we do this in websites using inspect element and the responsive design mode in firefox?

    • @Rider0fBuffalo
      @Rider0fBuffalo 2 года назад

      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.

  • @ninjanithin9048
    @ninjanithin9048 Год назад

    Thankyou for your teaching this ,it's save lot of time and energy 😊❤❤

  • @open-container550
    @open-container550 2 года назад

    Super cool! Such an amazing content

  • @ganeshdandale8301
    @ganeshdandale8301 Год назад

    It worked, thank you for such useful content

  • @shadmanrashid9991
    @shadmanrashid9991 2 года назад

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

  • @joshuaberrios
    @joshuaberrios 2 года назад +4

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

    • @Samuel01477
      @Samuel01477 Год назад

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

  • @vilashvarghese9942
    @vilashvarghese9942 Год назад

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

  • @horizon6309
    @horizon6309 Год назад

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

  • @MarcosLima-cs9cd
    @MarcosLima-cs9cd 10 месяцев назад

    Thank God is not another app to download😂 Perfect tutorial 👌 ✨️

  • @anujmishra373
    @anujmishra373 Год назад +1

    Thank you so much, it worked ❤

  • @PranjalChaurasiya-z1e
    @PranjalChaurasiya-z1e 5 месяцев назад

    Hey thanks for this detailed content.
    Helpful for me.

  • @progmell
    @progmell Год назад

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

  • @suvrotica
    @suvrotica 2 года назад +7

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

  • @ashutoshpatil6978
    @ashutoshpatil6978 Год назад

    Love you mate. You Just saved my day .

  • @monara97
    @monara97 2 года назад

    On mac: Option + Click the wifi icon in status bar
    Great video!

  • @constantine9074
    @constantine9074 Год назад

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

  • @mdkawsarislamyeasin4040
    @mdkawsarislamyeasin4040 2 года назад

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

  • @johnmarklecias938
    @johnmarklecias938 Год назад

    a million thanks! this helped me a lot!

  • @dazecm
    @dazecm Год назад

    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?

  • @rabihmoumne
    @rabihmoumne 4 месяца назад

    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?

  • @blackcheetah4550
    @blackcheetah4550 Год назад

    I'm really amazed, thanks a lot, it was a lovely video 💜

  • @joewatson8357
    @joewatson8357 2 года назад

    Nice one,I have been looking for such thing finally found 🤘🤘🤘🤘😎😎

  • @kuyaemantech
    @kuyaemantech 4 месяца назад

    You are awesome, it works ❤❤❤ thanks a lot ma'am..

  • @sandipGraphics
    @sandipGraphics 2 года назад

    can anyone help me to do this
    I tried it several times but it is not working
    plz help me

  • @luyandankosi3822
    @luyandankosi3822 5 месяцев назад +1

    Hi, why is it showing the directory on my phone instead of loading the website?

  • @MrSimombo
    @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.