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!
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.
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.
@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
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'
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
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.
@@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.
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.
Thanks for the explanations :) very clear and easy to follow instructions
Thanks for taking the time to watch the video , Glad to hear it was helpful!
Thank you so much for this excellent, detailed video. You made my work so easy !
You're welcome! Thanks for your comment! I’m glad the video was helpful 😀
I've looking for this months. Thanks, you've helped me a lot!
Glad it helped. You are welcome!
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!
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.
Glad it worked! Thanks for sharing
Thanks a lott, You help me very muchh!!
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.
And if I have a private IP address ?
Should I be able to bind the IP to the domain ?
Yes, you can bind a domain name to a private IP address, but it will only be accessible within the same private network.
Sir I do not create the vite project, how to apply in simple react project?
Can I use this method to have https/secure connection on my domain (not only on localhost)?
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.
Thanks a lot broooooo
You're welcome! 🚀
greate video. thanks,
Glad it helped. You are welcome!
This is great and helpful, but one more thing, will it work without a custom domain for the localhost?
Thanks for your comment, you're welcome, yes It should.
how to use https on next js?
and Next.js??
@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
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'
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
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.
Doesn't work for me, still getting "Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR"
self-signed or valid ?
@@benixal It's self-signed, I'm on Linux just like you, trying it on a local React with Vite project, using fetch API.
try this to generate your certificate :
openssl req -x509 -sha256 -nodes -days 365 -newkey rsa:2048 -keyout private.key -out cert.crt
@@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.
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.
If you use Vite, you can use youre official pluggin : npm i vite-plugin-mkcert -D. its very easy your use