Okay, so now we're going to start on our back end.
So right now we have a front end folder and we just have a git ignore in the root.
So I'm currently running the React dev server from the front end folder.
I'm going to just stop that for now.
And what I'm going to do is keep this terminal open, but go to my other terminal here, which is in
the root because right now we're going to be working in the root.
So first thing we want to do is create a server side package.json and any dependencies that we're going
to install are going to go into a node modules folder in the root.
So let's go ahead and run NPM init and we're just going to go through the questions here.
So for the package name I'll stick with Pro shop V to version.
I'm going to put 2.00.0, but you guys don't have to.
This is just because I already have the first version in another repository and then description will
say e-commerce.
Application built with the mern stack.
And then entry point.
I'm actually going to use server dot JS instead of index.
Just my preference.
And let's see, we don't need any of this stuff.
Author You guys are free to put your own name.
And then I'm going to use an MIT license and that's that'll be good.
All right, so now we have our package dot Json on the in the root here.
Now.
When it comes to modules and bringing in JavaScript modules and packages by default.
With Node.js, it uses Commonjs, which is the you know, const something equals require something.
It's the require syntax.
I actually don't want to use that.
I want to use the Is module syntax just like we use on the front end where we say import something from
something.
So in order to do that we just have to go to the package.json and we need to add a type module value.
So I'm going to go, let's see, I'll go right under the right, under the description here and I'm
going to put in type and I'm going to set that to module.
So here we have Commonjs.
That's the default.
I'm going to use module that means that we can use is modules.
All right, So we'll save that.
Now our entry point is going to be in a folder called Back End.
So let's create that.
And then inside back end, we're going to have a server.js file.
That's just what I like to call it, if you want to call it App.js or Index.js, that's fine as well,
but I usually stick with server when it's my my server's entry point.
So for now, let's just do a console log.
We'll just do a Hello world console log and then in the package.json in the route I'm going to trade
test trade, I'm going to replace test with Start and then we're going to get rid of this and we want
it to run that server file.
So we're going to say Node and then run back end because that's the folder it's in.
So back end slash server.js.
So let's save that.
And now if I come down here and I run from the root npm start.
You should see the console log of Hello World.
So let's close up package.json.
And before we do anything else in our server.js, let's install our express dependencies.
So make sure you're in the root, not in the front end and say NPM install express.
So that's the web framework we'll be using on the back end to create our routes and so on.
So in the server, let's get rid of this console log now and we're going to import Express.
So I'm using the ES module syntax.
So we should be able to say import express from express.
The default Commonjs syntax would be like this const express equals require express.
But I want to stick to this because that's ultimately that's what we're using on the front end.
So I don't want to have two different standards, even though that's, you know, I've done it plenty
of times in the past, but more recently I've been using ES modules in the back end.
So we have express let's, let's also create a variable for a port.
So I'm going to say const port and set that to 5000.
We have the front end server running on 3000.
So I want the back end running on 5000 and then let's initialize Express.
Okay, so we just creating a variable called app setting it to express.
Then we're going to create our first route.
So let's say app dot get.
So we're making a get request and this one will just be two slash and I'm going to just not use copilot
for this.
We'll just type it out.
All right.
And then we have a function.
You can use a regular function or an arrow function as the callback here.
And this is going to take in a request and a response object.
All right.
And then what we want to do here, whoops, that should be a comma, not a period.
And then what I'm going to do here is just take my response object and call send and just send some
text that says API.
Yeah, we'll just say API is running.
All right.
So that's our first route and then we need to start the server up.
So we want to take our app variable and we want to listen on the port that I created above and then
we'll just have an arrow function here that will say console dot log and we'll put in some backticks
and we'll say server running on port and then whatever that port variable is, which is 5000 right now.
So let's save that.
And if we come down here and run NPM start, we should see server running on port 5000, right?
And then if I go over to the browser here and I go to localhost 5000, I'm going to see API is running.
Now, we're not really going to have anything on the home route here.
Ultimately, this is going to load our React application if we go to our root domain, which obviously
won't be localhost 5000 when we deploy, but it is for our production.
But we will have routes like slash API slash products and that will give us all of our products and
so on.
So for data, just to begin with, we're going to just use a file just like we did in the front end,
right?
In fact, what I'm going to do is in our front end where we have our products.
JS I don't want to move this because then our front end will break because right now that's what it's
using.
But I do want to just copy it.
So if we can just copy this and then bring it into our back end.
And in the back end we'll create a folder called Data.
And then let's pop that products in there.
Okay.
So right now we have two separate products files.
Right now, the front end is using the front end products.
JS But ultimately I want to be able to have it, get it from this back end, and then ultimately after
that, we'll have it from the database.
So let's create a route that will serve those products.
So first thing I'm going to do is bring that in.
Actually, let's go up here and let's say import products from data slash products.
Now remember, since we're using ES modules on the back end here, you do have to use Dot JS for your
own JavaScript modules.
And then I'm going to go under this route here and let's say we'll just use copilot here.
So we'll say App.get.
So we'll get request to API products and then we're just sending a Json response with the products.
So now if I save that, I'm going to have to restart the server.
I'm going to in the next video, install something called Nodemon.
So we don't have to keep doing this.
But right now we do have to just run NPM, start again.
And then if we go to slash API products, we should see some Json with our products and I do have an
extension installed.
I believe it's called Json formatter.
I have so many extensions installed, I'm not sure which one it is, but I believe it's called Json
formatter and it makes it look nice and neat.
So if yours doesn't look like this and you want to install that extension, you can.
All right.
So now we're serving all the products.
Let's create a route for a single product.
So for that we're going to do.
Let's just go ahead and paste this in right here.
So for that, we're going to do API slash products, slash colon ID, which is a placeholder for whatever
the ID, And then right now, since we only have our products in a JavaScript file, basically it's
just an array.
We're using find to say, well, you know, go through the products and if the product ID or underscore
ID matches the ID that's in the URL, then we're going to return that product.
Okay.
So now if we save and we go to, let's say, products, well, we got to restart the server.
And let's go to product one.
And there we go.
We get the first product.
Okay, So very, very simple right now.
But it gives us enough to start to think about fetching data from our front end.
But before we do that, I just want to do a couple small things in the back end.
I want to be able to just have this, you know, watch the file and so we don't have to restart it every
time we make a change.
We're also going to use a tool called concurrently that will allow us to run our back end server and
our front end React server at the same time.