So what we have to do next is expose our localhost to the internet. Right? So let's go ahead and look at that. So in my terminal here, I'm gonna go ahead and run npm run dev and I'm gonna go on localhost 3000. So this is working right but what we have to do is we have to find a way to expose this localhost to other services because we're gonna be needing webhooks right so we need them to be allowed to connect to our localhost.
In production that's not gonna be a problem because we're gonna be deployed on the Versal URL so we're just gonna use that URL. But for development mode we need to find a way to expose our localhost to everyone on the internet who has the URL. Right? So right now our website is only accessible on localhost 3000 and that's not something that we can connect our webhooks to. So what I recommend you do is download and install ngrok.
So go ahead to ngrok.com slash download. I'm going to put the link in the description as well. And go ahead here and select whatever your machine is or whatever way you want to do this. So I'm on a Mac OS here so I run this brew command here or you can also do it using the zip file and after you've done this so be that for Windows or for Linux this is very important for you to do because Clerk is not going to be the only webhook we're going to need. We're also going to have some other services so it's crucial that you have to have this installed in your machine.
But for production we're not going to use this at all. This is only for development mode. So to confirm that you have ngrok set up correctly after you've done this install steps you can just write ngrok in your terminal and you should be getting well all the options that you can do with ngrok. You should not be getting a command not found. If you get command not found it means that you haven't installed this properly.
So make sure that you have this installed. And after you confirm that your command is working what you have to do is add your auth token and for that you need to create an account. So go ahead and click on sign up here and create an account. So once you are inside you're gonna see a screen similar to this and here again you have some instructions on how to install ngrok and what you have to do next is run this ngrok config add out token so basically copy whatever it says right here I'm gonna hide my token here so you cannot connect to mine and don't share yours with anyone as well. And now go ahead and add that in your terminal.
So I'm going to go ahead and paste that here and add it. And there we go. Out token has been saved to my configuration file. And then what I can do is ngrok HTTP 3000 like this. And as you can see now, I have this forwarding right here and make sure you use this HTTPS.
So go ahead and copy this URL here and we're gonna go ahead and paste that inside of my localhost here and what I'm gonna do is get this error right because we have nothing else running on localhost 3000 so go back inside of your terminal make sure ngrok is running and open a new terminal and do npm run dev. So now this is going to be running on the localhost 3000, right? If I go ahead and visit the localhost 3000, my application is running right here. But if I go back here, let me expand my screen so I can see my URL here so you can you can even shut this down and just run ngrok again and you should be seeing this URL but keep in mind every time you run ngrok it's gonna be a different URL so just copy this forwarding URL here and make sure you have npm run dev running and look at this now we can access our application but in a different URL and you can even share this with your friends if that's what you want. Perfect!
But one more thing that I want to show you is this exact issue right so every time we shut down the ngrok server so always make sure that your npm run dev is running and when you want to expose that using ngrok every time you do this it's a completely different url right so if I try and refresh on this page now I have an error that this one doesn't exist and that can get pretty annoying and you can probably forget to you know rerun your ngrok especially if you're watching this tutorial over a couple of days I doubt that you're gonna keep this running all the time right you're gonna be shutting down your app so every time you change this you're actually gonna have to change this URL in all the webhooks that we use. So that can get pretty annoying. So this is what you can do to get your stable URL. Inside of ngrok here, I'm actually not sure exactly where it is. It could be in Cloud Edge Endpoints right here.
Maybe not here. In Cloud Edge Domain right here. In here go ahead and click on New Domain. You can see that I already have one so I get an error. So this is in their free tier.
Also you don't have to upgrade ngrok at all. So this is just for development mode. No need to purchase anything here. So just use the free tier. Basically just get your free domain.
As of time that I'm recording this video they offer one stable static domain free forever. So what you can do is copy this right here. You can see that when I click, you can click on this little icon here start a tunnel so click on this and then you have the command which you can run so go ahead and copy that as well and then let's go back inside of here and instead of running ngrok HTTP 3000 We can paste that command like this and there we go. Now we have our own URL which is always going to be the same. So when I paste that here, do I have my app running?
Oh, I think I also have to specify the port for this. Yes, so paste this and you can see that at the end the port is 80. So change that to 3000. All right and let's try that again. So you can see the URL is now the same.
I don't have to copy it anymore. I can just refresh this page and there we go. Now I have a stable URL here which matches what I've gotten in here in these domains. If this has been disabled for you for any reason, well unfortunately you're just gonna have to work with different URLs every time but whatever you do no need to upgrade ngrok so you can completely use the free version that they have. Perfect so that's what I wanted us to do so now you can go ahead and shut this down you know take a break and when you come back just go ahead and run this command again.
And if you forget it, you can always go inside of Cloud Edge, Domains, find the domain, click on this little icon and just copy it from here. And that way your domain is always gonna stay the same. Perfect. So yeah, now you know how to expose your localhost 3000 to the World Wide Web which means that we can connect this to our webhooks.