- [Instructor] Let's get our project set up
and run our first server using Express.
We're going to start with our editor.
So I'm in VS Code,
I'm going to go ahead
and open my terminal,
and I'm starting at the root here,
I'm going to go ahead and navigate to my desktop.
So cd Desktop,
and on my desktop,
I'm going to create a new folder
for our project,
and I'm going to call this express essentials.
So in order to create
that new folder mkdir
and then express essentials,
make sure you spell it right.
All right.
So I have that new folder created
and now I'm going to navigate into it
and we can go ahead
and initialize this new project
using npm init.
So make sure that you are
in that new project folder,
and this is where we're going to start the project.
So if you're not familiar with npm init,
it is a command that is used
to scaffold projects.
It's going to prompt us with a series of questions
about how we want to set up our project.
If you haven't used it before,
don't worry.
Most of the prompts
are not going to require a response.
All right, so we can go ahead
and type npm init,
and the first prompt
is for our package name
and it's defaulting to our folder name,
which is expressed essentials,
which is great,
and we can go ahead and hit enter.
It's version 1.0,
which also we don't need
to make any changes there.
If you want to add a description,
feel free to do so,
but it's not required for this setup.
The entry point for our project
is going to be index.js,
and we'll talk about that a little bit later,
but that's perfect,
we don't need to make any changes.
No test command,
no Git repository,
no keywords.
If you want to add your name as the author,
go ahead and do so.
License, don't need to worry
about making a change there,
and then we can quickly just scan
and make sure everything looks right.
Excellent,
and if so, go ahead and hit enter.
Perfect.
So now we can go ahead
and open up our folder
that we just created
for our new project.
So, sorry, I'm going to go to File, Open Folder,
and I created this on my desktop,
expresses essentials
and go ahead and click open.
So now we can see that a package.json file
has been generated from our npm init.
So this looks very familiar,
we just saw this in our terminal.
So now the next thing
that we need to do is install express
in another package called nodemon,
nodemon is a tool that will automatically restart
your node server,
when a change has been detected in the project.
It is a huge time saver
when working with Node.js.
So let's open our terminal again.
So View, Terminal,
and we are going to type
npm install express,
and then nodemon,
and I'm going to close this pane.
All right, so they've both been installed,
express and nodemon,
and now we're going to add
some additional dev dependencies
to ensure that our project
will be compatible with ES6 syntax.
You may be asking yourself,
what does ES6 refer to?
You've probably heard it quite a bit,
and ES6 is referring
to ECMAScript 6,
and this is a specific version of JavaScript
that is considered industry standard.
It allows us to use several features
of JavaScript that we were not previously able to,
such as modules,
which we'll talk about here shortly,
arrow functions,
several other features,
even things like const and let,
those were part of ES6.
So in this course,
we're going to use babel,
which is a basic JavaScript compiler.
So that is what is going to allow us
to use ES6 within our project.
So babel is a dev dependency,
and we will have to indicate that
when we install those packages
here in the command line.
So we are going to go ahead and do that,
and we're going to start
by typing npm install,
as we do when we're installing
different dependencies,
and since these are dev dependencies,
we're going to do --save-dev.
All right, and then babel has four packages
that we'll need to make sure
that we install for this project.
The first is babel core,
so with each of these babel
is going to be preceded by the @ symbol.
I'll call that out
as I'm listing out the packages,
but I just wanted to call that out.
So the first one is babel core.
So @babel/core,
then the next is babel cli,
so @babel/cli.
The third is
@babel/preset-env,
and then the last one is @babel/node.
So just to recap,
before we get these installed,
just to make sure
that you have everything that you need,
so we start this command with npm install,
then --save -dev.
Then we have @babel/core,
@babel/cli,
@babel/preset -env,
and then @babel/node.
One thing I want to point out
before we move on,
there aren't any warnings
that we see here in our terminal at this point,
but I do want to point out
that sometimes you may see warnings
in your terminal,
usually they're harmless,
but I do suggest scanning your terminal
when you've installed things,
just to make sure
that there have been no vulnerabilities
that have been introduced into your projects.
So we've installed those successfully,
and now we need to create
a configuration file for babel.
We can do this directly from the command line
by typing touch,
which this is the command
you use to create new files,
and the file that we need to create
is a babelrc file.
So it's a dot file.
So you'll do .babelrc,
okay.
So if I open the pane here
where we have all of our files for this project,
you'll see that babelrc has been created.
So we can double click on that,
and in our babelrc file,
we need to indicate the presets
that we've installed.
So this file consists of simply an object,
so we'll start with our curly braces,
and then we have the key presets,
and this presets takes an array.
Within our array we are going
to simply add that babel.
Be sure you put the @ sign,
@babel/preset -env.
You remember, we just installed that package.
So when I saved mine,
formats it very nicely for me,
and that's it.
We can go ahead and close this babelrc file.
All right,
so moving back to our package.json file,
I'm going to close the pane here,
just so we can have a little bit more room
and let's take a look at our dependencies
and dev dependencies,
just to kind of point out
various elements of this file.
So we have our express and nodemon
as our dependencies,
and then we have our four babel packages
for our dev dependencies.
Now we're going to add some scripts
to our project,
and then we will get started
incorporating nodemon and ES6 syntax
into this project.
So the first thing we need to do
is add a type to our package.json file.
So we're going to put this right underneath name
and so type: and then
the type that we need to add is module.
So what does this mean?
We want to be able to use modules
that were introduced in the ES6 in our project.
So for example,
modules will be defined in our index.js file
with the use of import and export,
instead of the required function
that was used in previous versions of JavaScript.
Keep in mind that when looking at documentation,
you may still see various elements
of Express referenced with previous versions,
and we'll see that
when we are in later videos,
that the documentation
may reference the older version of JavaScript,
but we want to keep our project nice and modern.
So make sure you save that.
So we have our type module added,
and then we're going to add
a start script to our project.
So we can go ahead
and take this test script out.
We don't need that,
and we're going to add,
start: and I'll add some quotation marks there,
and I'm going to go ahead
and outline everything that we need
to add for our start script,
and then I'm going to break it down
after we have it added.
So the first thing that we'll add is nodemon,
and then the next is
- -experimental
- json-modules,
and then --exec,
then babel -node
index.js,
and make sure you save,
so Command + S.
So you may be wondering,
what does all this mean?
The first part nodemon,
it references that nodemon package
that we will use,
so we don't have to constantly
restart our server.
Next, we have to add
the flag experimental JSON modules
in order to be able to load JSON files.
Everything else to the right of that
is telling our server
to run the project using babel
and start the application
from the index.js file.
So now we should be all set
with our package.json file
once again, make sure it's saved,
and now we need to create our index.js file.
So this is going to be
the entry point for our project.
So you can create this file
from the command line
or one thing that I want to point out,
a nice feature of VS Code
is that in this explorer pane,
you can add a new file,
add a new folder here really easily.
So I'm going to go ahead
and click this new file
and create the index.js.
One thing I want to point out
before we start adding logic
to our index.js file,
is that this entry point file
can be named whatever you'd like it to be named.
So sometimes you'll see
it referenced as app.js,
and that's totally fine,
you can name this whatever you would like.
The important thing is
that in your package.json file,
that it is referencing it accordingly.
So if you did decide
that you wanted to call
the entry point file app.js,
you would just need to make sure
this main was updated with app.js,
and then also your npm start command
would need to be apt.js.
So simply just wanted to point that out.
You don't have to name
your entry file index.js,
it is industry standard
to see it as such though.
So just wanted to point that out.
All right, so now back to our index.js file,
and the first thing that we need to do
is import express
from express.
So make sure express reference the second time
is in quotation marks.
Then below that we will create
a variable app
and we're going to set that equal to express.
Next, we're going to create another variable,
and this is PORT.
So it's not necessary to create
a variable for the port number,
but I like to do it simply
because we may use this in multiple places,
and if you change the value,
you only have to update it in one spot.
So here, we're going to set our port number equal to 3000,
and this is pretty common,
and you could have 3001,
it's really up to you,
but 3000 is a common one.
Next, we want to make sure
that our app is listening on the port
that we've specified,
which is 3000.
So we're going to take our app variable
and we're going to use the method listen,
and the listen method takes two arguments.
The first argument is the port number,
so we've set that equal to 3000,
so we can just pass that variable right in,
and then the second argument is a function.
So let's go ahead
and set up our arrow function here,
we don't need anything else,
but this at this point.
So we are just
simply going to
log out a message here.
You could add additional logic
into this function,
but for the purposes of just getting
this project up and running,
we just want to log out a message right now
to ensure that our server is running.
So we're going to console.log,
and I'm going to use a template literal here,
and I'm just simply going to add the message,
the server is running
on port,
and then I will pass in port here.
Okay, so console.log,
the server is running on port
and we should see 3000.
So make sure you save,
and now let's watch the magic happen.
So we're going to go back
to our terminal here
and we're going to type in npm start
and you can see that we see the message,
the server is running on port 3000.
So you should see that printed
in your terminal and great work.
One more thing before we move on,
I want you to see how nodemon
is working for us
and how convenient it is.
So if we weren't using nodemon,
every time we made a change to any of our files,
we would have to stop
and restart the server.
With nodemon, when a change is detected,
it automatically restarts.
So for example,
I'm just going to modify our console.log here
by adding an exclamation point and saving,
and you'll see now in the terminal
that it updated automatically.
It added that exclamation point
after the port number.
So I just wanted to show you that
and great job
on getting your first server set up
using Express.