Skip to main content

Lab 5: Node.js

due in-class Friday, Feb 26th at 10:50AM, accepting submissions until Sunday, March 7th at 11:59 PM


Before starting this lab, ensure that you have:

For this lab, we have attached our completed version of lab4 in the repo but feel free to reuse your version of the MadLibs game from lab4.

If you want to use your own code, you should put your HTML files in the views directory and put your static files like images, Javascript scripts and Stylesheets in the public directory.

Run npm install in your cloned repo to install necessary dependencies and use npm run start to start you server. Visit the localhost port shown from this command. We enabled hot reloading using nodemon which automatically restarts the node application when file changes in the directory are detected.

You can think of nodemon as a replacement wrapper for node. To use nodemon, replace the word node on the command line when executing your script.


For this lab, you will be working in groups to recreate a MadLibs website using the Express Framework to create your own mini web server. The website should contain 3 pages: a MadLibs page, a results page, and a 404 error page.

In the previous assignments, you mainly worked with Single Page Applications : in assignment 2, you created a dynamic webpage displaying the tweets while in lab 4 you used multiple Vue components and has in-page routes using Vue Router. In other words, the entire application resided in a single endpoint, often the root route. Moreover, every web application we built was a static site where all code was client-side and there was no dedicated server.

However, single route and static web apps are often not sufficient when we need to build a full-fledged server with many API endpoints and database connections. That's why we turn to Node.js for building the server-side of a web application!


  • Build the web server using Express.
  • Routes:
    • /madlibs This should render the madlibs.html page. This page should be your game page where the user fills in all the inputs of the randomly picked MadLib (the completed Madlib paragraph should not be displayed in this page). There should also be an explicit way (a button for example) that sends the user to the /results page.

    • /results This should render the results page, which should have the completed MadLib paragraph (aka with the user input from /madlibs included).
    • A catchall route that handles 404 requests.


Handin Instructions

Hand in your code for this lab via Gradescope. Please upload your code to GitHub and submit through Gradescope. Only one team member should upload their local version of the code and then assign group members after submission.

Lab Handins on Course Website

Keep in mind that each submission for this lab will be anonymously displayed on the course website, so please keep this in mind and do not put any identifying information in your handin.