As a multimedia team within editorial, our main job is reporting and building stories. Like other teams, though, we’re always looking for ways to turn what we do into tools that the wider newsroom can use. This has been both very small scale such as producing Document Cloud embeds that play nicer with our CMS to SoundCite components for audio stories or custom Tarbell templates for features.

However, remembering where these tools live and how to use them can be tiresome, even for us. As a potential solution, we’re experimenting with packaging these previously web apps into a desktop application using GitHub’s Electron framework, which NPR has also been experimenting with for photo tools. The project is called Aufbau and it’s up on GitHub.

What Is It?

Aufbau is a desktop app that can serve as the home for all your web-based tools. It takes a web app that you’ve put on GitHub or npm, downloads it to a local folder and, when you click on the corresponding icon, takes you to the app—kind of like an iframe, but for your desktop. As long as an app has an index.html file and is published either to npm or on GitHub (private repos are a-okay), it should be Aufbau-compatible.

We’re giving it a start with a Quartz Chartbuilder app and a repository for up-to-date newsrooms admin docs, such as for editorial deployment.

App modules are each defined in one main file. You give Aufbau the app’s name, a location to download it from, and any build instructions in the apps.json file, and that’s about it. Our sample apps.json file looks like this:

[
  {
    "package": {
      "chartbuilder": "^2.0.0"
    },
    "displayName": "Chartbuilder",
    "indexPath": "build/index.html",
    "buildCmd": "npm run build",
    "icon": "chartbuilder.png"
  },
  {
    "package": {
      "aufbau-files": "ajam/aufbau-files"
    },
    "displayName": "Files",
    "indexPath": "src/index.html",
    "buildCmd": "npm run build"
  }
]

Give it a try and we’ll tackle this crazy desktop world together! We put a demo release out so you can download it and get a feel.

Making App Modules

Many existing apps should work out of the box but we’ve put up a a sample app module to get a sense of the minimum code necessary. The Aufbau files module is slightly more complicated, but is also a good starting off point. One of the great features of writing Electron apps is you get read / write access to the file system, allowing you to read and store files much more easily than you would with a normal web app.

Aufbau in action

White-Labeling

To create your own version:

1. Fork the Aufbau repo.
2. Rename apps.sample.json to apps.json and add what apps you want in this format. If your package is not on npm, you can add it from GitHub with user_name/repo_name syntax.
3. Run npm run build to create your desktop app. They should appear in the aufbau-dist/ folder.

The logo and the name can all be customized as well. See the project’s readme for more full customization options.

The Name

In German, “aufbau” means to build up. In particular, the Aufbau principle is the method by which electrons fill orbital levels around an atom’s nucleus, which seemed appropriate for an app that “builds up” different tools and runs them through the Electron framework.

• Share on Twitter
• Share on Facebook