Skip to main content
Important

This feature is currently in Early Availability (EA) status. For more information, see our product lifecycle phases.

Install the UI Toolkit

You can install the UI Toolkit on either macOS or Windows.

The UI Toolkit has certain prerequisite programs that must be in place before you can install it. The Toolkit installation itself is performed from the command line.

A video tutorial of an installation is available here.

Prerequisites​

Before you can install and use the UI Toolkit, you must install certain third-party programs as prerequisites. These include the Node.js environment and the node-sass library.

info

For Node.js installation, we recommend that you use the Node Version Manager (nvm) application.

This application is a version manager for node.js, designed to be installed per-user, and invoked per-shell. The nvm application works on any POSIX-compliant shell (sh, dash, ksh, zsh, bash), in particular on Unix, MacOS, and Windows WSL.

Installing Node Version Manager​

To install nvm, run this command at the command line:

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

Other OS-Specific Prerequisites​

After nvm is installed, you can continue with the prerequisites listed in the table below:

For MacOSFor Windows 10
  1. Node.js 16. Cross-platform JavaScript runtime environment for servers and applications.
  2. Node-sass. This is a library that provides binding for Node.js to LibSass and it must be installed as a global dependency. To install it, run npm -g install node-sass from the command line.
  3. Text editor—For code, markup, and prose, such as Sublime Text.
  4. Xcode—Development environment for macOS containing a suite of software development tools.

  5. Command line tools. Specifically for Xcode, it includes a package that enables UNIX-style development through Terminal by installing command-line tools and macOS SDK frameworks and headers.

    To download command line tools for Xcode

    1. Click Xcode in the top menu bar, then click Open Developer Tool > More Developer Tools.
    2. Enter your Apple ID password. The Downloads for Apple Developers page opens.
    3. Select and download the Command Line Tools that is compatible with your computer. You must download the package that is compatible with both your macOS and Xcode versions.
    4. Open the Command Line Tools folder and download the file.

  1. Node-sass. This is a library that provides binding for Node.js to LibSass and it must be installed as a global dependency. To install it, run npm -g install node-sass from the command line.

  2. Text editor—For code, markup, and prose, such as Sublime Text.

Install the UI Toolkit​

After you install the necessary third-party programs, you can install the UI Toolkit through the command line.

To install the UI Toolkit, follow these steps:

  1. Open a command-line window.
  2. Run the command npm install -g @appdirect/sfb-toolkit. (This might take a few moments to finish).

Set up your workspace​

After the UI Toolkit has been installed, you should have access to the sfb-toolkit command. You'll be able to use this command to setup a workspace folder. This folder structure will contain a sample theme, which you can use as a starting point for your own theme. All extensions you create will be added to a folder named extensions.

info

During this setup you must specify the marketplace to which the toolkit will be linked. This enables you to draw on that marketplace for data during development.

To set up your workspace folder, follow these steps:

  1. Navigate to a folder in your file system where you want to setup your workspace folder.
  2. Type sfb-toolkit setup <workspaceFolder> and press Enter. (The <workspaceFolder> is the top-level folder for your workspace which will contain the themes and extensions folders.
  3. You'll be prompted to agree to the terms of the license agreement. To continue, type agree and press Enter.
  4. You'll be prompted to select one of the standard marketplace themes as a starting point for your first theme. The choices are classic and Plaza. This is a required step even for extensions when installing the toolkit for the first time.
  5. Use the arrow keys to highlight the base theme you want, and press Enter.
  6. Type a theme name and press Enter. A folder with the specified name is created on your computer. It includes all of the files required to create a custom theme. You are prompted to type the marketplace path.
  7. Type your full marketplace URL.
    important

    Ensure that you include https:// in the URL.

    Press Enter. You can now import data from the specified marketplace when you Use the developer toolbar in your browser.

Congratulations! You have successfully installed the UI Toolkit, continue on by creating your first extension.

Was this page helpful?

Tell us more…

Help us improve our content. Responses are anonymous.

Thanks

We appreciate your feedback!