Gallery
Share
Explore

Lab Learning Work Guide: Implementing a Simple Web Server with Routes using Node.js and Express


Introduction

Start by installing node.js and Visual Studio Code:
⁠
⁠
⁠

⁠
https://code.visualstudio.com/download
⁠
⁠

Writing an EA with Visual Studio Code:


Make a Folder/Directory to work in.
Make a file to type your Code into.

Building a web server is a fundamental exercise in web development.
This Lab will help you to understand the foundations of:
serving data and business processes, over the web,
handle different types of requests,
route those requests to the appropriate logic.
In this Lab, we will be using Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine, in combination with the
npmjs.com
⁠
Express framework to build our server.
megaphone

One of the hand in requirements for your Project is to upload your Node.js application to
NPMJS.com
⁠
⁠

Next week you will create an account on
npmjs.com
⁠
to do this. (You can create your account before next week’s class).


"Understanding the basics of how web servers and routing work is paramount in becoming a successful web developer." - Professor Brown Bear.

Prerequisites

Familiarity with JavaScript
Node.js and npm installed on your machine. If not, download and install them from
here
⁠
.

Getting Started

Setting up Your Project

Create a new directory for your project:
bashCopy code
mkdir simple-web-server cd simple-web-server
Initialize a new Node.js project:
bashCopy code
npm init -y
Install Express, a minimal and flexible Node.js web application framework:
bashCopy code
npm install express

Building the Web Server

Setting Up The Basic Server

Create a new file named server.js in your project directory.
Open server.js in your preferred code editor.
Import the necessary modules:
javascriptCopy code
const express = require('express');
Initialize the Express application:
javascriptCopy code
const app = express();
Set up a basic route to ensure the server is running correctly:
javascriptCopy code
app.get('/', (req, res) => { res.send('Hello, World!'); });
Have the server listen on a specific port:
javascriptCopy code
const PORT = 3000; app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); });

Implementing Routes

Define a route for about page:
javascriptCopy code
app.get('/about', (req, res) => { res.send('About Page'); });
Define a route for a contact page:
javascriptCopy code
app.get('/contact', (req, res) => { res.send('Contact Page'); });
"With Express, setting up routes becomes as intuitive as describing them."

Test Your Server

Start your server:
bashCopy code
node server.js
Open a browser and navigate to:
⁠
http://localhost:3000/
⁠
⁠
⁠
http://localhost:3000/about
⁠
⁠
⁠
http://localhost:3000/contact
⁠
⁠
You should see the respective page contents you set up in the routes.

Conclusion

Congratulations! You've set up a basic web server with multiple routes using Node.js and Express. This is a foundation for many web applications. As you explore further, you can integrate databases, add middleware, serve static files, and much more with Express.
"A journey of a thousand sites begins with a single server." - Web Proverb
Happy Coding!
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.