nimbu-toolbelt

Toolbelt for Nimbu projects

• nimbu-toolbelt
• Usage
• Commands
• Features

Usage

Prerequisites

You need a recent node and yarn. On Mac OS X:

brew install node yarn

You still need what was needed to use the old toolchain (ruby, bundler, ...)

Getting started

Add this package to your project:

yarn add --dev nimbu-toolbelt

This will also execute bundle install to install the old toolchain it uses.

Development server

To start developing on your project that uses this toolbelt, just run:

yarn nimbu server

This will start a webpack-dev-server (and the old nimbu server that it proxies to). Your browser should automatically open a connection to it at http://localhost:4567/.

Pushing to nimbu

1. Stop your development server
2. Make a production build with yarn nimbu build
3. Push to nimbu with yarn nimbu themes:push (this calls the ruby-based toolchain -> all arguments you know are supported)

NOTE: Both the development and production webpack configuration generate snippets/webpack.liquid that gives access to the information about which files webpack generated. This should be included and used in the layout of your theme. Make sure that include is there and that you push the snippet to nimbu!

Commands

• nimbu apps:config
• nimbu apps:list
• nimbu apps:push [FILES]
• nimbu apps:transpile SOURCE TARGET
• nimbu auth:login
• nimbu auth:logout
• nimbu auth:token
• nimbu auth:whoami
• nimbu autocomplete [SHELL]
• nimbu browse:admin
• nimbu browse:simulator
• nimbu build
• nimbu channels:copy
• nimbu channels:diff
• nimbu channels:entries:copy
• nimbu config
• nimbu customers:config:copy
• nimbu customers:config:diff
• nimbu help [COMMAND]
• nimbu init
• nimbu mails:pull
• nimbu mails:push
• nimbu menus:copy [SLUG]
• nimbu pages:copy [FULLPATH]
• nimbu products:config:copy
• nimbu products:config:diff
• nimbu server
• nimbu sites:list
• nimbu themes:copy
• nimbu themes:diff [THEME]
• nimbu themes:list [THEME]
• nimbu themes:pull
• nimbu themes:push [FILES]
• nimbu translations:copy [QUERY]

nimbu apps:config

Add an app to the local configuration

Add an app to the local configuration

USAGE
  $ nimbu apps:config

See code: src/commands/apps/config.ts

nimbu apps:list

List the applications registered in Nimbu

List the applications registered in Nimbu

USAGE
  $ nimbu apps:list

See code: src/commands/apps/list.ts

nimbu apps:push [FILES]

Push your cloud code files to nimbu

Push your cloud code files to nimbu

USAGE
  $ nimbu apps:push [FILES]

ARGUMENTS
  FILES  The files to push.

OPTIONS
  -a, --app=app  The (local) name of the application to push to (see apps:list and apps:config).

See code: src/commands/apps/push.ts

nimbu apps:transpile SOURCE TARGET

Transpile a file from ES6 to ES5 for compatiblity with Nimbu Cloud applications

Transpile a file from ES6 to ES5 for compatiblity with Nimbu Cloud applications

USAGE
  $ nimbu apps:transpile SOURCE TARGET

See code: src/commands/apps/transpile.ts

nimbu auth:login

login with your nimbu credentials

login with your nimbu credentials

USAGE
  $ nimbu auth:login

OPTIONS
  -e, --expires-in=expires-in  duration of token in seconds (default 1 year)

ALIASES
  $ nimbu login

See code: src/commands/auth/login.ts

nimbu auth:logout

clears local login credentials and invalidates API session

clears local login credentials and invalidates API session

USAGE
  $ nimbu auth:logout

ALIASES
  $ nimbu logout

See code: src/commands/auth/logout.ts

nimbu auth:token

outputs current CLI authentication token.

outputs current CLI authentication token.
By default, the CLI auth token is only valid for 1 year. To generate a long-lived token, use nimbu authorizations:create

USAGE
  $ nimbu auth:token

OPTIONS
  -h, --help  show CLI help

DESCRIPTION
  By default, the CLI auth token is only valid for 1 year. To generate a long-lived token, use nimbu 
  authorizations:create

See code: src/commands/auth/token.ts

nimbu auth:whoami

display the current logged in user

display the current logged in user

USAGE
  $ nimbu auth:whoami

ALIASES
  $ nimbu whoami

See code: src/commands/auth/whoami.ts

nimbu autocomplete [SHELL]

display autocomplete installation instructions

display autocomplete installation instructions

USAGE
  $ nimbu autocomplete [SHELL]

ARGUMENTS
  SHELL  shell type

OPTIONS
  -r, --refresh-cache  Refresh cache (ignores displaying instructions)

EXAMPLES
  $ nimbu autocomplete
  $ nimbu autocomplete bash
  $ nimbu autocomplete zsh
  $ nimbu autocomplete --refresh-cache

See code: @oclif/plugin-autocomplete

nimbu browse:admin

open the admin area for your current site

open the admin area for your current site

USAGE
  $ nimbu browse:admin

See code: src/commands/browse/admin.ts

nimbu browse:simulator

open the simulator for your current site

open the simulator for your current site

USAGE
  $ nimbu browse:simulator

See code: src/commands/browse/simulator.ts

nimbu build

build a production version of your javascript and CSS

build a production version of your javascript and CSS

USAGE
  $ nimbu build

See code: src/commands/build.ts

nimbu channels:copy

copy channel configuration from one to another

copy channel configuration from one to another

USAGE
  $ nimbu channels:copy

OPTIONS
  -f, --from=from  (required) slug of the source channel
  -t, --to=to      (required) slug of the target channel

See code: src/commands/channels/copy.ts

nimbu channels:diff

check differences between channel settings from one to another

check differences between channel settings from one to another

USAGE
  $ nimbu channels:diff

OPTIONS
  -f, --from=from  (required) slug of the source channel
  -t, --to=to      (required) slug of the target channel

See code: src/commands/channels/diff.ts

nimbu channels:entries:copy

copy channel entries from one to another

copy channel entries from one to another

USAGE
  $ nimbu channels:entries:copy

OPTIONS
  -f, --from=from          (required) slug of the source channel
  -p, --per_page=per_page  number of entries to fetch per page
  -q, --query=query        query params to apply to source channel
  -t, --to=to              (required) slug of the target channel
  -u, --upsert=upsert      name of parameter to use for matching existing documents

See code: src/commands/channels/entries/copy.ts

nimbu config

Show resolved configuration

Show resolved configuration

USAGE
  $ nimbu config

See code: src/commands/config.ts

nimbu customers:config:copy

copy customer customizations from one to another

copy customer customizations from one to another

USAGE
  $ nimbu customers:config:copy

OPTIONS
  -f, --from=from  subdomain of the source site
  -t, --to=to      subdomain of the destination site

See code: src/commands/customers/config/copy.ts

nimbu customers:config:diff

check differences between customer customizations from one to another

check differences between customer customizations from one to another

USAGE
  $ nimbu customers:config:diff

OPTIONS
  -f, --from=from  (required) slug of the source channel
  -t, --to=to      (required) slug of the target channel

See code: src/commands/customers/config/diff.ts

nimbu help [COMMAND]

display help for nimbu

display help for <%= config.bin %>

USAGE
  $ nimbu help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI

See code: @oclif/plugin-help

nimbu init

initialize your working directory to code a selected theme

initialize your working directory to code a selected theme

USAGE
  $ nimbu init

OPTIONS
  -c, --cloudcode  Create CloudCode directory
  -h, --haml       Use HAML for the templates in this project
  -s, --site=site  The site (use the Nimbu subdomain) to link to this project.

See code: src/commands/init/index.ts

nimbu mails:pull

download all notification templates

download all notification templates

USAGE
  $ nimbu mails:pull

See code: src/commands/mails/pull.ts

nimbu mails:push

upload all notification templates

upload all notification templates

USAGE
  $ nimbu mails:push

OPTIONS
  -o, --only=only  the names of the templates to push online

See code: src/commands/mails/push.ts

nimbu menus:copy [SLUG]

copy menus from one site to another

copy menus from one site to another

USAGE
  $ nimbu menus:copy [SLUG]

ARGUMENTS
  SLUG  permalink of menu to be copied

OPTIONS
  -f, --from=from  subdomain of the source site
  -t, --to=to      subdomain of the destination site

See code: src/commands/menus/copy.ts

nimbu pages:copy [FULLPATH]

copy page from one site to another

copy page from one site to another

USAGE
  $ nimbu pages:copy [FULLPATH]

ARGUMENTS
  FULLPATH  [default: *] fullpath of pages to be copied

OPTIONS
  -f, --from=from      subdomain of the source site
  -t, --to=to          subdomain of the destination site
  --fromHost=fromHost  hostname of origin Nimbu API
  --toHost=toHost      hostname of target Nimbu API

See code: src/commands/pages/copy.ts

nimbu products:config:copy

copy product customizations from one to another

copy product customizations from one to another

USAGE
  $ nimbu products:config:copy

OPTIONS
  -f, --from=from  subdomain of the source site
  -t, --to=to      subdomain of the destination site

See code: src/commands/products/config/copy.ts

nimbu products:config:diff

check differences between product customizations from one to another

check differences between product customizations from one to another

USAGE
  $ nimbu products:config:diff

OPTIONS
  -f, --from=from  (required) slug of the source channel
  -t, --to=to      (required) slug of the target channel

See code: src/commands/products/config/diff.ts

nimbu server

run the development server

run the development server

USAGE
  $ nimbu server

OPTIONS
  --compass                Use legacy ruby SASS compilation.
  --host=host              [default: 0.0.0.0] The hostname/ip-address to bind on.
  --nimbu-port=nimbu-port  [default: 4568] The port for the ruby nimbu server to listen on.
  --nocookies              Leave cookies untouched i.s.o. clearing them.
  --noopen                 Don't open/reload browser
  --nowebpack              Do not use webpack.
  --poll                   Tell webpack dev server to use polling
  --port=port              [default: 4567] The port to listen on.

See code: src/commands/server.ts

nimbu sites:list

list sites you can edit

list sites you can edit

USAGE
  $ nimbu sites:list

OPTIONS
  -s, --subdomain  show Nimbu subdomain for each site

ALIASES
  $ nimbu sites

See code: src/commands/sites/list.ts

nimbu themes:copy

copy themes from one site to another

copy themes from one site to another

USAGE
  $ nimbu themes:copy

OPTIONS
  -f, --from=from      (required) slug of the source theme
  -t, --to=to          (required) slug of the target theme
  --fromHost=fromHost  hostname of origin Nimbu API
  --toHost=toHost      hostname of target Nimbu API

See code: src/commands/themes/copy.ts

nimbu themes:diff [THEME]

describe the command here

describe the command here

USAGE
  $ nimbu themes:diff [THEME]

ARGUMENTS
  THEME  The name of the theme to list

See code: src/commands/themes/diff.ts

nimbu themes:list [THEME]

list all layouts, templates and assets

list all layouts, templates and assets

USAGE
  $ nimbu themes:list [THEME]

ARGUMENTS
  THEME  The name of the theme to list

See code: src/commands/themes/list.ts

nimbu themes:pull

download all code and assets for a theme

download all code and assets for a theme

USAGE
  $ nimbu themes:pull

OPTIONS
  -s, --site=site    the site of the theme
  -t, --theme=theme  [default: default-theme] slug of the theme
  --liquid-only      only download template files

See code: src/commands/themes/pull.ts

nimbu themes:push [FILES]

push the theme code online

push the theme code online

USAGE
  $ nimbu themes:push [FILES]

ARGUMENTS
  FILES  The files to push with --only

OPTIONS
  --css-only     only push css
  --fonts-only   only push fonts
  --force        skip the usage check and upload anyway
  --images-only  only push new images
  --js-only      only push javascript
  --liquid-only  only push template code
  --only         only push the files given on the command line

See code: src/commands/themes/push.ts

nimbu translations:copy [QUERY]

copy translations from one site to another

copy translations from one site to another

USAGE
  $ nimbu translations:copy [QUERY]

ARGUMENTS
  QUERY  [default: *] query to match subset of translations to be copied

OPTIONS
  -f, --from=from      subdomain of the source site
  -t, --to=to          subdomain of the destination site
  --fromHost=fromHost  hostname of origin Nimbu API
  --toHost=toHost      hostname of target Nimbu API

See code: src/commands/translations/copy.ts

Features

Webpack is configured to support the features below.

Coffeescript/Javascript

The javascripts pipeline supports:

• Coffeescript 2 (Breaking changes from 1.x)
• ES6 syntax with all features and polyfills that create react app supports
• Optional TypeScript: run yarn add --dev typescript ts-loader to enable it

There is one entrypoint src/index.js that gets compiled into javascripts/app.js and javascripts/vendor.js (split automatically).

(S)CSS

The CSS pipeline supports:

• SCSS using sass-loader
• Minification and autoprefixing using postcss-loader and autoprefixer

The entrypoint is src/index.scss, but any (S)CSS you import in your javascript or coffeescript will also be included in the output.

To import scss files from node_modules, use a ~ prefix. For example, to import bourbon that was added with yarn add bourbon:

@import '~bourbon/core/bourbon';

In development mode, the CSS is injected dynamically into the DOM using style-loader to support Hot Module Reloading. In production, the CSS is extracted into stylesheets/app.css.

Sometimes the dynamic injecting of CSS breaks stuff. For example, if you use javascript plugins that measure certain widths/heights when the document is ready. These might execute before the styles get injected. To test these kind of things, you can tell webpack to extract the CSS into stylesheets/app.css in development too. Start the development server with the following command to do that:

EXTRACT_CSS=true yarn start

Using the webpack output in your layout

Webpack generates snippets/webpack.liquid. If you include that snippet, you get access to:

• webpack_build_timestamp: timestamp of the moment that webpack generated the snippet. Useful in a cache key.
• webpack_chunks: an array of the names of the chunks that webpack generated.
• webpack_js: a map of chunkname to javascript filename for that chunk.
• webpack_css: a map of chunkname to array of css filenames for that chunk.

For example, you can use this snippet of liquid in your layout:

{% include 'webpack' %}
{% for chunk in webpack_chunks, cache: webpack_build_timestamp %}
{% for file in webpack_css[chunk] %}
{{ file | stylesheet_tag }}
{% endfor %}
{% endfor %}

{% for chunk in webpack_chunks, cache: webpack_build_timestamp %}
{{ webpack_js[chunk] | javascript_tag }}
{% endfor %}