All right.
So now we're going to deploy our application to production and we're going to be using a service called
render@render.com.
Now, I used to use Heroku in most of my courses and tutorials with NodeJS, but Heroku got rid of their
free plan.
And I don't want you guys to have to sign up and enter credit card info and stuff like that to deploy
this project.
So Render has a really generous free plan and on top of that, it's a great service.
It's absolutely simple to deploy.
You basically just need to push your code to either GitHub or Bitbucket or GitLab, and then you can
just simply log in with that and you can just select the repository that you want to deploy.
And then if you have any environment variables which we do, you have to add those to the server as
well.
But everything is done on the server, the NPM run build, so we don't even have to do it ourselves
and we don't even need this build folder here in the front end because that will happen once we deploy
and it will be set up so that when you push to GitHub again to that same branch, it'll automatically
deploy your changes.
So really, really great service, really great workflow and they're not sponsoring me or anything like
that.
So let's go ahead and just you can log in with GitHub, which is what I did here.
And if we go to New actually before I do that, I just want to mention you do have to push your code
to GitHub.
You can also use GitLab, I believe in Bitbucket, but as you can see, I have my my code here.
This is the repository.
I have it private right now, but I will set it to public before I release the course.
So we have that pushed to GitHub.
Now I'm going to click new and what you want to choose here is web service.
If you if you have any kind of back end, you're going to choose Web service.
It's not it's not like a static website or anything like that.
Now, from here, we're going to choose the repository.
We want, which for me is this pro Shop V two.
So I'm going to click Connect and I'll give it a name, I'll just call it pro shop and the branch is
going to be the main branch root directory.
We don't have to put anything in that.
The runtime is Node, but as you can see, you can upload all types of applications here.
The build command, this is important.
We want that to be NPM run build, okay, that will run in our in the root.
So it's going to install all of our dependencies for the front end and back end and it will run npm
run, build in the front end to create our build folder which which has our entire react application
in it.
Now the Start command, we're going to want to change this because remember our server.js is in the
back end folder, so we want to change that to back end slash server.js or you know what, we can just
do NPM start because that does the same thing.
If I go to our Package.json you can see Start is going to run that same thing.
So that should do it.
And then I'm going to just select the free tier and we shouldn't need anything.
Well, we.
We can add our environment variables here, actually.
Let's do that so we don't have to go back in and do it.
So everything, not everything, but some of the stuff that's in our dot env we need to add.
We don't need to add the node environment or the port.
We do want obviously the mongo Uri, so let's grab that.
Use your own.
Of course not mine.
And let's call this Mongo, underscore Uri, and then we're going to paste the value in.
Okay.
And then we'll add another one.
Let's add our JWT underscore secret, and I'm just going to have that as ABC.
One, two, three.
And then.
And this can be anything.
And then we're going to need our pay, pal.
Underscore client underscore ID.
And I'm going to grab that.
And I'm going to change all this stuff after.
And then I believe that's all the pagination limit.
We want to do that as well.
So.
Uh, let's add that.
And I'm going to do eight.
But however many products you want to show on a page, you can you can choose what you want.
So I believe that that should do it.
So now we can come down here and let's see anything else.
If you don't want it to automatically deploy.
When you push to your repository, you can choose no here, but I'm going to keep that at Yes.
And that should do it.
Let's create web service.
And then this is probably going to take a couple of minutes.
But you'll see here that it will run our build script.
At some point I'm probably yeah.
Right here.
So npm install in our root and npm install in the front end and npm run build in the front end.
All right.
So I'm going to pause the video because this is probably going to take a minute or two and I'll be back
when it's done.
Okay.
So it finished.
It looks like MongoDB is connected.
So now we have the moment of truth.
Let's go ahead and open this link right here.
Okay, so it looks like it's working.
Now, the reason we had two spinners is because we have a loader in the carousel and for the products.
So if you don't want to show both, then you can just get rid of the loader in the carousel, which
I'm probably going to do.
So if we go to a single page that shows up, if we go.
Let's see, add to Cart.
So now we have our cart.
Let's try to log in and remember we're using the same database.
So all the same orders, all the same users are going to work.
So if I log in as John at Gmail.
Oops.
All right, so now I'm logged in and I can go to my profile.
So I have a couple orders here and we can go to the order page.
So this hasn't been paid yet.
So let's try to let's try to do that.
So I'm going to actually go to the the PayPal.
Developer dashboard.
And as soon as you're ready to go live, just switch this from sandbox to live.
But I want to.
Let's see.
Testing tools.
Sandbox account.
I want to use one of my fake accounts here.
So we'll pay with this one here.
So let's.
View edit account.
Okay, so I'm going to copy the email.
And let's go ahead and try to pay for this order.
And you can see it says Sandbox in here.
So we're not dealing with real accounts, real money, and then the password is going to be this.
Log in.
Okay, we're going to complete our purchase.
And there we go.
Order is paid.
This gets set to paid.
Cool.
Now let's look at admin functionality.
So I'm going to log out and then we're going to log in as admin at email.
And one, two, three, four, five, six.
Okay, so now I'm logged in as admin and I'm going to go to, let's see products so we can see all of
our products.
Let's go to orders.
And let's see the order that we just made or that John just made, which was.
This one.
If we go to details now, we should be able to mark that as delivered as an admin.
And there we go.
So, yeah, we can mark orders as delivered.
What else we can.
Update.
Let's say we want to change this price to 299.
Update.
Okay, That gets changed.
Good.
Search.
Search for phone.
Or phone.
Yeah, that works.
So everything looks to be the exact same as it is in development, which is what we want.
All right.
So that's that's it, guys.
We now have a full, full featured shopping cart e-commerce platform, whatever you want to call it.
And, you know, you're free to to use this as you see fit.
You free to add on to it, make it better, add more features.
Oh, I wanted to try the comments or the reviews.
So let's say excellent, great submit.
And there we go.
I mean, ideally, you know, admins probably shouldn't be reviewing, but it's fine.
Cool.
So now we have this deployed at this domain.
But obviously you're going to you're not going to want to use an on render domain.
You're going to want to use something like whatever pro shop.com, which I'm sure has taken.
But in the next video, I'm going to show you how we can add a domain to our project.
And I'm using Namecheap, although you could use any, any domain provider that you want.
But let's let's do that next.