chore: add example integrating hono with express, also without using …

…vite dev server
joshamaju · Apr 19, 2024 · 5f91904 · 5f91904
1 parent 3ca19cf
commit 5f91904
Show file tree

Hide file tree

Showing 12 changed files with 191 additions and 0 deletions.
diff --git a/examples/with-express/README.md b/examples/with-express/README.md
@@ -0,0 +1,19 @@
+## Express example
+
+Shows how to use a hono app with express abd just using vite to build the entire app for development and production.
+
+## How to use
+
+Run the app in development mode
+
+> Builds the app, starts the express server and watches for changes
+
+```bash
+npm run watch
+```
+
+To start the express server
+
+```bash
+npm run start
+```
diff --git a/examples/with-express/package.json b/examples/with-express/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "with-express",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "start": "node ./dist/server.js",
+    "watch": "nodemon --watch './src/*' --exec 'pnpm run build && pnpm start' -e ts,js,svelte"
+  },
+  "keywords": [],
+  "dependencies": {
+    "express": "^4.19.2",
+    "hono": "^3.12.0",
+    "stack54": "^0.2.0",
+    "svelte": "^4.2.8"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tsconfig/svelte": "^5.0.2",
+    "@types/express": "^4.17.21",
+    "nodemon": "^3.1.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  }
+}
diff --git a/examples/with-express/public/stack54.png b/examples/with-express/public/stack54.png
diff --git a/examples/with-express/src/entry.ts b/examples/with-express/src/entry.ts
@@ -0,0 +1,14 @@
+import { Hono } from "hono";
+import { view } from "stack54/view";
+
+import { render } from "./utils/view";
+
+const app = new Hono();
+
+app.use(view(render));
+
+app.get("/", async (ctx) => {
+  return ctx.render("welcome", {});
+});
+
+export default app;
diff --git a/examples/with-express/src/env.d.ts b/examples/with-express/src/env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+/// <reference types="stack54/client" />
+
+/// <reference path="../.stack54/env.d.ts" />
+/// <reference path="../.stack54/views.d.ts" />
diff --git a/examples/with-express/src/server.ts b/examples/with-express/src/server.ts
@@ -0,0 +1,25 @@
+import express from "express";
+import { toNodeHandler } from "stack54/node";
+import router from "./entry.js";
+
+const app = express();
+
+const serve_build = express.static("public/assets", {
+  immutable: true,
+  maxAge: "1y",
+});
+
+// http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header
+app.disable("x-powered-by");
+
+app.use("/assets", serve_build);
+
+app.use(express.static("public", { maxAge: "1h" }));
+
+app.all("*", toNodeHandler(router));
+
+const port = process.env.PORT || 3000;
+
+app.listen(port, () => {
+  console.log(`✅ app ready: http://localhost:${port}`);
+});
diff --git a/examples/with-express/src/utils/view.ts b/examples/with-express/src/utils/view.ts
@@ -0,0 +1,11 @@
+import { makeFactory, resolveComponent } from "stack54/render";
+import { type TemplateModule } from "stack54/types";
+
+const components = import.meta.glob<TemplateModule>("../views/**/*.svelte", {
+  query: { ssr: true },
+  eager: true,
+});
+
+export const render = makeFactory((name) => {
+  return resolveComponent(`../views/${name}.svelte`, components);
+});
diff --git a/examples/with-express/src/views/components/document.svelte b/examples/with-express/src/views/components/document.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Head } from "stack54/components";
+</script>
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
+      rel="stylesheet"
+    />
+
+    <Head />
+
+    <slot name="head" />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/examples/with-express/src/views/welcome.css b/examples/with-express/src/views/welcome.css
@@ -0,0 +1,9 @@
+html,
+body {
+  margin: 0;
+  color: white;
+  height: 100%;
+  line-height: 1.5;
+  background-color: black;
+  font-family: "Ubuntu", sans-serif;
+}
diff --git a/examples/with-express/src/views/welcome.svelte b/examples/with-express/src/views/welcome.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import Document from "./components/document.svelte";
+</script>
+
+<Document>
+  <svelte:fragment slot="head">
+    <link rel="stylesheet" href="./welcome.css" />
+  </svelte:fragment>
+
+  <section>
+    <main>
+      <h1>
+        <img src="/stack54.png" alt="stack54" />
+      </h1>
+    </main>
+  </section>
+</Document>
+
+<style>
+  section {
+    height: 100%;
+    display: flex;
+  }
+
+  main {
+    margin: auto;
+    text-align: center;
+  }
+
+  h1 {
+    font-size: 7rem;
+  }
+
+  img {
+    width: 20rem;
+  }
+</style>
diff --git a/examples/with-express/tsconfig.json b/examples/with-express/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "stack54/tsconfigs/base",
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/with-express/vite.config.ts b/examples/with-express/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import fullstack from "stack54/vite";
+
+export default defineConfig({
+  plugins: [fullstack()],
+  build: {
+    rollupOptions: {
+      input: {server: './src/server.ts'}
+    }
+  },
+});