node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

@abcnews/aunty

aunty

A toolkit for working with ABC News projects

The aunty logo

Installation

To use the CLI to create new projects, install the latest aunty release globally:

npm install --global @abcnews/aunty

Projects based on aunty's project templates already have aunty listed as a local dependency, locked to the version used to create it.

Usage

For usage instructions, run aunty with no arguments, or for details on specific commands, run:

aunty help <command>

The CLI contains four types of command, grouped by purpose:

  • Creating new projects (new, init)
  • Generating stuff (generate) like components
  • Developing projects (clean, build, serve)
  • Deploying (un)versioned projects (deploy, release)

Starting projects

When creating new projects, you should be using the global aunty:

/some/parent/directory $ aunty new

or, from within a (preferably empty) directory:

/some/parent/directory/my-project $ aunty init

Developing projects

When working inside a project directory that has the aunty dependency installed, you'll automatically be running that local aunty:

/some/parent/directory/my-project $ aunty <build|serve|...> [options]

This ensures that any changes to future versions of aunty won't impact your project, and you can manually update the local aunty when you're ready to accommodate those changes.

Project-level commands can use an optional configuration, which you can either export from a project-level aunty.config.js file:

module.exports = {
  type: '<project_type>',
  webpack: {},
  babel: {},
  devServer: {},
  build: {},
  deploy: {}
};

...or add to your package.json file as an aunty property:

"aunty": {
  "type": "<project_type>",
  "webpack": {},
  "babel": {},
  "devServer": {},
  "build": {}, 
  "deploy": {}
}

Supported project types have their own default build configuration, but you can override it by extending your local configuration. The webpack property's value will be merged with the project's default webpack configuration, including any babel options you specify on the babel property. When running the local development server, you can pass additional options on the devServer property. Optionally, you can supply a function for the webpack, babel and/or devServer properties, which will be passed the config opjects for you to manually modify and return.

If you're looking to see what the default configuration is, or the impact of your additions, you can always perform a dry run of the build and serve commands by using the --dry (or -d) flag:

/some/parent/directory/my-project $ aunty serve --dry

Overrides should be used sparingly, as the advantages of using a single-dependency toolkit are most apparent when we don't deviate far from the project templates.

If you don't need to override any of the project defaults, your entire aunty config can be a string containing the project type, as a shorthand for {type: "<project_type>"}.

Generators

Aunty comes with a few basic generators.

aunty generate component will ask you a bunch of questions and generate a component (and tests) for whatever project type you've used.

aunty generate preview will generate mobile.html and desktop.html in the public folder with some basic ABC theming. You'll have to include the actual article content and/or your interactive placeholder yourself.

Authors

Thanks

This project takes a heap of inspiration from nwb, a React/Preact/Inferno toolkit by Jonny Buchanan. If you're looking to develop your own toolkit, Jonny's created a fantastic guide to get you started.