minify all views and public files

maxtheman · Sep 18, 2024 · bac7143 · bac7143
1 parent 290d98b
commit bac7143
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 12 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -17,9 +17,10 @@ RUN chmod +x ./z
 COPY ./db/migrations ./db/migrations
 COPY ./db/schema.sql ./db/
 
-COPY src/views ./src/views
+COPY dist/views ./src/views
 COPY src/public ./src/public
-COPY src/instrumentation.js ./src/
+COPY dist/public/output.min.css ./src/public/output.min.css
+COPY src/instrumentation.js ./
 COPY .env.production ./
 
 EXPOSE 3000

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -9,8 +9,9 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "db:migrate": "dotenvx run -f .env.production -- bun run dbmate up",
     "prepare": "cp .hooks/pre-commit .git/hooks/pre-commit && chmod +x .git/hooks/pre-commit",
+    "minify": "html-minifier-terser --input-dir src/views --output-dir dist/views --file-ext eta --collapse-whitespace --remove-comments --minify-css true --minify-js true && cleancss -o dist/public/output.min.css src/public/output.css",
     "build-linux": "dotenvx run -f .env.production -- bun build --compile --minify --sourcemap --target=bun-linux-x64-modern src/index.js --outfile ./dist/z",
-    "deploy": "bun run build-linux && fly deploy && bun run clean",
+    "deploy": "bun run build-linux && bun run minify && fly deploy && bun run clean",
     "clean": "rm -rf dist/*"
   },
   "author": "max caldwell",
@@ -32,8 +33,10 @@
     "pino": "^9.4.0"
   },
   "devDependencies": {
+    "clean-css-cli": "^5.6.3",
     "dbmate": "^2.20.0",
     "eslint": "^9.10.0",
+    "html-minifier-terser": "^7.2.0",
     "pino-pretty": "^11.2.2",
     "prettier": "^3.3.3",
     "prettier-plugin-ejs": "^1.0.3",

diff --git a/readme.md b/readme.md
@@ -79,6 +79,7 @@ Mental model for picking this or any stack:
 - https://litestream.io/guides/docker/ This would be a good first step for backups, and a stepping stone on the journey to litefs.
 - Testing framework? Didn't bother setting up tests for this. Bun comes with bun:test, probably use that.
 - Typescript
+- Caching implementation -- didn't get to this yet
 
 ## Going faster
 

diff --git a/setupDb.sh b/setupDb.sh
@@ -10,6 +10,8 @@ MIGRATIONS_DIR="./db/migrations"
 # Create the data directory if it doesn't exist
 mkdir -p /data
 
+# Could probably move all of this into bun in the future
+
 if [ ! -f /data/mydb.sqlite ]; then
     echo "Database not found, creating and running migrations..."
     touch /data/mydb.sqlite

diff --git a/src/index.js b/src/index.js
@@ -18,7 +18,10 @@ app.get("/", requiresAuth, async (c) => {
   logger.info({
     user: c.get("user")?.sub,
   });
-  const html = views.render("index", { isAuthenticated: true });
+  const html = views.render("index", {
+    isAuthenticated: true,
+    isProduction: process.env.NODE_ENV === "production",
+  });
   return c.html(html, 200);
 });
 

diff --git a/src/queries.js b/src/queries.js
@@ -21,8 +21,8 @@ db.run("PRAGMA journal_mode = WAL");
 // You can also try OFF which is faster but less safe.
 db.run("PRAGMA synchronous = NORMAL");
 // https://www.sqlite.org/pragma.html#pragma_optimize
-// Run PRAGMA OPTIMIZE every 6 hours using cron
-if (process.env.NODE_ENV === "production") {
+// Run PRAGMA OPTIMIZE every 6 hours using cron - set to disabled for now, rethinking.
+if (process.env.NODE_ENV === "production" && false) {
   const checkCronJob = $`crontab -l | grep -q "PRAGMA optimize"`;
   checkCronJob.then(() => {
     logger.info("Cron job for database optimization already exists");

diff --git a/src/views/index.eta b/src/views/index.eta
@@ -3,13 +3,17 @@
 
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport"
-        content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Todo Management</title>
-  <link href="/public/output.css"
-        rel="stylesheet" />
-  <script src="/public/htmx.min.js"></script>
-  <script type="module">
+  <% if (it.isProduction) { %>
+    <link href="/public/output.min.css" rel="stylesheet" />
+    <script src="/public/htmx.min.js"></script>
+    <script src="/public/auto-animate.min.js"></script>
+  <% } else { %>
+    <script src="/public/htmx.min.js"></script>
+    <link href="/public/output.min.css" rel="stylesheet" />
+  <% } %>
+    <script type="module">
     import autoAnimate from "/public/auto-animate.min.js";
     document.addEventListener("DOMContentLoaded", () => {
       const todoList = document.querySelector("#todoList");