Making a proxy frontend from scratch

Welcome to my guide on creating a proxy frontend from scratch! This is a multi-part guide that I will write over the span of multiple days. First I need to state what this guide will not cover

Setting up and using Masqr/Corlink. This guide is made to be bare bones.
Things like NGINX or any other reverse proxy
Installing Node.js, NPM or other tools needed
Git, or .gitignores
Docker

This guide will cover:

Ok, now that we have that out of the way let's get started!

This part is going to focus on getting your bare-bones Express server up with Wisp.

Prerequisites

Node.js & NPM (this should be installed alongside Node.js)

Explanation

First, we need to understand how the server works.

The server listens for all requests & upgrade requests (which are associated with websockets)
The server will either respond with a simple 'hello world!' (or an actual frontend) or a wisp packet if the upgrade request ends with /wisp/

Here is a simple flow chart:

Server flow chart

Scaffolding the project

Create your project folder. For example: Prism.
- Example using Linux:
```
mkdir prism/ && cd prism/
```
Init a basic node.js project (make sure you are in your project folder)

```
 npm init -y
```

Edit the package.json to include the correct license. It should look something like this:

{
  "name": "prism",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module", //Add this line!
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "AGPL-3.0-only" // Change this line to what you see here!
}

Install dependencies

npm i wisp-server-node express

Create an index.js file.
- Example in Linux via the terminal
```
touch index.js
```
Edit the index.js file to include this:

//Import express, http and wisp
import http from 'node:http';
import express from 'express';
import wisp from 'wisp-server-node';

//create the express "app"
const app = express();
//create an http server
const httpServer = http.createServer();
//define the port to listen on
//change this to your liking!
const port = 8080;

//basic hello world. We will change this later!
app.get('/', (req, res) => {
    //send a response of hello world!
    res.send('Hello World!');
});

//listen for requests on the http server.
httpServer.on('request', (req, res) => {
    //make express handle all of the requests
    app(req, res)
});

//listen for websocket upgrades on the http server
httpServer.on('upgrade', (req, socket, head) => {
    if (req.url.endsWith('/wisp/')) {
        //route the request to the wisp server if the url ends in /wisp/
        wisp.routeRequest(req, socket, head);
    }
    else {
        socket.end();
    }
});

//when the server is ready, console.log that it is ready
httpServer.on('listening', () => {
    console.log(`Server listening on http://localhost:${port}`);
});

//start the http server
httpServer.listen({
    port: port
});

Visit http://localhost:8080 and you should see a simple hello world! your wisp server should also work.

Ending

I hope you have gained some decent knowledge on how to setup Wisp with Express.
This entire project is open source and available at: https://github.com/motortruck1221/prism/
Part 1 files can be located: here

Back