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

Add the build step and work on the components of the frontend.

Browse Source
This commit is contained in:
Dave Smith-Hayes 2024-09-30 21:58:44 -04:00
parent 2906fbc529
commit eff637ffa5
12 changed files with 1784 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
chat-app/bun.lockb
View File

Binary file not shown.

9
chat-app/package.json
View File

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

4
chat-app/src/build.ts Normal file
View File

@ -0,0 +1,4 @@
Bun.build({
entrypoints: [ "./src/components/index.js" ],
outdir: "./static/js/",
});

3
chat-app/src/chat-room.ts
View File

@ -20,6 +20,7 @@ export class ChatRoom extends EventEmitter {
protected messages: Message[]; protected messages: Message[];
public constructor() { public constructor() {
super();
this.message = new Array<Message>(); this.message = new Array<Message>();
} }
@ -41,4 +42,4 @@ export class ChatRoom extends EventEmitter {
} }
} }
export const chatRomm = new ChatRoom(); export const chatRoom = new ChatRoom();

11
chat-app/src/components/ChatApp.js Normal file
View File

@ -0,0 +1,11 @@
import m from "mithril";
import { MessageBox } from "./MessageBox";
export const ChatApp = {
view: function () {
return m("div", { class: "container" }, [
m("h1", "A Stupid Chat Application"),
m(MessageBox)
]);
}
};

7
chat-app/src/components/MessageBox.js Normal file
View File

@ -0,0 +1,7 @@
import m from "mithril";
export const MessageBox = {
view: function () {
return m("div", { id: "message-box" }, "Do Something");
}
}

4
chat-app/src/components/index.js Normal file
View File

@ -0,0 +1,4 @@
import m from "mithril";
import { ChatApp } from "./ChatApp";
m.mount(document.getElementById("app"), ChatApp);

5
chat-app/src/index.ts
View File

@ -6,7 +6,6 @@ import {
createMessageString, createMessageString,
type Chatter, type Chatter,
type Message type Message
} from "./chat-room.ts"; } from "./chat-room.ts";
const app = new Hono(); const app = new Hono();
@ -24,9 +23,9 @@ app.get("/chat-socket", upgradeWebSocket((c) => {
} }
const message: Message = { const message: Message = {
chatter: { data.chatter }, chatter: data.chatter,
message: data.message, message: data.message,
timestamp: Date.now() as string; timestamp: Date.now() as string
}; };
chatRoom.addMessage(message); chatRoom.addMessage(message);

23
chat-app/static/index.html
View File

@ -4,26 +4,7 @@
<title>A Dumb Chat Application</title> <title>A Dumb Chat Application</title>
</head> </head>
<body> <body>
<div id="app"></div>
<script src="https://unpkg.com/mithril/mithril.js"></script> <script src="/js/index.js"></script>
<script src="/js/chat-service.js"></script>
<script>
// start the chat web socket
// render the application
const root = document.body;
m.render(root, [
m("h1", "A Stupid Chat"),
m("div", [
m("div", { id: "messages" }, [
]).
m("form", { id: "message-form" }, [
])
])
]);
</script>
</body> </body>
</html> </html>

21
chat-app/static/js/chat-service.js
View File

@ -1,21 +0,0 @@
const ws = initChatService();
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);
};
return ws;
}

1744
chat-app/static/js/index.js Normal file
View File

File diff suppressed because it is too large Load Diff

6
notes.md
View File

@ -20,9 +20,7 @@ Or build it with React
A simple twitte clone A simple twitte clone
Mesages on a timeline, living in memory. Mesages on a timeline, living in memory.
Multiplayer tic-tac-toe? Chat
Chat?
## What is Deployment ## What is Deployment
@ -41,7 +39,7 @@ show some diagrams
Talk about the SSL cert situation Talk about the SSL cert situation
Talk about building VM images or containers for deployment Talk about building VM images or containers for deployment
"What about K8s?" I don't know or really care "What about K8s?" I don't know or really care, honestly
## What does Dokku do for us? ## What does Dokku do for us?