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.

7
chat-app/package.json
View File

@ -1,10 +1,13 @@
{
"name": "chat-app",
"scripts": {
"dev": "bun run --hot src/index.ts"
"dev": "bun run --hot src/index.ts",
"build": "bun src/build.ts"
},
"dependencies": {
"hono": "^4.6.3"
"@types/mithril": "^2.2.7",
"hono": "^4.6.3",
"mithril": "^2.2.5"
},
"devDependencies": {
"@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[];
public constructor() {
super();
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,
type Chatter,
type Message
} from "./chat-room.ts";
const app = new Hono();
@ -24,9 +23,9 @@ app.get("/chat-socket", upgradeWebSocket((c) => {
}
const message: Message = {
chatter: { data.chatter },
chatter: data.chatter,
message: data.message,
timestamp: Date.now() as string;
timestamp: Date.now() as string
};
chatRoom.addMessage(message);

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

@ -4,26 +4,7 @@
<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
// 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>
<div id="app"></div>
<script src="/js/index.js"></script>
</body>
</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
Mesages on a timeline, living in memory.
Multiplayer tic-tac-toe?
Chat?
Chat
## What is Deployment
@ -41,7 +39,7 @@ 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 about K8s?" I don't know or really care, honestly
## What does Dokku do for us?