Instantly share code, notes, and snippets.

Embed
What would you like to do?
Nuxt 'render:setupMiddleware' hook example
// file: hooks/index.js
import render from './render'
// 'render:context'
export default (nuxtConfig) => ({
render: render(nuxtConfig),
})
// file: hooks/render.js
import redirectRootToPortal from './route-redirect-portal'
export default (nuxtConfig) => {
const router = Reflect.has(nuxtConfig, 'router') ? nuxtConfig.router : {}
const base = Reflect.has(router, 'base') ? router.base : '/portal'
return {
/**
* 'render:setupMiddleware'
* {@link node_modules/nuxt/lib/core/renderer.js}
*/
setupMiddleware(app) {
app.use('/', redirectRootToPortal(base))
},
}
}
// file: hooks/route-redirect-portal.js
/**
* Nuxt middleware hook to redirect from / to /portal (or whatever we set in nuxt.config.js router.base)
*
* Should be the same version as connect
* {@link node_modules/connect/package.json}
*/
import parseurl from 'parseurl'
/**
* Connect middleware to handle redirecting to desired Web Applicatin Context Root.
*
* Notice that Nuxt docs lacks explaning how to use hooks.
* This is a sample router to help explain.
*
* See nice implementation for inspiration:
* - https://github.com/nuxt/nuxt.js/blob/dev/examples/with-cookies/plugins/cookies.js
* - https://github.com/yyx990803/launch-editor/blob/master/packages/launch-editor-middleware/index.js
*
* [http_class_http_clientrequest]: https://nodejs.org/api/http.html#http_class_http_clientrequest
* [http_class_http_serverresponse]: https://nodejs.org/api/http.html#http_class_http_serverresponse
*
* @param {http.ClientRequest} req Node.js internal client request object [http_class_http_clientrequest]
* @param {http.ServerResponse} res Node.js internal response [http_class_http_serverresponse]
* @param {Function} next middleware callback
*/
export default (desiredContextRoot) => function projectHooksRouteRedirectPortal(req, res, next) {
const desiredContextRootRegExp = new RegExp(`^${desiredContextRoot}`)
const _parsedUrl = Reflect.has(req, '_parsedUrl') ? req._parsedUrl : null
const url = _parsedUrl !== null ? _parsedUrl : parseurl(req)
const startsWithDesired = desiredContextRootRegExp.test(url.pathname)
const isNotProperContextRoot = desiredContextRoot !== url.pathname
if (isNotProperContextRoot && startsWithDesired === false) {
console.log('routeRedirectPortalHandler', {
desiredContextRoot,
startsWithDesired,
isNotProperContextRoot,
url,
})
const pathname = url.pathname === null ? '' : url.pathname
const search = url.search === null ? '' : url.search
const Location = desiredContextRoot + pathname + search
res.writeHead(302, {
Location,
})
res.end();
}
next()
}
// file: nuxt.config.js
import hooks from './hooks'
// Typical nuxt.config.js, plus...
export default {
router: {
base: '/portal',
},
hooks: hooks(this),
}
@renoirb

This comment has been minimized.

Owner

renoirb commented Nov 15, 2018

Related to nuxt/docs#984, and cmty.app #c142


Issue description (copy)

What problem does this feature solve?

This is maybe an edge-case, and the point of nuxt.config.js' router.base is for when a Web server will serve Nuxt elsewhere than the domain root.

But when in local development, hitting localhost, when router.base is not / returns a 404.

What does the proposed changes look like?

We can use that situation to document how nuxt hooks works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment