'use strict' const debug = require('debug')('nuxt:render') const _ = require('lodash') const co = require('co') const fs = require('fs') const pify = require('pify') const ansiHTML = require('ansi-html') const serialize = require('serialize-javascript') const build = require('./build') const serveStatic = require('serve-static') const { resolve, join } = require('path') const { encodeHtml, getContext, setAnsiColors } = require('./utils') setAnsiColors(ansiHTML) class Nuxt { constructor (options = {}, cb) { var defaults = { dev: true, routes: [], plugins: [], css: [], store: false, cache: false, loading: { color: 'black', failedColor: 'red', height: '2px', duration: 5000 } } if (options.loading === true) delete options.loading this.options = _.defaultsDeep(options, defaults) // Env variables this.dev = this.options.dev this.dir = (typeof options.rootDir === 'string' && options.rootDir ? options.rootDir : process.cwd()) // Template this.appTemplate = _.template(fs.readFileSync(resolve(__dirname, 'views', 'app.html'), 'utf8'), { imports: { serialize } }) this.errorTemplate = _.template(fs.readFileSync(resolve(__dirname, 'views', 'error.html'), 'utf8'), { imports: { ansiHTML, encodeHtml } }) // renderer used by Vue.js (via createBundleRenderer) this.renderer = null // For serving .nuxt/dist/ files this.serveStatic = pify(serveStatic(resolve(this.dir, '.nuxt', 'dist'))) // Add this.build this.build = build.bind(this) // Launch build and set this.renderer return co(this.build) .then(() => { if (typeof cb === 'function') cb(null, this) return this }) .catch((err) => { if (typeof cb === 'function') cb(err) return Promise.reject(err) }) } render (req, res) { if (!this.renderer) { setTimeout(() => { this.render(req, res) }, 1000) return } const self = this const context = getContext(req, res) co(function * () { if (self.dev) { // Call webpack middlewares only in development yield self.webpackDevMiddleware(req, res) yield self.webpackHotMiddleware(req, res) return } if (req.url.includes('/_nuxt/')) { const url = req.url req.url = req.url.replace('/_nuxt/', '/') yield self.serveStatic(req, res) req.url = url } }) .then(() => { if (this.dev && req.url.includes('/_nuxt/') && req.url.includes('.hot-update.json')) { res.statusCode = 404 return res.end() } return this.renderRoute(req.url, context) }) .then((html) => { if (context.nuxt.error && context.nuxt.error.statusCode) { res.statusCode = context.nuxt.error.statusCode } res.end(html, 'utf8') }) .catch((err) => { res.statusCode = 500 res.end(this.errorTemplate({ err }), 'utf8') }) } renderRoute (url, context = {}) { debug(`Rendering url ${url}`) // Add url and isSever to the context context.url = url context.isServer = true // Call rendertoSting from the bundleRenderer and generate the HTML (will update the context as well) const self = this return co(function * () { const html = yield self.renderToString(context) if (context.nuxt && context.nuxt.error instanceof Error) { context.nuxt.error = { statusCode: 500, message: context.nuxt.error.message } } const app = self.appTemplate({ dev: self.dev, // Use to add the extracted CSS in production APP: html, context: context, files: { css: join('/_nuxt/', self.options.build.filenames.css), vendor: join('/_nuxt/', self.options.build.filenames.vendor), app: join('/_nuxt/', self.options.build.filenames.app) } }) return app }) } stop (callback) { let promises = [] if (this.webpackDevMiddleware) { const p = new Promise((resolve, reject) => { this.webpackDevMiddleware.close(() => resolve()) }) promises.push(p) } if (this.webpackServerWatcher) { const p = new Promise((resolve, reject) => { this.webpackServerWatcher.close(() => resolve()) }) promises.push(p) } return co(function * () { yield promises }) .then(function () { if (typeof callback === 'function') callback() }) } } module.exports = Nuxt