Course Banner

Express Routes

Video Overview

The video provides a general overview of the activity, but does not contain the detail needed to complete each process. Watch the video to obtain a general idea, but follow the written steps to complete the activity. This is the Transcript of the video.

The index view shown in this video reflects that view when the assignment at the end of this unit is complete. Yours will NOT look like this during this activity.

Introduction

As mentioned earlier, a route indicates to the server which resource is to be processed and a resulting view (or if building an API, a resulting content object) is returned to the requesting browser or frontend application. The server software we are using is called "Express" (https://expressjs.com/). It is very popular in Node application development, but it is not the only option.

When you downloaded the starter code, it included a routes folder. This is where specialized routes will be stored and then tied back to the server.js page. Let's take a look at such a file now.

static.js Routes

In an earlier activity the concept of static files was introduced. Let's see how Express knows to use them.

  1. Open the static.js file found in the routes folder.
  2. The code should look like the image:
    Static routes code

An Explanation

  1. Line 1 - The express package is brought into the scope of the file and assigned to a local variable.
  2. Line 2 - The Express "router" functionality is invoked and stored into a local variable for use. Notice the (), indicating that Router is a function.
  3. Lines 4 & 5 - Comments
  4. Line 6 - Indicates that the Express router is to "use" the "express.static" function, meaning this is where static resources will be found, with the public folder.
  5. Line 7 - Indicates that any route that contains /css is to refer to the public/css folder, which is found at the root level of the project.
  6. Line 8 - Indicates that any route that contains /js is to refer to the public/js folder, which is found at the root level of the project.
  7. Line 9 - Indicates that any route that contains /images is to refer to the public/images folder, which is found at the root level of the project.
  8. Lines 7, 8 and 9 allow you to write paths pointing to these resources easily and also to add the subfolders for images, CSS and JavaScript and have them still operate correctly.
  9. Line 11 - Exports the router object, along with all of these use statements for use in other areas of the application. This is VERY IMPORTANT. If a resource is NOT exported, it cannot be used somewhere else.

server.js File

Because the static routes have been exported, they can be imported and used elsewhere. Let's see how this is done.

  1. Open the server.js file at the root of the repository.
  2. Note that in the "Require Statements" section of the document, Express, as a function, is assigned to the "app" variable. This is common practice in a Node application.
  3. In this same section, note that a route file, named "static", which you reviewed earlier, is imported and stored into a "static" variable.
  4. Find the "Routes" comment and locate the use statement below it.
  5. Notice that instead of router.use, it is now app.use, meaning that the application itself will use this resource.
  6. The resource which has been exported in the static file is now to be used by the app. This single line of code now allows the app to know where the public folder is located and that it and all of its subfolders will be used for static files.
  7. By doing things in this manner it allows for all the functionality, while allowing the server.js file to remain uncluttered.

The "index" Route

From previous classes you should understand that a typical default file name in web development is index, regardless of file extension. The same is true in a Node, Express and EJS application. In this section you are going to build the route that will deliver index, and then build the index content and test it.

  1. Create an empty line beneath the existing static route in server.js.
  2. Add the comment and two lines of code shown in the image:
    server.js code for the index route
  3. The first line is a comment, feel free to alter it as needed.
  4. The second line does a number of things:
    1. app.get - The express application will watch the "get" object, within the HTTP Request, for a particular route.
    2. "/" - This is route being watched. It indicates the base route of the application or the route which has no specific resource requested.
    3. function(req, res){ - A JavaScript function that takes the request and response objects as parameters.
    4. res.render() - The "res" is the response object, while "render()" is an Express function that will retrieve the specified view - "index" - to be sent back to the browser.
    5. {title: "Home" } - The curly braces are an object (treated like a variable), which holds a name - value pair. This object supplies the value that the "head" partial file expects to receive. The object is passed to the view.
    6. }) - The right curly brace closes the function, while the right parentheses closes the "get" route.
    7. Save the file.

Build the index.ejs View

For now, the index view is going to be dead simple. You'll get a chance to expand it later.

  1. Click the views folder to highlight it.
  2. Click the "new file" icon, name the new file index.ejs.
  3. In the new file only add a <h1> element with your own name inside.
  4. Save the file.
  5. Notice that there is no other HTML in the file, just the h1 element. Why? Because all the other HTML already exists in the layout and partial files. EJS and Express will dynamically build the entire view using all the pieces when the server reads the "/" route. The index view is the "body" that will be supplied to the layout.

Time to Test

It's time to make sure everything works. It is always a good idea to test whenever it is easy to see if the process can accomplish a task. In this case, all the fundamentals are in place to request a view and see if the server can fulfill that request.

  1. Make sure all the files are saved (look for any black dots in the VSC tabs of open files).
  2. Open a new terminal window, if one is not already open.
  3. Type pnpm run dev, press "Enter"
  4. Watch for the message telling you that the server is running on localhost:5500.
  5. In a browser, open a new tab and type, localhost:5500/, press "Enter".
  6. You should now be looking at a web page that contains a header, navigation bar, a h1 with your name, and a footer. Also, note the value "Home" in the tab. That is the value passed into the view in the object parameter. You can change its value in the server.js file and save the file. Then reload the page in the browser.
  7. If everything worked, high five anyone close by. If it didn't go back and check your code, talk to your learning team or get help from the TA or professor.
  8. When done testing, type Control + C, in the terminal, to stop the server.

Conclusion

The process of using routes and views is fundamental to modern web development. In later lessons, we'll add models and controllers. As you practice and repeat this process you'll become comfortable with it. Practice makes perfect!