Graphics Rig

The Graphics Rig is the primary tool for building interactive and graphic pages at Reuters Graphics.

Prerequisites

The rig requires Node version 12.0 - 13.9 (use nvm if you need to manage multiple versions of Node...) and the Yarn package manager.

You also must have a GitHub personal access token with "repo" permissions and single sign-on enabled to access the "tr" GitHub org. That token must be saved to your OSX Keychain.

Starting a project

Make a fresh directory for your new project and use the graphics rig bluprint to scaffold out your project.

$ mkdir my-new-project
$ cd my-new-project
$ bluprint start

What's in it?

• bin/
• config/
• locales/
• project-files/
• src/
• package.json

• bin/: Admin scripts that do one-off tasks like resize images and check metadata files.
• config/: Admin scripts that configure the page builder. (Mostly webpack.)
• locales/: 👈 Write your content here! Folders for each locale. See Copy and translation.
• project-files/: Any arbitrary files you want to keep with your project but not publish, e.g., ai files.
• src/: 👈 Write your code here! See Writing Code.
• package.json: Contains metadata about the project.

Read more in this guide.

Basic commands

Developing

The bluprint will install dependencies for you and automatically start a development server. To restart the dev server, use the runner:

$ runner start

Previewing locally

To preview what your pages will look like after they've been compiled and minified, run the preview command which will start a local server. This will show you exactly what your page will look like to your readers.

$ runner preview

You can change the locale at the end of the URL to see other translations.

https://localhost:8000/en/

Sharing previews

Both the start and preview commands take an optional --ngrok argument that will create a secure (but public!) URL you can share with others or use to test your page on a mobile phone. Read more about ngrok on their website.

$ runner start --ngrok

$ runner preview --ngrok

You can also publish your project to a testfiles directory on AWS.

$ runner preview:aws

Publishing

Projects are published through our Reuters graphics server. Publishing requires two steps.

First, upload your project files to the server:

$ runner upload

The "upload" command will check your metadata files to make sure you have all the information you need on the page, will build out your project files and finally create the graphics pack and individual editions of your project on the server.

Optionally, you can upload a single locale to the server by passing the locale code to the command:

$ runner upload de

After you've pushed all your code to the server, you can publish all your editions with:

$ runner publish

Anytime you upload any updates to your project, you must republish the entire package.