Step 7: The Dashboard!

Let's make an HTML page for the dashboard. Create dashboard.html with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard</title>
</head>
<body>
  <h1>Welcome USERNAME!</h1>
</body>
</html>

Update the route handler to serve this file:

app.get("/dashboard", (req, res) => {
  console.log(`Welcome ${req.query.uname}`);
  res.sendFile(path.resolve(__dirname, "dashboard.html"));
});

Rerun your Express app. Visit http://localhost:5000/. Enter a username and press login. You will be redirected to the "dashboard" endpoint!

The only issue now is to find a way to dynamically update the USERNAME (in dashboard.html) based on the request query parameter which we receive (req.query.uname).

CS280 Notes

Step 7: The Dashboard!