Preview
Video Player
00:00
00:00
Setting Up the Project
4:53We'll demonstrate how to use npm to install the modules for the basic Bookworm site — an Express-based web application. We'll show you how to start the application and preview it in a browser, and walk you through the basic code for the web application.
Now that you've seen what we'll
be creating in this course,
0:00
let's dive into the source
code of the starter project.
0:03
In order to run this application,
you'll need to have Node.js, npm,
0:06
Mongo DB installed on your computer.
0:10
You can find links in the teacher's notes
to instructions on how to install these.
0:13
You can also download the starter
code if you want to follow along.
0:17
Let's get started.
0:20
If you're following along, make sure you
have the latest version of Node NPM and
0:22
Mongo installed.
0:26
See the teacher's notes for
more information.
0:27
You need to install the node modules
that this project is dependent on.
0:30
Those dependencies are already
specified in the package.json file.
0:34
Let's see what we're starting with,
I'll open this project in my text editor.
0:38
I'm using Atom here, but
use whatever text editor you prefer.
0:43
First, let's take a look
at the package.JSON file,
0:47
it has a single JSON object with
information about the project.
0:51
You can see the name, version,
description, author and other information.
0:55
You can see that it already has
some dependencies listed here.
0:59
These are common node modules you'll
end up using a lot of web applications.
1:03
Express, for example, is the module we
use to make the whole application run.
1:07
The other ones support
Express in different ways.
1:12
For example, body parser parses incoming
requests making their contents readable by
1:15
our code.
1:19
And Pug,
1:21
also known as Jade, is the template engine
will used to produce HTML in our app.
1:21
Let's install those modules now.
1:27
Open up a terminal or console program and
1:29
navigate to the folder
containing the project files.
1:32
Type npm install.
1:36
This may take a few moments,
while the modules download.
1:40
But once that's done,
you can take the starter site for
1:43
a spin by typing npm start.
1:47
And visiting using your web
browser localhost on port 3000.
1:51
The app currently has three
routes already programmed.
1:56
A GET route to the route, which renders
the home page using a template file.
1:59
A GET route to /about,
which renders the About Us page and
2:08
a GET route to /contact which
renders the contact page.
2:10
These pages are all served up by Express,
but the other nav buttons to
2:13
the registration form, the login form,
and my profile don't lead anywhere yet.
2:17
We'll add those three routes during
this course since they're all part
2:23
of the authentication
system we're building.
2:26
Let's take a quick look at the current
state of the code in this application.
2:28
In my text editor,
I'll open the app.js file.
2:32
This is the main application,
this is our website.
2:36
You can see we need to require a couple
of modules to get off the ground.
2:39
Express to make the app work, and
2:43
bodyparser to read the body of requests
sent to the server by a browser.
2:45
This line of code tells Express to
serve static assets like pictures and
2:51
style sheets from the /public folder.
2:54
In node, __dirname
2:57
refers to the file path from the server's
root to our applications root folder.
3:00
Here we're telling Express that we
want to use the Pug templating engine.
3:06
Pug is the renamed version of Jade,
the most popular templating engine for
3:10
Express.
3:14
Unfortunately, the creator of Jade had to
change the name to Pug, because somebody
3:15
else was already using the Jade name for
another software product.
3:19
In this course, I'll be using the name
Pug, but if you've used Jade in the past,
3:23
I'm talking about the same thing.
3:26
Pug streamlines writing HTML and provides
some extra goodies like conditional logic
3:28
that make HTML templates fast
to create and versatile to use.
3:34
We'll be using Pug in
the next part of this course.
3:38
But if you're interested
in learning more about it,
3:40
I've linked to some other
information in the teacher's notes.
3:43
This line of code tells Express
where to find our Pug templates,
3:46
they are stored in the Views directory.
3:50
We set up our routes here.
3:56
I'll talk about the routes
in just a minute.
3:57
And finally,
there's some boilerplate code.
4:00
This to handle file not found errors,
this to handle server errors, and lastly,
4:02
we spin up the entire server on port 3000.
4:07
Now let's take a look at the code for
the routes.
4:10
They're defined in
the /routes index.js file.
4:14
Currently, there are three get routes,
for the home, for the About Us page,
4:18
and for the Contact Us page.
4:24
We'll be adding more as
we work on this project.
4:28
Finally, if you want to shut down the app,
you just hit Ctrl+C in your terminal or
4:31
console program.
4:36
All right, time to start programming.
4:39
In the next part of this course,
4:41
I'll teach you how to add a user
registration system to our app.
4:42
This includes building a registration
form, processing form input, and
4:46
storing the user data in a Mongo database.
4:50