Build a Basic Express.js Server

Scenario

You have been hired as a freelance developer for a new local coffee shop, “The Daily Grind.” They need a simple website to establish their online presence, but first, they need a backend server to serve the web pages. Your task is to build a basic web server using Node.js and Express that can serve their homepage and a contact page.

Learning Objectives

By the end of this activity, you will have demonstrated your ability to:

• Set up a Node.js project and manage dependencies.
• Create a basic Express.js server.
• Implement routing to handle specific URL requests.
• Serve static HTML files in response to requests.

Instructions

Task 1: Project Setup

1. Create a new directory for your project (e.g., daily-grind-server).
2. Navigate into the new directory in your terminal.
3. Initialize a new Node.js project by running npm init -y. This will create your package.json file.
4. Install express as a project dependency by running npm install express.

Task 2: Create the Web Pages

1. Inside your project directory, create a new folder named public.
2. Inside the public folder, create two HTML files:
   • index.html: This will be the homepage. Add a simple heading like <h1>Welcome to The Daily Grind!</h1>.
   • contact.html: This will be the contact page. Add a heading like <h1>Contact Us</h1> and some placeholder text.

Task 3: Build the Express Server

1. In the root of your project directory, create a file named server.js.
2. Inside server.js, write the code for your Express server. It must do the following:
   • Import the express library.
   • Import the built-in path module, which will help you create correct file paths.
   • Create an instance of an Express application.
   • Define a port to run the server on (e.g., 3000).
   • Create a route handler for GET requests to the root URL (/). When this route is requested, it should send the index.html file from your public directory.
   • Create another route handler for GET requests to /contact. This should send the contact.html file.
   • Start the server and have it listen on your chosen port. When it starts, it should log a message to the console, like Server is running on port 3000.

Hint: To send a file, you’ll need to provide an absolute path. Use path.join(__dirname, 'public/index.html') to create a reliable path to your HTML files.

Submission Instructions

1. Ensure all your files (package.json, server.js, public/index.html, public/contact.html) are in the correct locations.
2. Verify that your server runs without errors by executing node server.js in your terminal.
3. Test your routes by visiting http://localhost:3000/ and http://localhost:3000/contact in your browser.
4. Once complete, submit a link to a GitHub repository containing your project files.

Grading Rubric

Reflection Questions

After completing this activity, consider the following:

1. What is the difference between res.send() and res.sendFile()? When would you use one over the other?
2. Why is the path module necessary when serving files? What could go wrong if you just used a relative path like 'public/index.html'?
3. How would you add a third page (e.g., a menu page) to this server? What steps would you take?

Additional Resources

• Node.js path Module Documentation
• Express.js Basic Routing