Deploy Claude Code to Production in MINUTES

How to Build Full-Stack AI SaaS with Claude Code (Tutorial)Fresh📅 2025-11-11

Watch on YouTube ↗

Deployment Architecture

┌─────────────────────────────────────────────────────────────────────┐
│                     DEPLOYMENT PIPELINE                             │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   LOCAL DEVELOPMENT              CI/CD                PRODUCTION    │
│   ─────────────────              ────                 ──────────    │
│                                                                     │
│   ┌─────────────┐           ┌─────────────┐      ┌─────────────┐   │
│   │    Code     │           │    Build    │      │    Vercel   │   │
│   │   + Test    │  ──────►  │   + Check   │ ───► │   Server    │   │
│   │   Locally   │           │   Quality   │      │             │   │
│   └─────────────┘           └─────────────┘      └─────────────┘   │
│         │                         │                     │           │
│         │                         │                     │           │
│    git commit               auto deploy            live app         │
│    git push                                             │           │
│                                                         ▼           │
│                                                  ┌───────────┐      │
│                                                  │   USERS   │      │
│                                                  └───────────┘      │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Deployment Steps

• Deployment configuration
• Production optimization
• Monitoring setup

Transcript

[00:00] Welcome back to the series where I show you how to build real-world SaaS applications using Claude Code. So far, we've made excellent progress. We've set up this border plate project, which also includes user authentication, a database, and AI models using OpenRouter. Now, we might be tempted to open up Claude Code and to start building our application, but there's actually something I like to do at this stage in the process, and that's to set up our CI-CD pipeline. What that means is we're going to deploy

[00:30] this project to GitHub, and then from GitHub, we'll deploy our project to a production server. Now, there are a lot of reasons why we want to do that at this stage. At the moment, this code is sitting on my local PC, and if anything had to happen to my machine, I would lose all of my progress. So by storing this code on GitHub, we effectively have an online backup of our project. Of course, deploying to GitHub also means that we can share the project with other developers or contributors. Then finally, we'll deploy our app to a production server

[01:01] so that we can see and test our changes in production as soon as possible. Trust me, just because the stuff works in dev does not always mean it's going to work in production. And since this project is very much in development, it's really a good idea to test it both locally and in production. So go over to GitHub.com and then create or sign into your account. Then create a new repository. Then let's give our repository a name. I'll leave the visibility as public so that you guys can actually view the code.

[01:31] But if you don't want anyone else to see your project, then you can simply change it to private. Then let's create this repository. Then let's scroll down to this bottom section to push an existing repository. We can just simply copy all of these commands and run them in the terminal. All right, cool. So afterwards, when we refresh this repo, we can see all of our project's code in this repository. So my recommendation would be that whenever you implement and test a new feature, try to commit those changes

[02:02] and push them up to that repository as soon as possible. Now let's also have a look at deploying this project to production. The easiest way to deploy these NHS applications is by using Vercel. So go over to Vercel.com and then create your account. And this will not cost you a thing. From your dashboard, click on Add New, then click on Project. On this screen, you will be asked to connect your GitHub account. So simply go ahead and do that. Then look for your repository and click on Import. Then on this page, go

[02:33] to Environment Variables. And what we have to do is copy all of the variables from this .env file over to Vercel. Now, thankfully, that's really easy. Simply copy all of these values and paste them into Vercel, like so. Now there is one thing we have to change. The Postgres URL is still pointing to our local Postgres database, which obviously won't work in production. So what we have to do is set up a production database. Thankfully, we can do that in Vercel as well.

[03:05] Simply go to Storage, then click on Create Database, select Neon, and click on Continue. Then under Options, I'll just select My Region. And then let's click on Continue. Let's give it a name, like Plushify AI, and let's create this. All right, done. Now from these environment variables, what we have to do is copy this Postgres URL variable, so this entire string, and then add that to this environment variable. Cool.

[03:35] Now that's actually all we have to change at this stage. So let's go ahead and click on Deploy. Vercel will take about a minute to build this project. Now, while this is building, I don't want to show you that you can view the tables in your production database as well. So again, under Storage, we can simply click on our database name, then click on Open in Neon, then click on Tables. This looks very similar to Drizzle Studio, which we had a look at in the previous video. All right, so it seems like our build is complete.

[04:07] So let's go to Continue to Dashboard. All right, so Vercel gave us this unique domain for our project. So if we click on this, we can see our border plate project, and we can see that everything is connected and working. But this time, it's running off a public domain. But you will notice that if you click on Sign In, nothing actually happens. And if you recall from the previous video, what we have to do is grab our public domain and add it to Google Cloud Platform. So let's actually do that.

[04:37] Let's go to Google Cloud, then we'll just select our project, then let's go to Credentials, under OAuth clients, let's click on Add URI, and let's paste in that public domain. Let's also grab all of this API stuff and add it to this domain as well. Then let's click on Save. And this still won't work because we also have to go to Settings, then let's go to Environment Variables, and now that we have that public domain, what we have to do is

[05:08] change this next public app URL. So let's go to Edit, and it's changed this from localhost to our actual production domain. Let's save this, and let's click on Read Deploy, and let's click on Read Deploy again. Okay, so I'll just go back to our project, and I'll wait until the bolt completes. All right, the bolt is complete, so let's refresh our app. Let's click on Sign In, and that's it. Now the authentication system is working in our production instance.

[05:38] Now the following step is optional. If you don't want this generated domain from Vercel, you can assign a custom domain as well. So what you can do is register a domain with any register. It really doesn't matter. I just decided to use CloudFare for this domain. The only thing that matters is that you should be able to update the DNS configuration. On this project, we've got this button called Domains. So let's click on that, and this shows us the domain that was generated by Vercel. We can also buy a

[06:10] domain directly from Vercel, or we can add a domain from another provider. So I called mine PlacifyAI.com. I'll just paste it in here, and we'll connect this domain to our production environment, and it's saved as. And Vercel will now ask us to change the DNS records on that domain. So when we expand these, you can see the exact records that we have to add. So I'll just go ahead and do that now. On the domain, I'll just look for a setting to update the DNS records.

[06:42] Then let's add a new record. This is of type A, and for the name, it's just this add symbol. And for the value, I'll enter this, and we have to disable proxies. Cool. Let's save this. And back in Vercel, we should be able to click on Refresh. And now it seems that this configuration is correct. And Vercel is generating an SSL certificate. It's still the same for these records. So I'll add a new record. It's set to type to CNAME, and for the

[07:12] name, we'll enter www. And for the target, we'll copy this value, add it in here, and we'll disable the proxy, and it saved this. And again, let's click on Refresh. And now this configuration is valid as well, and Vercel is generating the SSL certificate. So what's really cool about this is we now have a custom domain assigned to our application. And if I go to PlacifyAI.com, we can, of course, see our starter project. Now one thing to keep in mind is that we also have to add this

[07:42] domain to Google Cloud Platform. So let's add this as a URI, along with this API endpoint. Let's save this. And we also have to update our environment variables. So let's go to Settings, Environment Variables. Then let's look for this next public app URL. Let's change it from this Vercel domain to our very own custom domain without that front slash. Let's save this. Let's redeploy the project. And now once the bolt completes, we should be able to use this

[08:14] app with our own custom domain, and everything should still be working. All right, so bolt completed. Let's go back to our app using the custom domain, and we should be able to sign in. And cool. That works. So let's click on our account. We're able to access the dashboard. Let's also see if the AI functionality is working. So let's say, hey. And yes, everything is working. This was a critical step to the success of our application. We now have a local development

[08:44] environment, and a deployment pipeline from Dev to production. Now in the next video, we can finally start using Cloud Code to build this real world SaaS application. I'll see you in the next one. Remember to leave any questions in the comments below, and subscribe to my channel to be notified as soon as I release the next Cloud Code video. I'll see you in the next one. Bye bye.