Explore

Building a Full-Stack Web Application: A Hands-On Lab Guide to Creating an Express.js Server with Static File Serving, Form Handling, and Middleware Integration using Node.js, NPM, and Visual Studio Code

Here's a fully synthesized and integrated lab learning workbook for creating a web server with middleware, static file serving, and form handling using Node.js, Express, and NPM packages:

---

# Lab Workbook: Building a Web Server with Express.js

## Objective Create a web server that serves static files, handles form submissions, and demonstrates the use of middleware.

## Tools Required - Node.js (latest LTS version) - Visual Studio Code - npm (comes with Node.js)

## Project Structure ``` project-root/ │ ├── public/ │ ├── images/ │ │ └── logo.png │ ├── styles/ │ │ └── main.css │ └── index.html │ ├── server.js └── package.json ```

## Step 1: Project Setup

1. Open Visual Studio Code 2. Create a new folder called "express-server-lab" 3. Open a terminal in VS Code (Terminal -> New Terminal) 4. Navigate to your project folder 5. Initialize a new Node.js project: ``` npm init -y ``` 6. Install required packages: ``` npm install express body-parser ```

## Step 2: Create the Server

Create a new file called `server.js` in your project root and add the following code:

```javascript const express = require('express'); const bodyParser = require('body-parser'); const path = require('path');

const app = express(); const port = 3000;

// Middleware app.use(bodyParser.urlencoded({ extended: false })); app.use(express.static(path.join(__dirname, 'public')));

// Routes app.get('/', (req, res) => { res.sendFile(path.join(__dirname, 'public', 'index.html')); });

app.post('/submit-form', (req, res) => { console.log(req.body); res.send(`Form submitted! Name: ${req.body.name}, Email: ${req.body.email}`); });

// Start the server app.listen(port, () => { console.log(`Server running at http://localhost:${port}`); }); ```

## Step 3: Create the HTML Form

Create a new file called `index.html` in the `public` folder:

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Express Server Lab</title> <link rel="stylesheet" href="/styles/main.css"> </head> <body> <div class="container"> <img src="/images/logo.png" alt="Logo" class="logo"> <h1>Welcome to Express Server Lab</h1> <form action="/submit-form" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <button type="submit">Submit</button> </form> </div> </body> </html> ```

## Step 4: Add CSS Styles

Create a new file called `main.css` in the `public/styles` folder:

```css body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; }

.container { width: 80%; margin: auto; overflow: hidden; padding: 20px; }

.logo { display: block; margin: 0 auto; max-width: 200px; }

h1 { text-align: center; color: #333; }

form { background: #fff; padding: 20px; border-radius: 5px; }

label { display: block; margin-bottom: 5px; }

input[type="text"], input[type="email"] { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 3px; }

button { display: block; width: 100%; padding: 10px; background: #333; color: #fff; border: none; border-radius: 3px; cursor: pointer; }

button:hover { background: #555; } ```

## Step 5: Add an Image

1. Find or create a simple logo image 2. Save it as `logo.png` in the `public/images` folder

## Step 6: Run the Server

1. In the terminal, make sure you're in the project root directory 2. Run the server: ``` node server.js ``` 3. Open a web browser and go to `http://localhost:3000`

## What You Should See

- A webpage with a logo, a title, and a form - The form should have fields for name and email - When you submit the form, you should see a confirmation message

## How It Works

1. The `express.static` middleware serves static files from the `public` folder 2. The `bodyParser` middleware parses form data 3. The GET route `/` serves the `index.html` file 4. The POST route `/submit-form` handles form submissions

## Challenges

1. Add more fields to the form (e.g., age, favorite color) 2. Create a new route that serves a different HTML page 3. Add client-side form validation using JavaScript 4. Use a templating engine like EJS to make the HTML dynamic

## Conclusion

You've created a basic web server with Express.js that serves static files, handles form submissions, and uses middleware. This is a foundation you can build upon for more complex web applications.

⁠

This lab workbook provides a complete, integrated experience for students to create a functional web server using Express.js. It covers setting up the project, creating the server, handling static files, processing form submissions, and basic styling. The final working code for all components is included, along with clear instructions for putting it all together using Visual Studio Code.

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.