Hi, in this video, we are going to quickly cover how you can use Replit to quickly deploy and test your full-stack application like a production deployment. This is not a sponsored video; I just happen to have an yearly subscription of Replit, which I don't use really much.

The reason why I took the subscription is because of the remote IDE capability that I wanted to use even when I'm on the move, so that I can just build projects and I don't have to carry my desktop or heavy MacBook. So I just thought why

not use the free credit that they give every month to actually host your application if you are on their core membership plan? So we can actually use it for production-grade deployment without much worry and without much hassle. And that's what I just wanted to

quickly cover in this video. So let's go ahead to my desktop and let's do this right now and see how it can be done. So now I am in my desktop and I have already opened Replit.com. So the next step, what we will do is we just

need to import our Next.js project so that... So in this demo, I'm going to deploy the very Next.js project that we are building as part of the SaaS course, and it's going to be the SaaS application that I'm hopefully going to launch in

the next few days or weeks. Um, but this is still a draft version. But let's see how we can deploy it in Replit and how we can use it. So we just create a Replit and we'll go to import from GitHub if you want to use the Replit agent and create

your own app you can do that now they are also supporting the Node.js and any JavaScript library based app so you can directly just describe the app and it will uh create it I have already covered a video before how to use Replit agent and it's very simple and easy so

I'll leave the link in the description so you can check but in this case we're just going to import from GitHub and this is the project that I'm building so as you know I have already created an open source version of an AI agent

or sales agent that called Naughty AI and now we are building the Naughty AI Pro as part of the SaaS course so this is what I'm going to try and deploy in Replit today so I'm just going to select this and uh just click import from

GitHub now this is a private project this is kind of the SaaS product that I'm thinking to build uh in next couple of weeks now once you uh import that it will ask you to configure your Replit um now this is definitely the Run command that will be used to run the app locally

but we are not going to just run it locally we are going to deploy it as like a production app so stay tuned and see what I'm doing now I'm just going to do confirm and close I don't uh really need anything as such now when you do

the first time you have imported that uh you would see that this project usually have ENV staging and ENV example file but I haven't kept any ENV or ENV production file so usually if you want to deploy it in production uh I would recommend you to create a ENV or ENV

production file and keep your non-secret configuration file there, but I use a different approach. I don't keep it in a .env file, but it's up to you how you want to do it really if you are using the Replit platform. So what I usually do is

I create all of the environment variables, including the secrets, as Replit secrets. So if you see here in the left panel, this is the Secrets tab. Right? So when you click on Secrets, there are some. So Replit secrets are the secrets that will be used in this particular

Replit, or in this particular project. However, what I do is I create the secrets as account secrets because when you create as account secrets, you can actually reuse them in multiple Replit projects. So that's why I do a few of the secrets may be used in one uh project

and maybe the other one may be used in another project. So that's why I created them as account secrets. All I have to do now is just select this Replit that I need for this project. So I'm just going to select all because I frankly I need all

of this one. Now you can only copy up to 10 linked secrets, so we just copy this once and then we'll select the other ones, and then we're going to click this. So now, as if you see, we have all the required secrets or rather config as well

because not all of these are secrets. We have some API keys and secrets which are meant to be secret, but then we have some URL stuff that may not need to be a secret. So we have all of this. So I think we are ready. So first thing first, that

you need to do after you import the project is just hit run so as you run it what it will do it will just try to run it in the local IDE as you run it on your VS Code environment so uh that's what it will try to do just to see whether it's

working as expected uh before we go ahead and try it in and deploy it like a production application so I'll give it a few minutes and I'll just wait for this to be finished as you can see there is some an Nix error it's not really a big

deal as of now you can just ignore it because I can see that uh the app is deployed and I'm able to see the front page which looks nice now what we will do we know that this is almost ready to go and we will now try and go ahead and

deploy of course I would recommend you to test everything uh before you go but uh as part of the video we are not going to do that because I'm anyway doing all the testing in my local environment so let's try and and do a deploy okay so

we'll click deploy now and then you have uh multiple options here but because this is a Next.js website not a scheduled job or a static website uh we will use Reserved VM you can use Autoscale now Autoscale what can do is it may actually increase the cost of your

hosting in fact your in fact the Reserved VM is also a lot more costly than if you just um buy a server and host it so I'm not actually recommending you to use the replate Reserved VM for deploying uh the production application the the reason is

because this charge is really huge, uh, but if you are someone who wants to use managed services and stuff, you can actually go with Replit or Replate or Vercel or similar like services. Uh, but I prefer having my own VM and host my

app, so I'm actually creating the Codify tutorial in parallel, which will show you how to do that as well. This is more sort of showing you how to use Replit deployments because uh if you are building a production app, it's really essential that you do not just depend on

your local build and local test because local is more sort of development, whereas you should also do some kind of staging uh environment where you actually deploy it on some kind of cloud server and test your application before you go and hit the production. And Replit can really be a

good choice if you have the Replit subscription because Replit subscription gives you around $10 per month in credit to use their um, reserved VM as deployment. So I have the Replit Pro plan, as I have taken a few months back, as I've shown you probably in as

part of the other video. Uh, so that's why I'm just using Replit. This is more sort of like a staging for me, but I will try and deploy it as a production app so that I know exactly if there is any issue when it comes to the

deployment. So I'll just use uh this uh domain. Uh, this also comes with Replit, it's free, and then the build command is of course, it's a Next.js project, so I'm going to use `npm run build` and the run command is `npm run dev`.

or npm run prod whatever you have set in the config file of the next.js app, whatever you have set up in the package.json. Now let's go ahead and try to deploy it and see if that works or not. I'm going to close the web view for now.

and I'm going to close the secrets as well. And what you can do is just click on this 'hide log' or 'view log' to see the logs when it's being deployed. Now if you can see the build has failed, although when we have run it in the local, uh, run

or local build, that was all successful and it came up with the page. So this is the reason why I said to use some kind of provider like Vercel to do the deployment for your staging or just before you, just before you go to production, because that will give you

you some insights about production standard build. And what I mean by production standard build is if you see here, it's just saying that it cannot find the 'fs' module or the file system module. Now, it's not that the module is not there, the module is there, but I

think I know the issue. The issue is if we go to this path, so if you see, we are using the file system module here. Now the issue is because it's a Next.js app, so Next.js app has a client part and then the server part. So, so it is better to use

the backend to access the server and then all the file system around it rather than the front end trying to do that, and that they don't allow you. So what I have to do is I have to now make some changes so that I don't use the

file system uh and try and do the r apply but this is what I wanted to show you that please uh make use of deploy or similar kind of deployment once before you go to production because that will give you so much more insight about how ready your code is before you hit

production okay because this is actually trying to do the optimized production build whereas when we have used this run button that you have seen as the web view let me actually open the web view it is it will work because this is more sort of a development

environment as it is running and that's why it is working there is no error as such and I can actually access uh I think it is coming on the blog uh blog post let me see if it's loading the blog post properly or not in the local

environment yeah as you can see it's loading the blogs and everything properly so yeah it's everything works in the local but it fails to even build at the production so please make sure uh you do that and use these features so let me go ahead pause the video and fix

the issue uh I think it will take some time and then I'll come back when it's fixed okay so I think I have fixed this now um I'm just going to do like get commit I'm going to do it directly on the develop branch which I really don't

do usually so you should always do it in a custom branch and raise a pull request so that you have a track but uh for now I'm just doing it on the development because or the develop branch now what we'll do we'll again go back to the git

and this time uh we just confirm it and then we'll just hit pull so this will pull all the latest changes from the git and as you can see that the latest commit is pulled now I'm just still going to hit this sync with remote and

I'm hoping that this will work so I'm just going to hit redeploy and as I said you can check the log from here so let's see now it started the production build so if you see it's also now checking all the linting and validity of the types so

this is really important what uh that doesn't happen when you do in local build in most of the times and especially if you're using on Next.js or TypeScript related project uh this is really essential that you do that now as you see I think there are some type

script issue in the page.tsx as it has found out now it's not something my local development have shown me so I think I have just I have to just go back and fix that and I'll come back again so now I have fixed hopefully the uh type

issue and I have used the AI Winds Surf uh editor uh and their co-pilot feature now I will actually cover more about this editor uh in more details like a crash tutorial because I really find this uh AI tool and this editor um astonishing and it actually created a

lot of uh code for me so I'm just going to push it and just like before we will go to Git and we will pull the changes I can see that let's fix that and then we'll try a redeployment and hopefully this time it will work let's see so now

finally it has deployed as you can see um it took a little bit of back and forth to fix because there was some error that was coming but now finally it has deployed as you can see and now what we can do is just go to the website so

that's the domain so we just go there and hopefully it'll come up and there you go so this app is basically going to be live hopefully in a few days or weeks as I'm building um this one as part of the SAS course as I've told you as well

so if you want to be part of this course and you want to learn how to do all this stuff uh and this is by the way not just like a B2C app this has partners and everything like a B2B interface and stuff which I have also talked about in a lot

more details in our SAS weekly Meetup so if you want to check out the Meetup recording go to the community and have a look and if you want just buy the course because we are also opening up some earning opportunities through this application through partnership as you

can see so I have again discussed in a lot more details uh in the SAS Mastermind within the community so go to the community check the learning tab and have a look at the recording so yeah it's all uh as part of this video I think in the next video I'm going to

show you how to do this deployment in a production setting like uh in a real world just to make it live as part of the Coolify course that I have launched last week so yeah subscribe to the channel and stay tuned and take care and I'll see you on to the next one bye

Deploy Production SaaS App One Click Using Replit | Staging | Testing | Go-Live Preparation

Deploy Production SaaS App One Click Using Replit | Staging | Testing | Go-Live Preparation

스크립트