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

6 years ago · 68a1a64fe3
10 changed files with 110 additions and 123 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,5 @@
 *.marko.js
+*.prebuild.json
 /node_modules
 npm-debug.log
 /.cache
--- a/4
+++ b/4
@ -26,8 +26,8 @@ RUN rm -rf .static
 RUN rm -rf .cache
 RUN rm -rf .git

-# Build templates (when that works)
-# RUN node build.js
+# Build templates
+RUN node build.js

 ## 2. Regroup
 FROM node:10-alpine
--- a/build.js
+++ b/build.js
@ -1,53 +1,27 @@
-const build = require("./builder")
+const prebuild = require("@marko/prebuild");

-// Setup global environment
-require("marko/node-require").install()
-require("es6-promise").polyfill()
+const config = require("./marko-config")
+config.loadPrebuild = false

-// Configure lasso
-require("lasso").configure({
-  plugins: [
-    "lasso-marko",
-    "lasso-less",
-  ],
-  outputDir: "./.static",
-  bundlingEnabled: true,
-  minify: true,
-  fingerprintsEnabled: true,
+prebuild.run({
+  config: config,
+  pages: [ // List of pages to prebuild.
+    "./marko/page/story/list.marko",
+    "./marko/page/story/tag-list.marko",
+    "./marko/page/logs/list.marko",
+    "./marko/page/data/channels.marko",
+    "./marko/page/data/characters.marko",
+    "./marko/page/story-content/view.marko",
+    "./marko/page/logs-content/view.marko",
+  ]
+}).then(lassoPrebuildResult => {
+  const builds = lassoPrebuildResult._buildsByPath

-  require: {
-    builtins: {
-      fs: require.resolve("empty-module"),
-    },
+  for (const key in builds) {
+    if (!builds.hasOwnProperty(key)) {
+      continue
+    }

-    transforms: [
-      {
-        transform: "lasso-babel-transform",
-        config: {
-          extensions: [".js", ".es6"], // Enabled file extensions. Default: [".js", ".es6"]
-          babelOptions: {
-            presets: [ "es2015" ]
-          }
-        }
-      }
-    ]
+    console.log("Built", key)
  }
-})
-
-// 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)
 })
--- a/builder.js
+++ b/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)
-  })
-}
--- a/marko-config.js
+++ b/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
+  }
+}
--- a/marko/page/layout.marko
+++ b/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/>
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/routes/globalcss.js
+++ b/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
--- a/server.js
+++ b/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({
-  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
-  }
-})
+lasso.configure(require("./marko-config"))

 // 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() {
-  // Build templates
-  if (isProduction) {
-    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: {}}})
-  }
+// Start server
+app.listen(config.port, function() {
+  console.log("Server started: http://localhost:" + config.port + "/")

-  // Start server
-  app.listen(config.port, function() {
-    console.log("Server started: http://localhost:" + config.port + "/")
-
-    if (process.send) {
-      setTimeout(() => process.send("online"), 100)
-    }
-  })
-}
+  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)
-})
+process.on('SIGTERM', () => process.exit(0))