Getting Set Up

Before you can start using PIBS, you'll need to make sure a few things are set up on your computer first.

Before You Start

Even before starting the setup process, you'll need the following information:

These four keys should be in the credentials package you received when you first started at POLITICO. If you're missing one, see Jon McClure.

You'll also need this information too, but it's not sensitive so we can publish it on the web:

Setting Up PIB

Now that you have all the credentials you need, you can set up PIB. PIB is a toolkit with a lot of functionality for making interactive pages. It'll handle all the building, previewing, data management, and publishing for you. But before you can use all that, you'll need to give it all the necessary keys.

Make sure you have Node installed on your computer by typing node --version into a terminal. If you don't see a version number, you can get Node here.

Then, install PIB by typing the following into a terminal window:

$ npm install -g @politico/interactive-bin

Then run:

$ pib setup

You'll be asked to provide a number of values based on key prompts. You can look up those keys in the tables above. Then, you can say no to adding any new or editing any values.

Setting Up PIT

Unlike PIB, PIT is focussed on one thing: making it easy for you to find the template you need to get started. Out of the box it has no templates though, so you'll need to supply those.

Install PIT by typing the following into a terminal window:

$ npm install -g @politico/interactive-templates

Once it's installed you can register new templates. We'll start with a basic one that'll be used throughout this guide:

$ pit register https://github.com/The-Politico/template_pib-interactive

One of the advantages of using PIT is that you don't have to worry about keeping your templates up to date. Every time you start a new project, it'll use the latest version of the template from GitHub.

You can see all the templates we have to offer on the templates page, or learn how to make your own by reading the PIT Docs.

Setting Up Your Linter

As part of this suite, POLITICO also has a custom eslint configuration to be used on all projects. The linter configuration will be set up for you if you start a project from a template, but you'll need to make sure your Atom has the right plugins to take full advantage.

In Atom, hit Cmnd + , to open up your settings. Go to Packages. Search for and install a package called linter-eslint. Scroll down and check the box that says Autofix Fix on Save. Once you have this package installed, linting in your template-generated projects should happen by default. Try forgetting a semi-colon on a line of JavaScript and saving the file. It should be added for you automatically.

Setting Up Snippets

Snippets in Atom are a powerful way to save yourself on repeated code. As a team we share snippets in a GitHub repo to make it easier for anyone to edit. To add these snippets to your Atom, go to the repo. Then, in your Atom, go to Atom in the top menu, and click Snippets.... This will open a file in your editor. Replace the contents with what you see in the README of the snippets repo.

Setting Up Google Docs

All Google Docs for interactive projects go in this folder. Make sure you have full read/write access to it. If you need access, contact Andrew Briz.

We'll cover making new new docs later in this guide.

PreviousThe POLITICO Interactives Build Suite NextStarting An Interactive Page

Last updated 5 years ago