We are going to define a single resource in this app called a Review.

A resource is an abstract object that we use to organize data, code, and the features of our app. For example, a User resource we can keep track of logging in and out, email and passwords, and people's birthdays. In a blog, we might have an Article resource where we would track the titles and bodies of articles and keep track of the code for publishing and sharing them.

Resources can also be related to each other. For example, articles may have comments; a building resource might have floors, and the floors may have units; a user might have friends (like in Facebook).

All resources have a few actions in common that are called RESTful routes. If there was anything worth memorizing in this tutorial, this is it:

URL HTTP Verb Action
/photos GET index
/photos/new GET new
/photos POST create
/photos/:id GET show
/photos/:id/edit GET edit
/photos/:id PATCH/PUT update
/photos/:id DELETE destroy

The table above shows the resources, routes, and actions that might be used on a photo sharing site like Instagram.

We're going to start with the index action and then show, and then we'll look at the create, edit, update, and delete.

Adding a /reviews Route

Let's make a route to /reviews for the index action where we can see all the reviews that we've created. Eventually this will be on our root route, but we can start making it its own separate path.

// app.js

let reviews = [
  { title: "Great Review" },
  { title: "Next Review" }

app.get('/reviews', (req, res) => {
  res.render('reviews-index', { reviews: reviews });

Notice how we are making a mock array of reviews, and sending that in as an object into the template { reviews: reviews }. So the variable reviews will be available in our template.

Errors are Your Friends!

If you refresh localhost:3000/reviews right now what do you see? Probably an error. That's ok! Errors are our friends. What does the error say?

Errors often tell you the next step you need to take. In this case the error is telling you that the template does not exist. Let's make it!

Now let's add the template views/reviews-index.handlebars. We're going to use the Handlebars.js {{#each}} iterator to loop over our array of reviews and display each one's title.

<!-- reviews-index -->
{{#each reviews}}

If you refresh localhost:3000/reviews now what do you see?

Setting the Root Route - /

Let's update the /reviews route to be our root route. Just change the path from /reviews to / and delete or comment out the hello world root route we made before.

// app.js

app.get('/', (req, res) => {
  res.render('reviews-index', { reviews: reviews });

Now navigate to localhost:3000.

A Challenge

Can you make changes to your reviews array in app.js and see it reflected in your reviews-index template?


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more