The Build Service is the quickest and simplest way to get Origami Modules into your product.
The Build Service performs all the steps you need to use a module (detailed in the manual build process tutorial) on a central server. You request the bundles using a
<link ...> or
<script ...> tag, and the Build Service handles the rest.
This is particularly useful for:
The Build Service hosts its own API and technical documentation at www.ft.com/__origami/service/build. For a step by step tutorial on how to use the Build Service, keep reading!
This tutorial will take you though building a page that includes some Origami modules. By the end you’ll have built a page using the Build Service with a cuts the mustard test for older web browsers.
To create a new JS Bin, open this link in a new tab: Create new JS Bin.
For this tutorial, we’ll use some boilerplate HTML. There are two things in the boilerplate that we won’t be covering here; the Polyfill Service and a ‘cuts the mustard test’.
Your JS Bin should look something like this:
Delete the contents of the HTML panel and paste the Origami boilerplate in there instead.
The right hand side of the screen now say:
Now that you’ve added the boilerplate, it’s time to add some components.
For this guide we’ll add the standard FT header and footer. All Origami components are listed on the Origami Registry, so go there now and use the search box to find the header component:
At the top of every module page on the registry there are some demos. Pick a demo header to use (we’ve chosen the minimal theme header).
Select the HTML tab and copy all the HTML to your clipboard (there is quite a lot of it).
Switch to your JS Bin window and find the bit that says
<!-- Body content here --> (it’s towards the bottom of the file). Paste your header HTML just below that.
<script ...> tags in the boilerplate.
Go back to the registry, and on the o-header page, scroll down to the section called ‘Quick start’.
In quick start, you’ll see a token, it will look something like:
o-header@^5.0.0. This is the bit you need to add to the Build Service requests in the boilerplate.
In JS Bin, find the Build Service CSS bundle request and replace
a,b,c in the URL with the o-header token.
<!-- Load the Origami stylesheet, including fonts and icons by default. Replace a,b,c with the names of the additional modules you want to load. --> <link rel="stylesheet" href="https://www.ft.com/__origami/service/build/v2/bundles/css?modules=a,b,c" />
Now, repeat this process for the footer:
<body>section of your JS Bin page
The Build Service is capable of including more than one component in the same bundle, so you can add many modules into the same URL. Here’s an example:
<link rel="stylesheet" href="https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-fonts@^1,o-icons@^4,o-header@^3.0.3,o-footer@^3.0.1" />
It’s important that you do this, so that any CSS that’s shared between the header and footer (there’s quite a bit) isn’t downloaded twice.
Well done, you have built a responsive, FT branded web page with Origami.
Using the techniques you just learned, you can now bring your content to life easily by adding various components and HTML between the header and footer.
This tutorial has covered getting Origami components onto a page using the Build Service.
<link ...>subresource tag
<script ...>subresource tag
We skipped over some areas that you should understand if you want to use Origami in production: