dsh/deployment-talks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add the Chat Rooms. Start working on the frontend app.

Browse Source
This commit is contained in:
Dave Smith-Hayes 2024-09-29 21:49:30 -04:00
commit eb696faae0
11 changed files with 226 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
chat-app/.editorconfig Normal file
View File

@ -0,0 +1,3 @@
[*.{js,ts,jsx,tsx,json,yaml}]
indent_size = 2
indent_tye = "space"

2
chat-app/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
# deps
node_modules/

11
chat-app/README.md Normal file
View File

@ -0,0 +1,11 @@
To install dependencies:
```sh
bun install
```
To run:
```sh
bun run dev
```
open http://localhost:3000

BIN
chat-app/bun.lockb Executable file
View File

Binary file not shown.

12
chat-app/package.json Normal file
View File

@ -0,0 +1,12 @@
{
"name": "chat-app",
"scripts": {
"dev": "bun run --hot src/index.ts"
},
"dependencies": {
"hono": "^4.6.3"
},
"devDependencies": {
"@types/bun": "latest"
}
}

44
chat-app/src/chat-room.ts Normal file
View File

@ -0,0 +1,44 @@
import { EventEmitter } from "events";
export type Chatter = {
name: string,
};
export const chatters = new Array<Chatter>();
export type Message = {
message: string,
timestamp: Date
chatter: Chatter
};
export function createMessageString(message: Message): string {
return `${message.chatter.name}: ${message.message}`;
}
export class ChatRoom extends EventEmitter {
protected messages: Message[];
public constructor() {
this.message = new Array<Message>();
}
public getMessages(): Message[] {
return this.messages;
}
public addMessage(message: Message) {
this.messages.push(message);
this.emit("message-added", { message });
}
public getMessagesAsArray(): string[] {
return this.messages.map(m => createMessageString(m));
}
public getNewestMessage(): Message {
const message = this.messages[this.messages - 1];
}
}
export const chatRomm = new ChatRoom();

43
chat-app/src/index.ts Normal file
View File

@ -0,0 +1,43 @@
import { Hono } from "hono";
import { serveStatic, createBunWebSocket } from "hono/bun";
import type { ServerWebSocket } from "hono";
import { chatRoom, chatters } from "./chat-room.ts";
const app = new Hono();
const users: string[] = [];
// Set up the chat socket
const { upgradeWebSocket, websocket } = createBunWebSocket<ServerWebSocket>();
app.get("/chat-socket", upgradeWebSocket((c) => {
return {
onMessage(event, ws) {
const data = JSON.parse(event.data);
if (!chatters.find(c => c.name == data.chatter.name)) {
chatters.push(data.chatter);
}
chatRoom.addMessage({
chatter: { data.chatter },
message: data.message,
timestamp: Date.now()
});
ws.send(JSON.stringify(chatRoom.getMessage().message));
},
onClose() {
console.log("Connection closed.");
},
onError(event) {
console.log(event);
}
}
}));
// get the HTML and JS from the static repo
app.use("/", serveStatic({ path: "/static/index.html" }));
app.use("/*", serveStatic({ root: "/static" }));
Bun.serve({
fetch: app.fetch,
websocket
});

20
chat-app/static/index.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Dumb Chat Application</title>
</head>
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="/js/chat-service.js"></script>
<script>
// start the chat web socket
initChatService();
// render the application
const root = document.body;
m.render(root, m("h1", "A Stupid Chat"));
</script>
</body>
</html>

17
chat-app/static/js/chat-service.js Normal file
View File

@ -0,0 +1,17 @@
function initChatService() {
const ws = new WebSocket("ws://localhost:3000/chat-socket");
ws.onmessage = function (event) {
console.log(event);
};
ws.onopen = function (event) {
console.log("Opening the socket");
ws.send(JSON.stringify({ hello: "world" }));
};
ws.onclose = function (event) {
console.log("Closing the socket");
};
ws.onerror = function (event) {
console.log(event);
};
}

7
chat-app/tsconfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"compilerOptions": {
"strict": true,
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx"
}
}

67
notes.md Normal file
View File

@ -0,0 +1,67 @@
# Deploying Dumb Ideas with Dokku
A talk describing how we can easily deploy applications with Dokku using a simple
VPS and doing some DNS work.
* What is deployment when it comes to the web?
* Talk about the VPS, how it works
* Install Dokku the service on the VPS
* Talk about the DNS setup
* Do a cost breakdown
Deploy the talk on the blog as well
## The Dumb Idea
Simple application that does something, like a guess the number or tik-tak-toe
Something with a frontend and backend to talk about deploying multiple applications.
Or build it with React
A simple twitte clone
Mesages on a timeline, living in memory.
Multiplayer tic-tac-toe?
Chat?
## What is Deployment
What does a node.js application look like?
Running express.js as a service on the server
Maybe have a reverse proxy for the web service
Deploying the code in place, take the service down or deploy on another port
and update the nginx config to point to the new service
DNS, and how DNS plays a role in pointing the domain to the server
show some diagrams
Talk about the SSL cert situation
Talk about building VM images or containers for deployment
"What about K8s?" I don't know or really care
## What does Dokku do for us?
Reverse proxy
SSL certificates
Deploys the containers defined in the `Dockerfile`
Simple `git push` for deploying to Dokku
"Is deploying actually hard? Depends"
## Deploy
* Create the application and domain
* Deploy the application to Dokku
* Get everyone to look at it