Proxy http-server in Webpack dev mode

[Borewit]

This extends the Webpack development mode to be able to access the HTTP server backend.

Follow up of:

• Add webpack dev profile #90

This requires to start both:

1. the http-server npm start, accessible via http://localhost:8080/
2. the development server npm dev, accessible via http://localhost:9000/

graph TD
    %% Nodes
    User[/"User Browser<br>localhost:9000"/]
    WebpackDevServer["Webpack Dev Server<br>localhost:9000"]
    HttpServer["http-server<br>localhost:8080"]
    MusicFile[["song.mp3<br>in ./music folder"]]

    %% Relationships
    User -->|Requests /| WebpackDevServer
    User -->|Requests /music/song.mp3| WebpackDevServer
    WebpackDevServer -->|Proxies /music/*| HttpServer
    HttpServer -->|Reads| MusicFile

    %% Styling
    style User fill:#e3f2fd,stroke:#2196f3,stroke-width:2px
    style MusicFile fill:#fff3e0,stroke:#ff9800,stroke-width:2px

Loading

Future Considerations

While http-server is excellent for quickly serving static files to a browser, it is not intended to function as a backend API for web applications. It responds with HTML directory listings and lacks support for structured responses like JSON, which are essential when building RESTful services or programmatic file access. If your application needs to interact with the server via JavaScript (e.g., fetch or AJAX) and expects machine-readable data (e.g., JSON), a more suitable approach is to use a lightweight Node.js server (e.g., with Express or Fastify) that can explicitly serve both static files and JSON-based endpoints.

Note

Follow up:

• Replace http-server with fastify #101