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

Рет қаралды 10,518

Жыл бұрын

self-signed and valid SSL certificate for development on localhost
openssl req -x509 -sha256 -nodes -days 365 -newkey rsa:2048 -keyout private.key -out certificate.crt
00:00:23 create new react app
00:01:29 enable self-signed SSL
00:07:12 enable Valid SSL

Пікірлер: 39

@Adrian-oo1rz 9 ай бұрын

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

@benixal 9 ай бұрын

Glad it helped. You are welcome!

@76Freeman Жыл бұрын

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

@benixal Жыл бұрын

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

@FlorianGoussin Жыл бұрын

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 Жыл бұрын

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 Жыл бұрын

Glad it worked! Thanks for sharing

@treeworldnight3700 Жыл бұрын

Thanks a lott, You help me very muchh!!

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

@EgorDemeshko 9 ай бұрын

greate video. thanks,

@benixal 9 ай бұрын

Glad it helped. You are welcome!

@thespecsofscience2051 6 ай бұрын

Thanks a lot broooooo

@benixal 6 ай бұрын

You're welcome! 🚀

@thedelanyo 5 ай бұрын

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

@benixal 5 ай бұрын

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

@javerialodhi 2 ай бұрын

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

@ariel795 3 ай бұрын

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

@benixal 3 ай бұрын

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

@pnemonick Жыл бұрын

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

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

@naufalnasrullah6965 10 ай бұрын

how to use https on next js?

@guiaflutterflow 9 ай бұрын

and Next.js??

@alex_borisovic 19 күн бұрын

At react you can create. env file with line https: true. That's all

@damilare83 10 ай бұрын

@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 10 ай бұрын

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 10 ай бұрын

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 10 ай бұрын

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.

$@fracttal5$

@fracttal5 10 ай бұрын

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

@benixal 10 ай бұрын

self-signed or valid ?

$@fracttal5$

@fracttal5 10 ай бұрын

@@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 10 ай бұрын

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

$@fracttal5$

@fracttal5 10 ай бұрын

@@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 10 ай бұрын

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.