In this chapter, we're going to finish this project by deploying. We're going to individually deploy our web app, our widget app, and then we're going to test the embed script again from this new live application. So before you do anything, what I recommend you do is double check that you are on your main branch, double check that you have the recent changes merged in, and then head in the root of your app and simply run turbo build. It will probably take some time, Mine is now very fast because it's cached. But you should see four successful builds.
If not, you will probably see what the errors are. They will most likely be some lint or type errors. So you can easily fix those. Simply go inside of the files which the error tells you. If you're struggling and you cannot fix them but you just want to deploy, you can go ahead and search for this exact line in Google and add inside of your search, turn off or like pass, right?
Just if you want to turn it off because you can turn it off but I would highly recommend that you actually try your best and fix these errors. So now head to your cell dot com you can use the link on the screen and click add new project. And in here, as you can see, you have your project and it is recognized as Turbo, right? So it knows that there are three projects inside. You can see how Vercel is smart when it comes to this.
So now we have to choose which apps we're going to add I believe. So let me go ahead and see what we're doing. So the first thing I want to do is echo web. So let me go ahead and try and change this to not use embed instead use web. So go ahead and select web and continue.
And that will automatically, as you can see, change this to Next.js apps web Project name, Next 15 Echo Web. Now let's go ahead and set the environment variables here. So instead of apps web, let's go instead of .environment.local and let's copy all of these and let's paste them inside of our app. Just like that. Now for the build and output settings, I'm pretty sure this is all good.
I don't think we have to modify anything here. So yeah, make sure that you have selected, again, you can click edit here and then inside of your GitHub repository name apps, select web. That's the first one we're doing. Call this your project name. For me it's Next15Echo, for you it can be Echo, right?
It doesn't matter. And give it a suffix of web so you know what this is. Paste the environment files inside from your environment.local from the web app and click deploy. Now I'm going to pause the screen And we're going to see if this works or not. And here we go.
So looks like this one. Well, if I click here now, I should be seeing the login screen for my app. Let's see. There we go. Sign into Echo.
Let's go ahead and log in. And let's see if we can see the operator dashboards, right? So this should be the web application that we just deployed. Let's see. It's loading.
And here we go. Oh, Yes, I forgot to fix this. Don't worry. This won't be any special screen. This will be a redirect.
And there we go. I can see my conversations. Let's see if this works. Test. It works.
Everything works just fine. I can resolve it. I can do everything. Knowledge base works. Widget customization.
All of it is working just fine as well as the payments. Everything's working perfect. So now let's go ahead and let's deploy the widgets. You can see how easy it is. I can just down here I can do that.
So I'm not sure how you would usually do it. But yes, if you're still on this screen down here, find apps widget and click deploy like this. So let's see what will happen now. I think it needs to load or maybe there we go. So it's a let's in your project basically.
I usually how you would do it I think is just by clicking deploy again. I think it's as easy as that. You can just click new project again and then select again this and this time change it again not embed. Go inside of apps and select widget. Next 15 echo widget or in your case whatever this part is simply add dash widget here next JS preset and let's open environment variables here.
So this time instead of widget just one perfect let's add it here and the build I think everything is fine let's go ahead and let's hit deploy so again I'm going to pause the screen and let's see if this is successful or not and here we go another app successfully deployed and there we go of course there's an error here because you should never really visit this through an URL, right? But What is the problem now? Our app is deployed, but does this integration now really work? Well no, because this is still pointing to localhost 3001. That's a problem.
It shouldn't be like that. So what should be this URL? Let's go ahead and fix that now. Now that this is deployed, you now have your dashboard. So click continue to dashboard and make sure you're looking at the echo widget one and don't look at the deployment URL.
Just look at the domains. That's the one you're interested in. This is our domain. So now head back inside of your app here and go inside of your apps, web and inside of your modules, integrations, constants and simply finally modify this localhost thing with this. There we go.
Like that. But then again, I don't want you to miss the point. This is again not really important. The only reason we have to change this is because that's the place where we are hosting our widget.js script. If you would actually host this somewhere on some CDN then it wouldn't matter.
You wouldn't even have to change this because it would always come from a CDN, right? Some CDNJS.com and then something, right? But in our case we are hosting it here So naturally we need it here, right? So two things we have to change. First, go ahead and save this simply because this is now the new public URL of our place where we host WidgetJS.
That's the first thing we have to change. All right. The second thing we have to change is inside of apps web, inside of app we have dashboard and we have this page.tsx which is doing absolutely nothing. So what we can do now, you don't even have to delete this page, you can if you want to, but you can go inside of the nextconfig.mjs within Apps Web and inside of the nextconfig here go ahead and add asynchronous redirects and return source forward slash destination forward slash conversations permanent false like this. So now whenever users visit the root page they will get redirected to conversations and that's how we fix that issue.
But now we have another problem. Our current script inside of embed dist as you can see thinks that the widget is hosted here. Well, that's not true. That doesn't work, right? Because If you try and let me just go ahead and find our landing page.
So landing.html. Let me go ahead and open it. There we go. You can see that right now something's not working in this landing page. In fact, I have an error in the widget.js script.
So something's obviously broken. Why is it failing? It's failing because we are trying to load widget.js from here, which is not where it's hosted anymore. So this is now hosted here in Next15Echo widget. So if you save this file and refresh, then it works, but then it fails again.
Why? Well, we just fixed the issue of where the script is hosted. But the widget.js script, which is this exact one in the dist file, thinks that the widget app is on the localhost 3001. That's false. It's not.
It's here. So what we have to do is we have to rebuild the widget. So let's go ahead inside of apps embed. Yes, inside of apps embed and let's just do turbo build. But before that, let's go ahead and let's do, I already forgot how you do it.
Just a second. Vite widget URL. There we go. That's the one we need. And change that to be HTTPS next 15 echo widget for cell dot app because that's where it's that's where the widget is.
So this part is super important. Right. This is not where you host the widget script. This is where the widget application is. This is what the iframe should load.
So this part, what URL is bundled within the widget minified script is completely different than where this script is hosted. I have a feeling it's confusing you that this is the same URL. That's just an accident. This can be any URL in the world, right? And same thing for this integration constants.
Any URL in the world does not matter. But what does matter is the widget script. Where does it think that the widget app is being hosted? This is where, inside of this domain right here. So copy it, prepare it here, widget URL right here, PNPM build inside of apps embed.
There we go. Now we have a new script inside of this right here. There we go. Widget URL is now successfully modified for production. So I will copy this widget file again.
I will go inside of my widget app and inside of the public folder because that's where I'm hosting my widget file for now. Later you will change this somewhere smarter, right? Because this is super confusing that it's the same URL. So I'm going to delete the old one and I'm going to paste the new one, make sure the new one has the proper widget URL and simply rename this to widget.js. Perfect.
Now that we have this couple of things modified here, what you can do is in the root of your app. Oh, or yeah, no need to open a new branch for this entire thing. You can just go ahead and stage all changes. Let's call this, so this is what the 35 deployment, sure. 35 deployment, commit.
You can immediately push on your main branch because when you push on the main branch or if you merge a pull request into the main branch, this will trigger various redeployments on Vercel. As you can see it's queued, right, because I have some other ones. Deployments, let's see. There we go. So now it's rebuilding my echo web.
Why is it rebuilding echo web? Well, because we just modified echo web. We modified the next config to redirect to so it doesn't show that empty page and instead it just shows the conversation. So make sure you don't have a typo here or it will lead to a 404. And after that it will rebuild this because we added a new public script there.
So this is why you shouldn't host the widget script here because every time you update the widget script, instead of just uploading a new one to your CDN, you have to rebuild the entire widget app, right? That makes no sense. But just for development purposes, I'm showing you how you can do that. So I'm going to pause, we're going to test this. And then we're going to test again, our pretend landing page in the embed here, right?
This is where we are pretending that we are some user trying to integrate our app. And here we have both apps fully deployed, or should I say redeployed? So I'm gonna go ahead and go into their respective projects now. So let me go ahead and click in next echo web. Click on the domain.
Always use this URL. Don't use this specific branch URL. So let me go ahead and open this. OK, this works perfectly fine. Let's And yeah, if you've noticed, I'm not sure if you noticed, but now we no longer have that root page.
It just redirects to the conversations. So that's what we modified. Perfect. So that works just fine. Now we have integrations to check.
So HTML uses the new host Next 15 echo widget for cell. Again, not the perfect solution, but it works. Yes. And now we can copy this and you can put it in your landing page. But before we do that, let's check.
And you can actually copy this source here and try to access it yourself. And in here you can see our minified script, right? That's where we are hosting it. And in here you can check that this script thinks that the widget app is hosted in the correct url which means that now let's pretend again I am a brand new customer and I click HTML I copy this and I go inside of my HTML landing page and in my body here I add the script with my organization ID and the proper URL here So then I'm going to go ahead here and let's go ahead and open this and everything works. Hello, let's call this production, production, mail.com.
Hi there, is this working in production? And let's finally check in our conversations. There we go, we are in production. Amazing, amazing job. You just finished a super, super long, super complex tutorial.
I think this is my most in-depth tutorial yet, the closest to an actual B2B real world SaaS. Thank you so, so much for following. Remember to like, share, and subscribe, and leave a comment if you liked it. And see you in the next tutorial. Amazing, amazing job!