Slightly enhanced Express.
Comes with:-
- Handlebars (with added support for loading partials from
bower_components) - Origami Image Service integration
- Sensible error handling (configurable via environment variables)
- Full Next Flags integration
- Anti-search engine
GET /robots.txt(possibly might need to change in the future) - Promise & (Isomorphic) Fetch polyfills
- Exposes everything in the app's
./publicfolder via./{{name-of-app}} - Exposes app name via
__nameto templates - Default layout, which includes all the scripts and styles you'd expect (cuts the mustard, main.css, main.js). Also adds header and footer markup (a vanilla layout without header and footer is also available)
- Provides
NODE_ENVto templates via__environment __isProductionistrueifNODE_ENVequalsPRODUCTION- Provides a range of handlebars helpers, including template inheritance
npm install --save ft-next-expressWhen using the default layout there is also a hard dependency on some bower components. To install them (and add to your app's bower.json) run the following on your local machine. It's assumed you will have bower installed globally.
chmod +x path/to/ft-next-express/bower-install.shvar express = require('ft-next-express');
var app = express({
// Optional. If name is not provided, next-express will try to infer it from package.json
name: "xian",
// Optional
helpers: {
uppercase: function(options) {
return options.fn(this).toUpperCase();
}
}
});
app.get('/', function(req, res, next) {
res.render('main', {
title: "FT",
image: "https://avatars0.githubusercontent.com/u/3502508?v=3",
date: new Date(),
text : "<p>This wont be shown</p><p>This will be shown</p><p>This wont be shown</p>"
});
});
app.listen(process.env.PORT, function() {
console.log("Listening on " + process.env.PORT);
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<!-- this will be output as <link rel="stylesheet" href="/xian/main.css"> -->
<link rel="stylesheet" href="/{{__name}}/main.css">
</head>
<body>
<h1>{{title}}</h1>
{{#uppercase}}this text will be uppercase{{/uppercase}}
<h2>An image resized to 150px wide</h2>
<img src="{{#resize 150}}{{image}}{{/resize}}" />
{{#flags.myFlag.isSwitchedOn}}
The 'myFlag' flag is switched on
{{/flags.myFlag.isSwitchedOn}}
<time data-o-component="o-date" class="o-date" datetime="{{#dateformat}}{{date}}{{/dateformat}}">
{{#dateformat "dddd, d mmmm, yyyy"}}{{date}}{/dateformat}}
</time>
{{paragraphs text start=1 end=2}}
{{#removeImageTags}}
Image<img src="someimage.jpg" alt="This wont be shown"/>EndImage
{{/removeImageTags}}
</body>
</html>outputBlockused in the parent template to indicate where content should be output. Can also define default contentdefineBlockused in the child template to define the desired output to insert into the block
// parent.html
{{#outputBlock 'my-block'}}default content{{/outputBlock}}
// child.html
{{#defineBlock 'my-block'}}
Mustaches to process: {{someVar}}
{{/defineBlock}}
{{> parent}}Outputting date objects as strings
{{#dateformat}}{{ a date object }}{{/dateformat}}outputs an isoString{{#dateformat "dddd, d mmmm, yyyy"}}{{ a date object }}{{/dateformat}}outputs the date formatted as 'Tuesday, 3 February, 2014'
Encoding strings to be output safely in html
{{encode q mode='uriComponent'}}outputs the result ofencodeURIComponent(q)({{encode q }}will also do this){{encode q mode='uri'}}outputs the result ofencodeURI(q)
Takes a topic identifier (currently something like topic:"European%20Cars") and converts to a next stream url /stream/topic/European%20Cars
{{topicUrl searchString}}
Outputting some paragraphs from a larger chunk of html, zero indexed
{{{paragraphs body start=0 end=1}}}will output the first paragraph ofbody. Note the triple mustaches
Strips all image tags from a chunk of html
{{{removeImageTags body}}}Note the triple mustaches
Replaces an image url with an image service url, serving an appropriately resized image
{{#resize 200}}http://images.com/pic.jpg{{/resize}}
Outputs contents if a thing is equal to a value
{{#ifEquals thing 'value'}} some content {{else}} some fallback content {{/ifEquals}}
Outputs contents if a number of things are truthy Note that handlebars has a slightly odd understanding of truthiness
{{#ifAll thing1 thing2 thing3}} some content {{else}} some fallback content {{/ifAll}}
Outputs contents if at least one of a number of things is truthy Note that handlebars has a slightly odd understanding of truthiness
{{#ifSome thing1 thing2 thing3}} some content {{else}} some fallback content {{/ifSome}}
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
