Express plugin for moonboots.
Express plugin for moonboots.
Just like Moonboots but it will create the necessary HTML, JS, CSS routes for you in your Express server with the correct content-types and cache-control.
npm install moonboots-express --save
Create a new instance of
moonboots-express and pass in the necessary options, including an express server. The
moonboots option will be passed directly to Moonboots proper.
moonboots-express will add the necessary routes to your express server. Outside of that, you can setup your express server however you normally would.
var Moonboots = require'moonboots-express';var express = require'express';var app = express;/*********Configure your express app**********/var moonboots =server: appmoonboots:main: __dirname + '/clientapp/app.js';applistenprocessenvPORT;
*) The default is to serve the app HTML for all routes. You can pass in a path just as you would to
app.get(path)to change it.
server: This is your Express server and it is required.
moonboots-expresswill add routes for HTML and JS (and CSS if necessary).
1 year) How long in miliseconds that you want to cache the CSS and JS when
middleware: An object with
htmlproperties. Each can be a single function or an array of functions and will be used as middleware for that particular route. See the Express routing documentation for more information.
render: A function with the signature
(req, res)that will be called to set the response of the HTML route. It will have
res.locals. By default this will just do
res.sendwith the default Moonboots HTML source.
moonboots: This is an object that is passed directly to Moonboots. See the documentation for what options are available.
moonboots-express is doing a few things for you:
- Create a
GETroute for your app's HTML at
options.appPathwith the correct contentType
- Create a
GETroute for your app's JS (and CSS if necessary) with the correct contentType
- If you are in
developmentModeyour JS/CSS will be re-bundled on each request
- If you are not in
developmentModeyour JS/CSS will be cached and the cache-control headers will be set to
- Any requests made before moonboots is ready (which can happen if you're doing complex things in the
beforeBuildfunctions) will wait for it to be ready before they are served. If you want an example of this, run
node sample/server --complexand make a request to
http://localhost:3001. The request will wait ~5 seconds before completing, but any subsequent requests will be instant.
If you don't want your HTML to be the default content served by Moonboots you can use the
render option. Here's an example where a jade file is rendered using the variables from
doctype htmlhtmlheadlink(rel='stylesheet', href=locals.resourcePrefix + locals.cssFileName)script(src=locals.resourcePrefix + locals.jsFileName)
var express = require'express';var Moonboots = require'moonboots-express';var app = express;appset'views' __dirname + '/views';appset'view engine' 'jade';var moonboots =moonboots:main: __dirname + '/clientapp/app.js'resourcePrefix: '/assets/'server: app// necessary res.locals are set by moonboots-expressresrender'index';;
You should almost always set your routes before creating your
moonboots-express instance. This is because the default
*, so this route will take precedence over anything created after it. Here's an example of a Bad Idea:
var express = require'express';var Moonboots = require'moonboots-express';var app = express;// The route should go heremoonboots: main: __dirname + '/clientapp/app.js'server: app;appget'/my-static-page'// Whoops, this is unreachable!;
moonboots-express is just attaching a few routes to your server, you can use
app.use as you normally would to set Express middleware functions. Here's an example where a header is set for all routes, including the ones created by
var express = require'express';var Moonboots = require'moonboots-express';var app = express;appuse'*'resset'my-special-header' 'header-content';next;;moonboots: main: __dirname + '/clientapp/app.js'server: app;
If you want to run route specific middleware use the
middleware config option. Here's an example where a different header is set for each route:
var express = require'express';var Moonboots = require'moonboots-express';var app = express;moonboots: main: mainSampleserver: appmiddleware:resset'my-special-html-header' 'header-content';next;resset'my-special-css-header' 'header-content';next;resset'my-special-js-header' 'header-content';next;;
moonboots-express will emit all the same log events that
moonboots does, so if you wanted to log everything from Moonboots you could do:
var Moonboots = require'moonboots-express';var moonboots = options;moonbootson'log' console.log;
npm start and make sure you have a grey (
#ccc) background and the
Woo! View source to see what rendered me. message in your window.