To Tutorials and Projects

IT 231 -- Tutorial 4

Goal: Create a test website and an Express server to display the website pages on localhost. This tutorial will use the response method render, not sendFile.

Details

Your site will display pages for these sample routes:

/  /contact_us  /specials  /eiffel_tower
It will also display a route not found page if a route is entered other than these four. The HTML pages that correspond to these sample routes are index.html, contact-us.html, specials.html, and route-not-found.html. For this tutorial these HTML files must be placed in the views folder, which is a subfolder of the project folder. In addition, each of the .html file extension for each of the HTML files must be replaced by the file extension .ejs, which means embedded JavaScript. You can use the HTML files from Tutorial4a, but change the file extension of each to .ejs. We will see how to actually insert JavaScript statements into an Embedded JavaScript file file when we complete Tutorial 5 and Project 3.

Follow these steps to complete the tutorial:
  1. Create a Node project named tutorial4b-<your last name>.
  2. Install Express in your project:
    > npm i express
  3. Install EJS in your project:
    > npm i ejs
  4. Write a main.js script by completing the following items:
    1. Require the express module; assign it to the constant named express.
    2. Define an app object, which is an express router object:
      const app = express( );
    3. Add the nodemon module to your project.
    4. Set up the public folder to contain the static files for your project:
      app.use(express.static("public"));
    5. Set EJS as the template engine for your project:
      app.set("view engine", "ejs");
    6. Set up a GET route for the homepage that displays the HTML file index.ejs:
      app.get("/", (req, res) => {
    res.render("index");
});
      res.render assumes that the file to render is in the views folder, and that its file extension is .ejs.
    7. Also set up routes for /contact_us, /specials, and /eiffel_tower. 
    8. If any other route is entered, display route-not-found.ejs:
      app.get("*", (req, res) => {
    res.render("route-not-found"));
});
    9. Set the server to listen on port 3000:
      const PORT = 3000;
app.listen(PORT, ( ) => {
    console.log("Server started; " +
        `listening on port ${PORT}.`);
});
      Notice that, in addition to the port argument, the Express app object also accepts a callback function that is called when the app starts listening.
    10. Set up an external stylesheet that used for all HTML pages. Put the external stylesheet in the public/css folder.
    11. Set up an address bar that contains links to all the other pages in the site.
    12. Create an Eiffel Tower page that displays the image of the Eiffel Tower: eiffel-tower.png.  Put this image in the public/images folder.

Additional Comments