- [Instructor] To get started creating a back end
for our app with node js and express,
let's create a new directory
outside of our front end directory.
Now, since our front end code is in a directory called fsv,
that is full stack view front end,
let's call this directory fsv back end.
And when you create it,
it's just going to be an empty directory
with nothing else in it.
Now, in theory, just as a side note here,
we could have this back end code
inside our original directory.
But in practice, it's usually easier to keep the front end
and back end code of our app separated
especially as our code base gets larger and more complex.
So inside our new directory,
let's initialize a new npm package here
by opening up a terminal in our directory
and typing npm init dash y.
And what the dash y flag here does
is it leaves the default answers for everything
for all the questions that it would normally ask us
if we were to just say npm init.
Okay.
Simple enough.
And what that does, just for those of you who don't know,
is it creates this package dot json file,
which just contains basic information about our projects,
such as the versions, the dependencies,
all that kind of good stuff.
So once we've done that,
what we're going to do is install a few of the packages
that we're going to need to actually build our server.
As I mentioned before, one of these is going to be express.
So let's install that by saying npm install express,
and hitting enter.
And there we go.
So now that we have that, the next thing we're going to do
is create a new folder called source.
And inside there,
we're going to create a new file called server dot js
which will contain all the code for creating our server.
Now, before we write any code in here,
there's something we need to do first.
You see, currently, node js doesn't have native support
for JavaScript's modern es6 and beyond syntax.
So what we'll have to do is make a few small changes
to allow us to write our back end
using this more modern syntax.
And we didn't have to do this for our front end
because this is something that the Vue CLI
takes care of for us.
Nevertheless,
it's a good thing to know how to do for yourself,
and that's what we're going to take a look at doing here.
Okay.
So the first thing you have to do is install a few packages
from a library called Babel,
which if you haven't heard of Babel before,
basically what it is is it's a transpiler
that allows us to write our code base
in more modern JavaScript syntax,
and still have it work on systems and run times
where es6 and beyond isn't supported natively, right?
This is a case for node js.
So what we're going to do is install a few packages,
and there's going to be actually quite a few here.
So, just bear with me.
In our terminal, we're going to run npm install,
and these are all going to be development packages here.
We're going to say save dev.
And then, the first one is going to be @ Babel slash core.
That's the sort of core Babel package.
Then we're going to have @ Babel slash node
which is a package that we can use
to run our more modern code in development.
And then we're going to say @ Babel slash preset dash env.
That's basically just the most popular preset
for converting newer JavaScript code
into older JavaScript code.
And then we're going to have @ Babel slash CLI,
which is just command line tools
used for transforming our files.
And lastly,
we're going to have @ Babel slash plugin transform runtime.
This is just something that allows us to use things
like async and await, okay?
So let's hit enter and that'll install
all of those packages.
And after those are all installed,
the last thing we're going to want to do
is install one last package,
but not as a development package.
This is a production package
that we need in order for our server to run
once we'll build it later on in the course,
we'll see how to do that.
And this is just called npm install @ Babel slash runtime.
Okay.
And we'll hit enter, and it will install that as well.
So now that we have all those installed,
what we need to do is actually create a new file
in our project called Babel rc, okay?
This is basically where we tell Babel
how we want it to transform the es6
and beyond code that we write
into JavaScript that node js can execute by default, okay?
So inside here, there's just going to be a few things
and don't worry too much about all the details here.
The first thing we're going to want
is property that says presets.
And inside there,
we're just going to put @ Babel slash preset dash n.
Okay.
And the next thing we're going to do is say plugins.
This is where we can define some
whatever Babel plugins we want to add to our project.
And for now, we're only going to have one.
And that is going to be,
we're going to say @ Babel slash plugin transform runtime.
And as the second sort of a member of that array there,
we're going to say regenerator true.
Again, don't worry too much about the details here.
This is just some basic setup
that'll make our server run correctly later on.
If you're interested, you can look into it more on your own,
but the details aren't really worth going into here.
Okay, so now we should be able to start writing our app
in modern JavaScript.
So let's open up our server dot js file here
and write our first bit of server side code.
We're going to start off
with an incredibly simple express server here
that just sends us back a message
whenever we send a basic request to it.
The first thing we have to do
in all of our express apps is import express,
which looks like this, import express from express.
And then we create our app
by saying const app equals express.
Call it as a function.
And now that we have this app object
we can define different endpoints
and what we want it to do
when any of those endpoints is hit.
So let's start off very simply.
Let's make it so that when our app a get request
on an endpoint slash hello,
it simply responds with a message saying hello, okay?
To make our express app do that,
all we have to do is this.
We just have to say app,
and then we define the type of requests
that we want it to respond to.
It's going to be a get request in this case.
And then the endpoint that we want it to listen on,
which again is going to be slash hello.
And then app dot get takes a callback that gets called
whenever this slash hello endpoint receives a get request.
And this callback has two main arguments,
a request object, which is usually abbreviated req.
And this contains details
about the requests that we received.
And it also takes a response object,
which is usually abbreviated res.
And we can use this object to send a response back
to whoever sent the request in the first place.
So for our purposes,
our callback is just going to look like this.
We're just going to say res dot send,
and we're going to send back the message,
hello to the client who sent the request.
And just as a note here, res dot send
is one of several functions that we can use
to send back a response.
In this case, again,
that response is just going to be the string hello.
And finally, the last thing we have to do
is we have to actually tell our server to listen.
And this is done by calling app dot listen,
which takes an argument
to specify which port it should listen on.
We're going to do 8,000 here.
And it takes a call back that'll get called
once the server is actually up and running.
Okay, and we usually just use this to say console dot log.
Something like server is listening on port 8,000.
Okay?
And that's all there is to it.
So, now that we have our basic server code written,
let's make sure we save that file by the way,
the way we actually run this code
is with this following command.
Okay, we can say npx Babel dash node
source slash server dot js, and hit enter.
And we should see a message from the server
saying server is listening on port 8,000.
And what we're going to do
is we're going to open up a browser,
put in local hosts 8,000 slash hello, and hit enter.
And we should see right here
the response that we're getting from the server,
which is hello with an exclamation point.
And that's great.
So this is a sign that everything's working well so far.
What we're going to see next
is how we can actually make our app do some useful things
as well as we're going to take a look
at a better tool for testing our server
than just using the browser.