Browse Source

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

1.1
Gisle Aune 5 years ago
parent
commit
68a1a64fe3
  1. 1
      .gitignore
  2. 4
      Dockerfile
  3. 68
      build.js
  4. 15
      builder.js
  5. 31
      marko-config.js
  6. 2
      marko/page/layout.marko
  7. 11
      package-lock.json
  8. 2
      package.json
  9. 23
      routes/globalcss.js
  10. 76
      server.js

1
.gitignore

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

4
Dockerfile

@ -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

68
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)
})

15
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)
})
}

31
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
}
}

2
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/>

11
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",

2
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",

23
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

76
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))
Loading…
Cancel
Save