Step 5: Web Application

We have deployed simple web apps to GitHub Pages. When a client visits the URL of our deployed app, they send an HTTP Get request to the GitHub server. The GitHub server in response sends the index.html file (and the script.js, style.css and any other files linked to index.html) to the client. The client's browser then renders the index.html and the client will see the app.

We can build our own server to serve clients with files and data pertaining to a web application.

Add the following index.html file to the express-app folder.

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

Update the index.js file so when a client visits http://localhost:5000, they would receive the index.html file.

app.get("/", (req, res) => {
  res.sendFile(path.resolve(__dirname, "index.html"));
});

Note: to use the Path module you must import it

const path = require("path");

Run the Express app and then visit http://localhost:5000.

CS280 Notes

Step 5: Web Application