So now in this last chapter we're gonna go ahead and enable subdomain routing by purchasing a domain and enabling a wildcard subdomain using Vercel. So the first thing we have to do is purchase a domain or you can of course transfer an existing one. So in your project in the settings you have domains. So you can click add and you can select any existing domain that you have. It's important that it's not a vercel.app free domain.
For the sake of demonstration, I'm going to purchase a new domain here. For example, funroad.dev for $14. So I ended up getting a new domain. The one wasn't available, so I just used a name that definitely won't be taken. There we go, the domain was purchased.
So let's go ahead and click here. Oh, it looks like I actually succeeded with the fun road great perfect so I can use both of them now so I have these domains now and they will probably take some time to propagate but I will still show you the process of how you would use them So for example go to your project, go inside of settings and go inside the domains here. Go ahead and click add a domain. I'm going to select funroad.dev like this and I will not apply any redirect. I will just add the domain and in here it will ask you to add this and redirect funroad.dev but you should not do this.
Instead just choose add funroad.dev. Let's wait a second to see if this will be successful, if not I have another domain here to try. And now after you have added this, go ahead and add it again. You can click Add domain, just add funroad.dev. If it will allow me, let's see, because we need to have two of them, and then we're going to edit one, and we're going to give it an asterisk at the front.
So let's select the domain and click add domain. And now, let's see if it's going to appear here again. Perhaps we have to do it this way. I will go ahead and add an asterisk here and then save this. And then after I did this, I just repeated the process.
Right, so first you have to rename it and then add the domain again. And just make sure to not add the www.redirect. So you should have this one and you should have this one. Now, of course, it will take some time for this to propagate, but you can already try it. So I'm going to go to funroad.dev.
And right now, nothing much should really change here. So we are still using the normal tenant routing here, right? The dashboard still works the same, everything should work exactly the same. But in order to test out the subdomain routing for the first time now, what we have to do is the following. We now have our new domain, funroad.dev.
So copy this URL. And now we have to go inside of settings environment variables and we have to modify the next public root domain so this one just change it to this so this is the root domain click save Then modify the next public app URL. So this will use HTTPS like this without the forward slash. And then we also have to add a new environment variable here, which is basically enabling subdomain routing. So set this to true.
This is okay. And we're going to add it to all environments so just click Save like this we are not going to redeploy yet and the reason we are not going to redeploy is because we need to update the Stripe webhook secret. Remember we just modified our next public app URL so ensure that you're using the correct protocol here and sure that this is how it should look like. We now have to go back to Stripe dashboard. And inside of Stripe dashboard, we have to modify our webhooks.
So let's go inside of developers, webhooks. And this is the one that works. So the one listening from events to connected accounts. And I have to edit the destination here. And I just have to modify this part to go to funroad.dev slash API Stripe webhooks.
There we go. Save destination. And I'm just going to copy the new signing secret. I'm not sure if it's the new one or not. Maybe it's exactly the same.
But I will update it either way. It looks like it's exactly the same just make sure you're editing the webhook secret yeah it is exactly the same one but still I just want to save I'm going to double check here so 6v and xy let's confirm that 6v and xy yeah it's the same one. Perfect. So make sure that you have added next public enable subdomain routing set to true, next public app URL to this, and the next public root domain to this. And after that, go inside of your deployments and simply redeploy the last one.
And there we go. So I have a deployment here. So what I'm going to do is I'm just going to enable development mode here. So you can see my URL here. And if I click on this, it will redirect me to a new URL.
I also have to enable it here. John.funroad.dev slash products. If I click here, it will redirect me to john.funroad.dev. So our app is officially working. Amazing, amazing job.
And here's an important thing that you have to test. In here, keep an eye on your cookies. I have no cookies here because this is a new domain. So I will log in as John. And the cookie is now set for FunRoad.
And an important thing to confirm is that when you click here and get redirected to new website, does the cookie stay here? In my case, it does. So this is very important because otherwise you would not be able to use the checkout button at all in production. Amazing. So we can confirm this works.
So what we can do now is we can just create another product just for funds. So test multi-tenant subdomain. And this is the price. Let's save this. And let's go back to funroad.dev.
So when I click here, I am now redirected to a completely new subdomain. I will click Add to Cart here. And when I click Checkout, I get no errors because I am logged in, right? Exactly what we wanted. And of course, we can test this out to confirm if it's working or not.
But of course, the last time, it took some time to connect to the webhook. So perhaps if it doesn't work immediately, it will just take some time for this to connect. I will check either way. And there we go. I was lucky this time.
Looks like it's very fast now. Everything is working super smoothly. The subdomains are working. Every single thing is working. Thank you so much for following this tutorial through the end.
I really gave it my best to give you the true multi-tenant marketplace experience. We added as many things as we could. I think the application looks very unique and beautiful. It's responsive. We have a bunch of things we've learned.
We've used amazing technologies here And it works, right? And we have the Stripe Connect and the sharing, everything. Amazing, amazing job. We purchased a domain, connected the domain, added a wildcard subdomain, and enabled subdomain routing and redeployed to Vercel. Thank you so much again, amazing job, and see you in the next tutorial.