@anansi/cli

🕷 Anansi

Production ready, developer friendly. Opinionated yet extensible.

Anansi (/əˈnɑːnsi/ ə-NAHN-see) is an Akan folktale character. He often takes the shape of a spider and is considered to be the god of all knowledge of stories. Anansi uses his knowledge to help JavaScript developers spin new web projects.

Motivation

Starting a new React project can be a lot of work. There are many tools that need to work together. The best tools available keep a tight technical focus with high levels of configurability. In practice this means it's a lot of work to get started and even more work to maintain, while keeping the tools cleanly working together.

Like Ubuntu did for Linux; Anansi focuses on bringing together many powerful tools in unison to build high performance web applications, quickly - while not losing the power and flexibility each individual tool provides.

• Start a project in a minute
• Modular and Incremental
• Modern
  • Stay up with the latest best in class tooling by a simple package upgrade
• Batteries included
• DRY configurations
• Battle-tested

Installation

node.js ^18.17.0 or >=20.5.0 and npm >=6 are required.

Use nvm to install these if you don't already.

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

Next install Anansi's CLI

npm install -g @anansi/cli

Then generate your new project:

anansi hatch my-app-name

This creates a my-app-name directory in your current directory and sets up the project there.

Commands

hatch

Creates a new Anansi project.

Usage: anansi hatch [options] <projectName>

Aliases: init

Arguments:
  projectName              Package name for the project

Options:
  -d, --dir <directory>    What directory to add to. (Creates new directory by default)

The interactive wizard will prompt you to choose:

• Project type: Website (SPA) or NPM package (library)
• GitHub org/username: For repository configuration

anansi hatch my-app-name

add

Adds features to an existing project.

Usage: anansi add <features...>

Arguments:
  features    One or more of: testing | storybook | circle | github-actions

Features can be incrementally adopted by running sub-generators from an existing project directory.

cd my-app-name
anansi add testing
anansi add storybook circle

Available features:

• testing - Jest testing setup
• storybook - Storybook component documentation
• circle - CircleCI configuration
• github-actions - GitHub Actions workflow

serve

Runs server for SSR (Server-Side Rendering) projects. Requires @anansi/core to be installed.

Usage: anansi serve [options] <entrypath>

Arguments:
  entrypath              Path to entrypoint

Options:
  --pubPath <path>       Where to serve assets from
  -d, --dev              Run devserver rather than using previously compiled output
  -a, --serveAssets      [non-dev] also serves client assets
  -p, --serveProxy       [non-dev] uses webpack proxy config

Development mode:

anansi serve --dev ./src/index.tsx

Production mode (using pre-compiled output):

anansi serve ./dist-server/App.js

Example package.json scripts:

{
  "scripts": {
    "start": "anansi serve --dev ./src/index.tsx",
    "start:server": "anansi serve ./dist-server/App.js"
  }
}