route prefix support

Changelog.md

@@ -2,6 +2,7 @@
 
 ## Upcoming Changes
 
+- feat: Route prefix support. You can run this app at a path prefix by setting the `PKMN_TCG_APP_ROUTE_PREFIX` environment variable
 - feat: Updated cronjobs to use system timezone rather than just EST
 
 ## 1.0.0 - (Oct 19, 2024)

app.js

@@ -30,9 +30,29 @@ if (process.env.DISCORD_WEBHOOK_URL == undefined) {
 pokemon.configure({ apiKey: process.env["POKEMON_TCG_API_TOKEN"] });
 
 const scheduleJobs = require("./lib/scheduleJobs");
-require("roosevelt")({
+const app = require("roosevelt")({
+  routePrefix: process.env.PKMN_TCG_APP_ROUTE_PREFIX,
   onServerInit: (app) => {
     appDb.db = sqlite("data/data.db");
     scheduleJobs();
   },
-}).startServer();
+});
+
+const routePrefix = app.expressApp.get("routePrefix") || "";
+
+// Middleware to re-route any res.redirect() call to proper location if route prefix is used
+if (routePrefix !== "") {
+  app.expressApp.use((req, res, next) => {
+    const redirect = res.redirect;
+
+    res.redirect = function (url) {
+      if (url.charAt(0) === "/" && !url.includes(routePrefix)) {
+        url = routePrefix + url;
+      }
+      redirect.call(this, url);
+    };
+    next();
+  });
+}
+
+app.startServer();

mvc/controllers/404.js

@@ -1,12 +1,13 @@
 module.exports = (router, app) => {
-  router.route('*').all((req, res) => {
-    const model = require('models/global')(req, res)
-    model.content.pageTitle = 'Not Found'
-    model.server = require('models/server')(req, res)
-    model.server.host = req.hostname
-    model.server.url = req.url
-    model.server.appVersion = app.get('package').version
-    res.status(404)
-    res.render('404', model)
-  })
-}
+  router.route("*").all((req, res) => {
+    const model = require("models/global")(req, res);
+    model.routePrefix = app.get("routePrefix") || "";
+    model.content.pageTitle = "Not Found";
+    model.server = require("models/server")(req, res);
+    model.server.host = req.hostname;
+    model.server.url = req.url;
+    model.server.appVersion = app.get("package").version;
+    res.status(404);
+    res.render("404", model);
+  });
+};

mvc/controllers/homepage.js

@@ -1,8 +1,9 @@
 module.exports = (router, app) => {
-  router.route('/').get((req, res) => {
-    let model = require('models/global')(req, res)
-    model = require('models/homepage')(model)
-    model.content.pageTitle = 'Homepage'
-    res.render('homepage', model)
-  })
-}
+  router.route("/").get((req, res) => {
+    let model = require("models/global")(req, res);
+    model.routePrefix = app.get("routePrefix") || "";
+    model = require("models/homepage")(model);
+    model.content.pageTitle = "Homepage";
+    res.render("homepage", model);
+  });
+};

mvc/controllers/setListing.js

@@ -17,6 +17,7 @@ const usdFormatter = new Intl.NumberFormat("en-us", {
 module.exports = (router, app) => {
   router.route("/new/").get(async (req, res) => {
     let model = require("../models/global")(req, res);
+    model.routePrefix = app.get("routePrefix") || "";
 
     model.sets = JSON.parse(
       fs.readFileSync(path.join(__dirname, "..", "..", "data", "sets.json"))
@@ -54,6 +55,7 @@ module.exports = (router, app) => {
     const setId = req.params.id;
 
     let model = require("../models/global")(req, res);
+    model.routePrefix = app.get("routePrefix") || "";
 
     model.setList = JSON.parse(
       fs.readFileSync(
@@ -103,6 +105,7 @@ module.exports = (router, app) => {
     const card = await pokemon.card.find(cardId);
 
     let model = require("../models/global")(req, res);
+    model.routePrefix = app.get("routePrefix") || "";
 
     model.cardDetails = JSON.stringify(card, null, 2);
     // console.log(card);

mvc/views/card.html

@@ -1,7 +1,9 @@
 <include src="layouts/main">
   <arg pageContent>
     <article id="homepage">
-      <a class="green-btn" href="/new/{set}">&laquo; Back to Set</a>
+      <a class="green-btn" href="{routePrefix}/new/{set}"
+        >&laquo; Back to Set</a
+      >
       <h3 class="mt-4">Card Art</h3>
       <img src="{cardPic}" alt="Card preview for {cardName}" />
       <h3 class="mt-4">Pricing</h3>

mvc/views/homepage.html

@@ -3,7 +3,7 @@
     <article id="homepage">
       <div class="flex items-center justify-between">
         <p class="text-xl">Tracking prices for {count} cards:</p>
-        <a class="green-btn" href="/new">Browse Cards</a>
+        <a class="green-btn" href="{routePrefix}/new">Browse Cards</a>
       </div>
       <table class="mt-3 border-collapse w-full">
         <thead>
@@ -23,7 +23,11 @@
           <loop through="cards" val="card">
             <tr class="border-t border-t-gray-400">
               <td>{card.cardName}</td>
-              <td><a href="/card/{card.identifier}">{card.identifier}</a></td>
+              <td>
+                <a href="{routePrefix}/card/{card.identifier}"
+                  >{card.identifier}</a
+                >
+              </td>
               <td>{card.rarity}</td>
               <td>{card.requestedPrice}</td>
               <td>{card.marketPrice}</td>
@@ -33,7 +37,7 @@
               <td>
                 <a
                   class="text-red-700 font-bold"
-                  href="/removeCard/{card.identifier}"
+                  href="{routePrefix}/removeCard/{card.identifier}"
                   >X</a
                 >
               </td>

mvc/views/layouts/main.html

@@ -4,17 +4,18 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <meta name="format-detection" content="telephone=no" />
+    <meta name="routePrefix" content="{routePrefix}" />
     <title>{content.titleTag}</title>
-    <link rel="stylesheet" href="/css/styles.css" />
-    <script src="/js/main.js" defer></script>
+    <link rel="stylesheet" href="{routePrefix}/css/styles.css" />
+    <script src="{routePrefix}/js/main.js" defer></script>
   </head>
   <body class="no-js font-sans">
     <main class="flex flex-col">
       <header class="bg-violet-800 px-5 flex items-center text-white">
         <h1 class="text-3xl font-bold my-6 flex-1">
           {content.appTitle} - {content.pageTitle}
         </h1>
-        <a class="font-bold text-xl text-white" href="/">Home</a>
+        <a class="font-bold text-xl text-white" href="{routePrefix}/">Home</a>
       </header>
       {pageContent|s}
     </main>

mvc/views/setList.html

@@ -1,7 +1,9 @@
 <include src="layouts/main">
   <arg pageContent>
     <article id="homepage">
-      <a class="green-btn" href="/new">&laquo; Back to Set Listing</a>
+      <a class="green-btn" href="{routePrefix}/new"
+        >&laquo; Back to Set Listing</a
+      >
       <h2>Set Information</h2>
       <div id="set-list-header" class="flex mt-8">
         <div class="pr-12">
@@ -22,7 +24,7 @@ <h3>{group.type}</h3>
             <loop through="group.cards" val="card">
               <li>
                 <span>{card.name} -</span>
-                <a href="/card/{card.value}">{card.value}</a>
+                <a href="{routePrefix}/card/{card.value}">{card.value}</a>
               </li>
             </loop>
           </ul>
@@ -33,7 +35,7 @@ <h3>{group.type}</h3>
           <loop through="setList" val="card">
             <li>
               <span>{card.name} -</span>
-              <a href="/card/{card.value}">{card.value}</a>
+              <a href="{routePrefix}/card/{card.value}">{card.value}</a>
             </li>
           </loop>
         </ul>

mvc/views/setListing.html

@@ -11,7 +11,7 @@ <h2 class="mt-0">Newest Sets</h2>
             <img src="{set.img}" alt="Logo for {set.name}" class="mb-6 w-48" />
             <p>
               <span>{set.name} -</span>
-              <a href="/new/{set.value}">{set.value}</a>
+              <a href="{routePrefix}/new/{set.value}">{set.value}</a>
             </p>
           </li>
         </loop>
@@ -24,7 +24,9 @@ <h3>{yearGroup.0}</h3>
             <loop through="yearGroup.1" val="set">
               <li>
                 {set.name} - {set.description} -
-                <a class="text-blue-700 hover:underline" href="/new/{set.value}"
+                <a
+                  class="text-blue-700 hover:underline"
+                  href="{routePrefix}/new/{set.value}"
                   >{set.value}</a
                 >
               </li>

statics/js/cardDialog.js

@@ -1,4 +1,8 @@
 function createSaveCardDialog() {
+  const routePrefix = document
+    .querySelector("meta[name='routePrefix']")
+    .getAttribute("content");
+
   const data = JSON.parse(document.getElementById("metadata").innerText);
 
   const form = document.createElement("form");
@@ -15,7 +19,7 @@ function createSaveCardDialog() {
     marketPrice = parseFloat(data.prices[0].marketPrice.slice(1));
   }
 
-  form.action = "/saveCard";
+  form.action = `${routePrefix}/saveCard`;
   form.method = "POST";
   form.innerHTML = `
     <input type="hidden" name="identifier" value="${data.identifier}" />

statics/js/main.js

@@ -1,5 +1,9 @@
 const { createSaveCardDialog } = require("./cardDialog");
 
+const routePrefix = document
+  .querySelector("meta[name='routePrefix']")
+  .getAttribute("content");
+
 if (window.location.href.includes("/card/")) {
   const data = JSON.parse(document.getElementById("metadata").innerText);
 
@@ -13,7 +17,7 @@ if (window.location.href.includes("/card/")) {
   }
 }
 
-if (window.location.pathname == "/") {
+if (window.location.pathname == `${routePrefix}/`) {
   document.querySelectorAll(".editBtn").forEach((btn) => {
     btn.addEventListener("click", async (evt) => {
       let row = evt.target.parentElement.parentElement;
@@ -22,8 +26,8 @@ if (window.location.pathname == "/") {
         .getAttribute("href")
         .split("/card/")[1];
 
-      const card = await fetch(`/followedCard/${cardId}`).then((resp) =>
-        resp.json()
+      const card = await fetch(`${routePrefix}/followedCard/${cardId}`).then(
+        (resp) => resp.json()
       );
 
       const aside = document.createElement("aside");
@@ -50,7 +54,7 @@ if (window.location.pathname == "/") {
       let form = document.createElement("form");
 
       form.method = "post";
-      form.action = "/updateFollowCard";
+      form.action = `${routePrefix}/updateFollowCard`;
 
       form.innerHTML = `
         <input type="hidden" name="id" value="${cardId}" />