mikecabana/server.js

## server.js
const http = require('http');
const querystring = require('querystring');

const host = 'localhost';
const port = 1235;

const contact = { firstName: 'Joe', lastName: 'Blow', email: 'joe@blow.com' };

const server = http.createServer(function (req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', '*');
    res.setHeader('Access-Control-Allow-Headers', 'hx-current-url,hx-request');
    res.setHeader('Access-Control-Max-Age', 2592000);

    if (req.method === 'OPTIONS') {
        res.writeHead(204);
        res.end();
        return;
    }

    const url = new URL(req.url, `http://${req.headers.host}`);

    switch (req.method) {
        case 'GET': {
            if (url.pathname === '/') {
                res.writeHead(200);
                res.end(`<!DOCTYPE html>
                        <html lang="en">

                        <head>
                            <meta charset="UTF-8">
                            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Document</title>

                            <script src="https://unpkg.com/htmx.org@1.9.2"
                                integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h"
                                crossorigin="anonymous"></script>
                        </head>

                        <body>

                            <div hx-target="this" hx-swap="outerHTML">
                                <div><label>First Name</label>: ${contact.firstName}</div>
                                <div><label>Last Name</label>: ${contact.lastName}</div>
                                <div><label>Email</label>: ${contact.email}</div>
                                <button hx-get="http://localhost:1235/contact/1/edit" class="btn btn-primary">
                                    Click To Edit
                                </button>
                            </div>

                        </body>

                        </html>`);
            }

            if (url.pathname === '/contact/1') {
                res.writeHead(200);
                res.end(`<div hx-target="this" hx-swap="outerHTML">
                            <div><label>First Name</label>: ${contact.firstName}</div>
                            <div><label>Last Name</label>: ${contact.lastName}</div>
                            <div><label>Email</label>: ${contact.email}</div>
                            <button hx-get="http://localhost:1235/contact/1/edit" class="btn btn-primary">
                                Click To Edit
                            </button>
                        </div>`);
            }

            if (url.pathname === '/contact/1/edit') {
                res.writeHead(200);
                res.end(`<form hx-put="http://localhost:1235/contact/1" hx-target="this" hx-swap="outerHTML">
                            <div>
                            <label>First Name</label>
                            <input type="text" name="firstName" value="${contact.firstName}">
                            </div>
                            <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" name="lastName" value="${contact.lastName}">
                            </div>
                            <div class="form-group">
                            <label>Email Address</label>
                            <input type="email" name="email" value="${contact.email}">
                            </div>
                            <button class="btn">Submit</button>
                            <button class="btn" hx-get="http://localhost:1235/contact/1">Cancel</button>
                        </form> `);
            }
            break;
        }
        case 'PUT': {
            if (url.pathname === '/contact/1') {
                let queryData = '';
                req.on('data', function (data) {
                    queryData += data;
                    if (queryData.length > 1e6) {
                        queryData = '';
                        response.writeHead(413, { 'Content-Type': 'text/plain' }).end();
                        request.connection.destroy();
                    }
                });

                req.on('end', function () {
                    const { firstName, lastName, email } = querystring.parse(queryData);

                    contact.firstName = firstName;
                    contact.lastName = lastName;
                    contact.email = email;

                    res.writeHead(200);
                    res.end(`<div hx-target="this" hx-swap="outerHTML">
                            <div><label>First Name</label>: ${contact.firstName}</div>
                            <div><label>Last Name</label>: ${contact.lastName}</div>
                            <div><label>Email</label>: ${contact.email}</div>
                            <button hx-get="http://localhost:1235/contact/1/edit" class="btn btn-primary">
                                Click To Edit
                            </button>
                        </div>`);
                });
            }
            break;
        }
        default: {
            res.writeHead(400);
            res.end('Bad request');
            break;
        }
    }
});

server.listen(port, host, () => {
    console.log(`Server is running on http://${host}:${port}`);
});
	const http = require('http');
	const querystring = require('querystring');

	const host = 'localhost';
	const port = 1235;

	const contact = { firstName: 'Joe', lastName: 'Blow', email: 'joe@blow.com' };

	const server = http.createServer(function (req, res) {
	res.setHeader('Access-Control-Allow-Origin', '*');
	res.setHeader('Access-Control-Allow-Methods', '*');
	res.setHeader('Access-Control-Allow-Headers', 'hx-current-url,hx-request');
	res.setHeader('Access-Control-Max-Age', 2592000);

	if (req.method === 'OPTIONS') {
	res.writeHead(204);
	res.end();
	return;
	}

	const url = new URL(req.url, `http://${req.headers.host}`);

	switch (req.method) {
	case 'GET': {
	if (url.pathname === '/') {
	res.writeHead(200);
	res.end(`<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<script src="https://unpkg.com/htmx.org@1.9.2"
	integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h"
	crossorigin="anonymous"></script>
	</head>

	<body>

	<div hx-target="this" hx-swap="outerHTML">
	<div><label>First Name</label>: ${contact.firstName}</div>
	<div><label>Last Name</label>: ${contact.lastName}</div>
	<div><label>Email</label>: ${contact.email}</div>
	<button hx-get="http://localhost:1235/contact/1/edit" class="btn btn-primary">
	Click To Edit
	</button>
	</div>

	</body>

	</html>`);
	}

	if (url.pathname === '/contact/1') {
	res.writeHead(200);
	res.end(`<div hx-target="this" hx-swap="outerHTML">
	<div><label>First Name</label>: ${contact.firstName}</div>
	<div><label>Last Name</label>: ${contact.lastName}</div>
	<div><label>Email</label>: ${contact.email}</div>
	<button hx-get="http://localhost:1235/contact/1/edit" class="btn btn-primary">
	Click To Edit
	</button>
	</div>`);
	}

	if (url.pathname === '/contact/1/edit') {
	res.writeHead(200);
	res.end(`<form hx-put="http://localhost:1235/contact/1" hx-target="this" hx-swap="outerHTML">
	<div>
	<label>First Name</label>
	<input type="text" name="firstName" value="${contact.firstName}">
	</div>
	<div class="form-group">
	<label>Last Name</label>
	<input type="text" name="lastName" value="${contact.lastName}">
	</div>
	<div class="form-group">
	<label>Email Address</label>
	<input type="email" name="email" value="${contact.email}">
	</div>
	<button class="btn">Submit</button>
	<button class="btn" hx-get="http://localhost:1235/contact/1">Cancel</button>
	</form> `);
	}
	break;
	}
	case 'PUT': {
	if (url.pathname === '/contact/1') {
	let queryData = '';
	req.on('data', function (data) {
	queryData += data;
	if (queryData.length > 1e6) {
	queryData = '';
	response.writeHead(413, { 'Content-Type': 'text/plain' }).end();
	request.connection.destroy();
	}
	});

	req.on('end', function () {
	const { firstName, lastName, email } = querystring.parse(queryData);

	contact.firstName = firstName;
	contact.lastName = lastName;
	contact.email = email;

	res.writeHead(200);
	res.end(`<div hx-target="this" hx-swap="outerHTML">
	<div><label>First Name</label>: ${contact.firstName}</div>
	<div><label>Last Name</label>: ${contact.lastName}</div>
	<div><label>Email</label>: ${contact.email}</div>
	<button hx-get="http://localhost:1235/contact/1/edit" class="btn btn-primary">
	Click To Edit
	</button>
	</div>`);
	});
	}
	break;
	}
	default: {
	res.writeHead(400);
	res.end('Bad request');
	break;
	}
	}
	});

	server.listen(port, host, () => {
	console.log(`Server is running on http://${host}:${port}`);
	});