Local Development Server

Relevant source files

The following files were used as context for generating this wiki page:

• server.js
• package.json
• 404.html
• js/submit-form.js
• contact.html
• stackbit.config.ts
• properties.html

The local development server is a lightweight, dependency-free web server built with Node.js. Its primary purpose is to serve the static files of the Vandore Heritage website (HTML, CSS, JavaScript, images) on a local machine. This allows developers to preview changes and test client-side functionality in a browser environment that mimics a live web server.

The server is implemented using Node.js's built-in http and fs modules, ensuring a minimal setup without external npm dependencies. It handles file requests, resolves MIME types, and provides custom error pages, making it a simple yet effective tool for the project's development workflow.

Setup and Execution

The server is managed through npm scripts defined in package.json. It requires no installation of third-party packages.

Sources: package.json, server.js

Starting the Server

To start the local development server, run either of the following commands from the project's root directory:

npm run dev

or

npm start

Both commands execute the node server.js script.

Sources: package.json:5-8

Server Configuration

The server has a single hardcoded configuration option.

Parameter	Value	Description	Source File
port	8000	The TCP port the server listens on.	server.js:4

Upon successful startup, a confirmation message is logged to the console:
Server running at http://localhost:8000/

Sources: server.js:71-73

Server Architecture and Request Handling

The server's logic is contained entirely within server.js. It creates an HTTP server that listens for incoming requests and serves local files based on the request URL.

Sources: server.js

Request Handling Flow

The following diagram illustrates the step-by-step process the server follows to handle an incoming HTTP request.

This diagram shows the complete request lifecycle, from receiving the request to serving content or an appropriate error page.
Sources: server.js:23-69

File Path and MIME Type Resolution

The server first translates the request URL into a local file path. A special case exists for the root path /, which is mapped to index.html.

Sources: server.js:24-29

// server.js:24-29
  let filePath = '.' + req.url;
  
  // Default to index.html for root path
  if (filePath === './') {
    filePath = './index.html';
  }

Next, it determines the correct Content-Type header by looking up the file's extension in a predefined map. If the extension is not found, it defaults to application/octet-stream.

Sources: server.js:7-20, server.js:32-33

Extension	MIME Type
.html	text/html
.css	text/css
.js	text/javascript
.json	application/json
.png	image/png
.jpg	image/jpeg
.jpeg	image/jpeg
.gif	image/gif
.svg	image/svg+xml
.ico	image/x-icon
.woff	font/woff
.woff2	font/woff2
.ttf	font/ttf
.eot	application/vnd.ms-fontobject

Content Delivery and Error Handling

The server uses fs.readFile to access the file content. The response depends on the outcome of this operation.

Successful Request

If the file is found and read, the server responds with a 200 OK status code, the determined MIME type, and the file's content.

404 Not Found

If fs.readFile returns an ENOENT (File Not Found) error, the server attempts to serve the custom 404.html page with a 404 Not Found status. If 404.html is also missing, a generic <h1>404 - Page Not Found</h1> message is sent.

Sources: server.js:40-50, 404.html

500 Server Error

For any other file system errors (e.g., permission issues), the server responds with a 500 Internal Server Error status and the error code.

Sources: server.js:51-53

The sequence diagram below shows the interactions for both a successful request and a 404 error.

Client-Side Interactions

While the server itself does not process form data or handle dynamic API logic, it is crucial for serving the JavaScript files that implement this functionality on the client side. A key example is the form submission logic found in js/submit-form.js and used in pages like contact.html.

The server delivers contact.html and js/submit-form.js to the browser. The JavaScript then intercepts the form's submit event, performs validation, and simulates an asynchronous submission using setTimeout. This demonstrates the clear separation of concerns where the Node.js server is purely a static file provider.

The following diagram shows this flow:

Conclusion

The Local Development Server is a foundational component of the development environment for the Vandore Heritage website. By leveraging built-in Node.js modules, it provides a simple, zero-dependency solution for serving static assets. Its architecture is straightforward, focusing on core tasks: routing requests to files, setting correct MIME types, and handling errors gracefully with a custom 404 page. This setup enables developers to efficiently build and test the website's front-end, including complex client-side JavaScript interactions, before deployment.

Sources: server.js, package.json