We'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
You need to sign up for Treehouse in order to download course files.Sign up