reuters onboarding
graphics department
misc

🔧 Setting up our tech stack

In the previous section, we went over the various pieces of the puzzle that make up the Graphics Department tech stack. In particular, we covered the technologies involved in publishing an article or creating a project based on our Graphics Kit.

Next, we will look at how to set up each individual part that makes up this process.

Click on the diagram below to find out more about each part, or read through.

  • orange arrows start from credentials that you need to 'put into' your Graphics kit-based project.
  • black arrows start from a location where either code or credentials live.

Bluprint

Prerequisite for: Graphics Kit-based projects

You can get it and read the docs over at this public repo in the Graphics team repo. You can also get it from npm.

1Password

Prerequisite for: AWS creds, Google creds, RNGS creds

  • The Graphics team 1Password account contains credentials for AWS, Google Drive, RNGS, as well as various subscriptions, among other things.
  • Ask your manager for access and, if you don’t have it already, download 1Password on your devices.

Credentials and Access

Google Credentials

Prerequisite for: Graphics Kit-based projects

Google Drive Credentials

You need access to the team Google Drive to be able to use ArchieML docs with your projects, as well as to view and edit other team docs, such as the team spot news calendar and WIP articles information.

  • Ask your manager to add you to the Google Drive account. Note that this uses your personal gmail address.

  • Check out the ArchieML docs folder here. Every time you create a new Graphics Kit-based project, a new project folder and a new doc will be automatically added in there for you.

Google Service Account Credentials

  • Find the Google Service Account (note: check out this page if you don’t know what a service account is) credentials under google service account in the team 1Password. There should be a json filled called google-api.json.
  • Download the file to your .reuters-graphics folder (see Svelte Graphics Kit instructions about how and when this folder is created).

RNGS Access

Prerequisite for: Graphics Kit-based projects; publishing finished work

You need access to RNGS to be able to correctly publish articles.

  • You can request access to RNGSs using this form. Once the access request is submitted, it should take just a day to hear back.
  • Once you have your access credentials, place them in a file called graphics-server.json inside your .reuters-graphics folder (see Svelte Graphics Kit instructions about how and when this folder is created). Note that this file should look something like this:
{
  "username": <your employee ID>,
  "password": <your password>,
  "apiKey": <your API key>
 }

AWS Credentials

Prerequisite for: Graphics Kit-based projects

You need the AWS credentials to be able to upload website previews onto AWS s3.

You will be asked for these the first time you create a new bluprint from the Graphics Kit. In particular, you will be prompted for an AWS access key ID and an AWS secret access key ID. You can get both of these from the team 1Password.

Team GitHub

Prerequisite for: The repositories you will need at the start from the Graphics GitHub are all public and you can access them before you’re added to team, so it is technically not a prerequisite to get started. You will need to be added to push repositories, however.

  • You will need to be added to the org by your manager directly. You don’t need to request access internally from TR.

  • Generate a new access token by going to GitHub -> settings -> developer settings -> personal access tokens. Create and add a new token, giving it an obvious name like ‘bluprint’, no expiration, and selecting only repo in Select scopes. Here is an example with ‘bluprint’ inevitably misspelt.

    my image

  • Add this token to bluprint by running this command (after having installed the Bluprint CLI).

    bluprint token <access token>

TR GitHub

Prerequisite for: Graphics Kit-based projects

Follow these steps to get added to the TR GitHub.

1. Request to be added on The Hub

You can find the request form here or by searching How to Activate your TR GitHub account on The Hub.

  • Find the GitHub Activation survey form on the page, fill it in, and submit it. Make sure to follow the steps outlined, and in particular:

    • From GitHub, in your settings, add your TR email address as an extra email associated with your account. This will prompt an email confirmation to be sent. Confirm your email before submitting the access request form.
    • Make sure to add your personal GitHub account (if you have one) to associate to the TR corporate account on the form.

    Note:If you don’t already have a GitHub account, create one, and then follow the steps above.

  • Once you submit the access request form, you will receive an email granting you access to the TR GitHub.

2. After being added to the TR GitHub, set up SSH access

  • From GitHub, select settings -> developer settings -> personal access token. Create a new token
    • Set repo and workflow selected in Select scope and give it a descriptive name, such as ‘tr-github-token’.
    • As for expiration, you can select No expiration, but note that your token will expire in 90 days anyway.
    • Make sure to store this key somewhere secure, such as the team 1Password.
    • Make sure to click configure SSO once the token is created.my image

3. After the token is created, add it to your secure keychain on Mac

  1. If you haven’t set up a GitHub token before

    Follow the instructions on this page: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

    The easiest way to make sure you correctly set up your token to correspond to the TR org GitHub is to go to the GitHub page and try to clone a repo. Find a repo corresponding to a project in the graphics team by searching for ‘graphics_’ in the search bar. When you run git clone from Terminal with your selected repo, you will be prompted for the following details:

    Username: your_username
Password: your_token // (Make sure this is the access token you created in the previous step, i.e. 'tr-github-token')

    After you’ve done this once, you should be able to see these credentials stored in your Keychain Access.

  2. If you have set up a GitHub token before

    Follow the instructions on this page: https://docs.github.com/en/get-started/getting-started-with-git/updating-credentials-from-the-macos-keychain

    On Mac, in Spotlight Search, search for ‘Keychain Access’. A new dialog will open, where you can search for ‘github.com’. If you don’t get any results, you probably haven’t set a GitHub token before. Go back to step 1. If you do get a result, click on it, and then:

    • Click on the ‘show password’ button.
    • Make sure that your name (the ‘where’ field) is set correctly to your GitHub name.
    • Replace the token that’s already there with the one that you just created, i.e. ‘tr-github-token’.

Note that once you’ve completed these steps, you will be able to push to the TR GitHub. TR will also have permission to push on your behalf.

Adobe CS

Prerequisite for: Nothing in particular is dependent on it, but you will need it soon.

To get it, submit a request ticket through this link: Hardware/Software Request Form

Scroll down to ‘Adobe Software Requested’, select ‘Creative Cloud Enterprise Complete’ and submit. An RITM or Request ticket number will be generated, which will trigger the process of issuing you a license.

Svelte Graphics Kit

Prerequisite for: Creating and publishing articles and other code projects.

Follow the instructions in the Graphics Kit docs to create a new bluprint for a project. Namely, create a folder for your project and run bluprint start.

  • The first time you do this, several things will happen:

    • A hidden folder called .reuters-graphics will be created on your machine. Note: you can navigate to it with cd ~/.reuters-graphics from Terminal. This folder contains secure files such as various credentials.
    • You will be asked for AWS credentials. (See instructions for this above.)
    • You will be asked for the following information:
      • name
      • work email
      • public email on GitHub
      • URL that you want associated to your byline (Twitter profile – put the full URL – is good, as is directing to the Reuters graphics homepage)
      • graphics desk you work from
    • This information will create a new file called profile.json and place it in the .reuters-graphics folder automatically.

  • Any time you start a new template, you will also be asked:

    • In which GitHub org should we create a repo for this project? Select TR - Reuters company org for a general project (article), and Graphics for tools, software etc. Check with your manager if unsure.
    • Would you like to create an ArchieML doc for this project? Select ‘yes’ to create a new Google docs ArchieML doc. This will be automatically created for you a placed in the Google drive under the same name as your project name.