server: Integrated @marko/prebuild, and added workaround for global css issue.

.gitignore

@@ -1,4 +1,5 @@
 *.marko.js
+*.prebuild.json
 /node_modules
 npm-debug.log
 /.cache

Dockerfile

@@ -26,8 +26,8 @@ RUN rm -rf .static
 RUN rm -rf .cache
 RUN rm -rf .git
 
-# Build templates (when that works)
+# Build templates
-# RUN node build.js
+RUN node build.js
 
 ## 2. Regroup
 FROM node:10-alpine

build.js

@@ -1,53 +1,27 @@
-const build = require("./builder")
+const prebuild = require("@marko/prebuild");
 
-// Setup global environment
+const config = require("./marko-config")
-require("marko/node-require").install()
+config.loadPrebuild = false
-require("es6-promise").polyfill()
 
-// Configure lasso
+prebuild.run({
-require("lasso").configure({
+  config: config,
-  plugins: [
+  pages: [ // List of pages to prebuild.
-    "lasso-marko",
+    "./marko/page/story/list.marko",
-    "lasso-less",
+    "./marko/page/story/tag-list.marko",
-  ],
+    "./marko/page/logs/list.marko",
-  outputDir: "./.static",
+    "./marko/page/data/channels.marko",
-  bundlingEnabled: true,
+    "./marko/page/data/characters.marko",
-  minify: true,
+    "./marko/page/story-content/view.marko",
-  fingerprintsEnabled: true,
+    "./marko/page/logs-content/view.marko",
+  ]
+}).then(lassoPrebuildResult => {
+  const builds = lassoPrebuildResult._buildsByPath
 
-  require: {
+  for (const key in builds) {
-    builtins: {
+    if (!builds.hasOwnProperty(key)) {
-      fs: require.resolve("empty-module"),
+      continue
-    },
+    }
 
-    transforms: [
+    console.log("Built", key)
-      {
-        transform: "lasso-babel-transform",
-        config: {
-          extensions: [".js", ".es6"], // Enabled file extensions. Default: [".js", ".es6"]
-          babelOptions: {
-            presets: [ "es2015" ]
-          }
-        }
-      }
-    ]
   }
 })
-
-// Render templates
-async function buildAll() {
-  await build("./marko/page/story/list.marko")
-  await build("./marko/page/story/tag-list.marko", {tags: []})
-  await build("./marko/page/logs/list.marko")
-  await build("./marko/page/data/channels.marko", {channels: [], user: {}})
-  await build("./marko/page/data/characters.marko", {characters: [], user: {}})
-  await build("./marko/page/story-content/view.marko", {story: {chapters: []}})
-  await build("./marko/page/logs-content/view.marko", {log: {posts: [], channel: {}}})
-}
-
-buildAll().then(() => {
-  console.log("Done!")
-}).catch(err => {
-  console.error(err)
-  process.exit(1)
-})

builder.js

@@ -1,15 +0,0 @@
-module.exports = function build(path, data) {
-  console.log("Building", path)
-
-  return new Promise((resolve, reject) => {
-    const render = require(path).render(data)
-    render.once("error", err => reject)
-
-    const interval = setInterval(() => {
-      if (render._remaining === 0) {
-        clearInterval(interval)
-        resolve()
-      }
-    }, 500)
-  })
-}

marko-config.js

@@ -0,0 +1,31 @@
+const isProduction = process.env.NODE_ENV === "production"
+
+module.exports = {
+  plugins: [
+    "lasso-marko",
+    "lasso-less",
+  ],
+  outputDir: "./.static", // Place all generated JS/CSS/etc. files into the "static" dir
+  bundlingEnabled: isProduction, // Only enable bundling in production
+  minify: isProduction, // Only minify JS and CSS code in production
+  fingerprintsEnabled: isProduction, // Only add fingerprints to URLs in production
+  loadPrebuild: isProduction, // Only load prebuilt stuff in prod.
+
+  require: {
+    builtins: {
+      fs: require.resolve("empty-module"),
+    },
+
+    transforms: isProduction ? [
+      {
+        transform: "lasso-babel-transform",
+        config: {
+          extensions: [".js", ".es6"], // Enabled file extensions. Default: [".js", ".es6"]
+          babelOptions: {
+            presets: [ "es2015" ]
+          }
+        }
+      }
+    ] : null
+  }
+}

marko/page/layout.marko

@@ -10,6 +10,8 @@
       <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" name="viewport" />
       <meta content="#111111" name="theme-color" />
       <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+
+      <link rel="stylesheet" href="/hax/global.css">
     </head>
     <title>${input.title ? `${input.title} - Aite RP` : "Aite RP"}</title>
     <lasso-head/>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisle/rpdata-frontend",
-  "version": "0.1.0",
+  "version": "1.0.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -16,6 +16,15 @@
         "raptor-util": "^1.1.2"
       }
     },
+    "@marko/prebuild": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@marko/prebuild/-/prebuild-4.0.5.tgz",
+      "integrity": "sha512-wuE73v78YTH5NQ8T8mr3Yr7j2hpivTnNQdpNMPBfy7w9AF8CtD5Jb0OciP5MuAukLXHhXv3ZVzJxYJbJYJXwIg==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "lasso": "3.2.6"
+      }
+    },
     "JSONStream": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.4.tgz",

package.json

@@ -12,6 +12,7 @@
   "homepage": "https://github.com/marko-js-samples/marko-express",
   "dependencies": {
     "@lasso/marko-taglib": "^1.0.12",
+    "@marko/prebuild": "^4.0.5",
     "babel-preset-es2015": "^6.24.1",
     "body-parser": "^1.18.3",
     "browser-refresh": "^1.7.3",
@@ -30,6 +31,7 @@
     "lasso-babel-transform": "^1.0.2",
     "lasso-less": "^3.0.1",
     "lasso-marko": "^2.4.4",
+    "less": "^3.8.1",
     "markdown-it": "^8.4.2",
     "markdown-it-container": "^2.0.0",
     "markdown-it-regexp": "^0.4.0",

routes/globalcss.js

@@ -0,0 +1,23 @@
+const fs = require("fs")
+const express = require("express")
+const less = require("less")
+
+const router = express.Router()
+
+let lessData = ""
+let data = ""
+for (const name of fs.readdirSync("./marko/global/", "utf8")) {
+  data += fs.readFileSync("./marko/global/"+name, {encoding:"utf8"}) + "\n\n"
+}
+data = less.render(data, (err, output) => {
+  if (err == null) {
+    lessData = output.css
+  }
+})
+
+router.get("/", (req, res) => {
+  res.contentType("text/css").end(lessData)
+})
+
+
+module.exports = router

server.js

@@ -5,9 +5,6 @@ require("es6-promise").polyfill()
 // Load server config
 const config = require("./config")
 
-// Load utilities
-const build = require("./builder")
-
 // Express depedencies
 const express = require("express")
 const proxy = require("express-http-proxy")
@@ -24,35 +21,7 @@ const session = require("./middleware/session")
 const app = express()
 
 // Configure lasso
-const isProduction = process.env.NODE_ENV === "production"
+lasso.configure(require("./marko-config"))
-lasso.configure({
-  plugins: [
-    "lasso-marko",
-    "lasso-less",
-  ],
-  outputDir: "./.static", // Place all generated JS/CSS/etc. files into the "static" dir
-  bundlingEnabled: isProduction, // Only enable bundling in production
-  minify: isProduction, // Only minify JS and CSS code in production
-  fingerprintsEnabled: isProduction, // Only add fingerprints to URLs in production
-
-  require: {
-    builtins: {
-      fs: require.resolve("empty-module"),
-    },
-
-    transforms: isProduction ? [
-      {
-        transform: "lasso-babel-transform",
-        config: {
-          extensions: [".js", ".es6"], // Enabled file extensions. Default: [".js", ".es6"]
-          babelOptions: {
-            presets: [ "es2015" ]
-          }
-        }
-      }
-    ] : null
-  }
-})
 
 // Set trusted proxy
 if (config.trustedProxy != null) {
@@ -79,6 +48,15 @@ app.use("/auth", require("./routes/auth"))
 app.use("/graphql", require("./routes/graphql"))
 app.use("/playground", proxy(config.playgroundEndpoint))
 
+// Global css doesn't work with prebuild.
+if (process.env.NODE_ENV === "production") {
+  app.use("/hax/global.css", require("./routes/globalcss"))
+} else {
+  app.get("/hax/global.css", (req, res) => {
+    res.type(".css").end("")
+  })
+}
+
 // Page routes
 app.use("/story/", require("./routes/story"))
 app.use("/story/unlisted/", require("./routes/story/unlisted"))
@@ -100,33 +78,15 @@ app.get("/", function(req, res) {
   res.redirect("/story/")
 })
 
-async function main() {
+// Start server
-  // Build templates
+app.listen(config.port, function() {
-  if (isProduction) {
+  console.log("Server started: http://localhost:" + config.port + "/")
-    await build("./marko/page/story/list.marko")
+
-    await build("./marko/page/story/tag-list.marko", {tags: []})
+  if (process.send) {
-    await build("./marko/page/logs/list.marko")
+    setTimeout(() => process.send("online"), 100)
-    await build("./marko/page/data/channels.marko", {channels: [], user: {}})
-    await build("./marko/page/data/characters.marko", {characters: [], user: {}})
-    await build("./marko/page/story-content/view.marko", {story: {chapters: []}})
-    await build("./marko/page/logs-content/view.marko", {log: {posts: [], channel: {}}})
   }
-
+})
-  // Start server
-  app.listen(config.port, function() {
-    console.log("Server started: http://localhost:" + config.port + "/")
-
-    if (process.send) {
-      setTimeout(() => process.send("online"), 100)
-    }
-  })
-}
 
 // Handle shutdown signals (Docker needs this to shutdown quickly)
 process.on('SIGINT', () => process.exit(0))
 process.on('SIGTERM', () => process.exit(0))
-
-main().catch(err => {
-  console.error(err)
-  process.exit(1)
-})