Https on Localhost for Vite and React , Vue , Vanila , Svelte

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

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

  • @76Freeman
    @76Freeman Год назад +5

    Thanks for the explanations :) very clear and easy to follow instructions

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

      Thanks for taking the time to watch the video , Glad to hear it was helpful!

  • @ishitaaaa
    @ishitaaaa 4 месяца назад +1

    Thank you so much for this excellent, detailed video. You made my work so easy !

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

      You're welcome! Thanks for your comment! I’m glad the video was helpful 😀

  • @Adrian-oo1rz
    @Adrian-oo1rz Год назад +2

    I've looking for this months. Thanks, you've helped me a lot!

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

      Glad it helped. You are welcome!

  • @FlorianGoussin
    @FlorianGoussin Год назад +2

    Wow! This is amazing! I need to use the Geolocation API, but looks like that now you need a secure context, so I hope this is what I need. 'Gonna test that very soon! Thx!

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

      Yeah that works now. Additionally specifically to my project I had to do the same with my local backend server (I use hypercorn) and of course not forget to allow the location service on my phone for the phone browser where I'm testing.

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

      Glad it worked! Thanks for sharing

  • @treeworldnight3700
    @treeworldnight3700 Год назад +2

    Thanks a lott, You help me very muchh!!

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

      Thanks for your comment! The domain name in the /etc/hosts file is a custom name you choose for your local development (It's not a real domain on the internet) .
      You can use any name you like, even without an extension, such as 'myvueapp', 'myfakedomain', or even a fake extension like 'domain123.fake'.
      Just make sure it doesn't conflict with existing domain names.
      In your case, using your project name followed by .ben worked because it's a custom domain extension for local testing.

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

    And if I have a private IP address ?
    Should I be able to bind the IP to the domain ?

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

      Yes, you can bind a domain name to a private IP address, but it will only be accessible within the same private network.

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

    Sir I do not create the vite project, how to apply in simple react project?

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

    Can I use this method to have https/secure connection on my domain (not only on localhost)?

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

      Absolutely! At 00:07:12 in the video, I discuss how you can have a secure HTTPS connection on your domain as well, not just on localhost.

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

    Thanks a lot broooooo

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

      You're welcome! 🚀

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

    greate video. thanks,

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

      Glad it helped. You are welcome!

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

    This is great and helpful, but one more thing, will it work without a custom domain for the localhost?

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

      Thanks for your comment, you're welcome, yes It should.

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

    how to use https on next js?

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

    and Next.js??

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

    @benixal what could this mean net::ERR_CERT_COMMON_NAME_INVALID i'm getting that error in my developer console. I'm trying to load up my react page using vite over a laravel project and the certificate is valid for the server but when it gets to the vite part it say net::ERR_CERT_COMMON_NAME_INVALID in the console

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

      If you are using a valid SSL certificate:
      Check the domain name you open in the browser, which should match the certificate.
      For instance, if your certificate is only for the main domain (example.com), it won't work for (www.example.com).
      If you are using a self-signed SSL certificate:
      For Chrome: Click on 'Advanced' and then choose 'Proceed to localhost (unsafe)'
      For Firefox: Click on 'Advanced' and then select 'Accept the Risk and Continue'

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

      Thank you for responding. I've made the necessary adjustments but i get net::ERR_CONNECTION_REFUSED in the console now. What could that mean?
      @@benixal

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

      Double-check the port number. ERR_CONNECTION_REFUSED often happens due to an incorrect port entry. When starting, Vite typically auto-adjusts to the next available port if the specified one is occupied. Keep an eye on your terminal or CMD to see which port Vite is using.

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

    Doesn't work for me, still getting "Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR"

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

      self-signed or valid ?

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

      @@benixal It's self-signed, I'm on Linux just like you, trying it on a local React with Vite project, using fetch API.

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

      try this to generate your certificate :
      openssl req -x509 -sha256 -nodes -days 365 -newkey rsa:2048 -keyout private.key -out cert.crt

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

      @@benixal Mhhm, now I'm getting NET::ERR_CERT_AUTHORITY_INVALID, do I need to go for the valid certificate route? I'm trying to fetch data from a fake API with a JSON file.

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

      Done .. The 'ERR_CERT_AUTHORITY_INVALID' error you encountered is because the SSL certificate is self-signed
      For Chrome: Click on 'Advanced' and then choose 'Proceed to localhost (unsafe)'
      For Firefox: Click on 'Advanced' and then select 'Accept the Risk and Continue'
      If the API is giving you errors, consider using a valid SSL certificate.
      Self-signed certificates might not work with some APIs due to stricter security requirements.

  • @eduardoTorres-h6t
    @eduardoTorres-h6t 29 дней назад

    If you use Vite, you can use youre official pluggin : npm i vite-plugin-mkcert -D. its very easy your use