AppFabric Web

AppFabric extension provides tools for Web Developers at Intuit to develop Web applications fast and at scale. You can create create web designs and add logic to make them alive.

• AppFabric Web
  • Features
    • Widget Generator
    • Intellisense code-completion
    • Jest Runner
      • Removing Jest Runner
    • Snippets
      • Prefixes
    • Run in Local or Remote Dev Server
    • Use Intuit Design System to create UI designs
    • Configuration / Settings

Features

This extension includes the following major features:

• Easily create new Widget along with all supporting files like tests.
• Use intellisense code-completion to access AppFabric Web sandbox capabilities.
• Use Jest runner integration to run/debug unit tests.
• Use snippets code with quick commands for AppFabric sandbox capabilities.
• Use IDS pallete to browse and add IDS components, Icons, Color tokens to web pages.

Widget Generator

• Cmd + Shift + P --> AppFabric: Create new widget
• Enter widget name or leave it blank to use defaults.
• Select whether the widget needs to be exposed as a route.
• You should see new widget.yaml and <Widget>.jsx files created under src/js/widgets/<widget>.
• You should see a new unit test under test/unit/widgets/<widget>.
• You should see widget related config added to src/config.json.
• If plugin-cli server was running at the time of widget creation, the server will be restarted.

Intellisense code-completion

• The list of all auto completions for reference. E.g. this.ready, sandbox.logger.log

Jest Runner

• Pre-requisite: plugin-cli v3 should be installed
• Cmd + Shift + P --> AppFabric: Setup Jest
• Choose whether you want to setup jest for current workspace or all workspaces.
• To run/debug unit tests,
  • Open the test file in editor.
  • Click on Run/Debug codelens buttons or right click and click on Run Jest/Debug Jest.

Removing Jest Runner

• Cmd + Shift + P --> AppFabric: Remove Jest
• This will undo all changes to user settings and settings for the open workspace.
• Jest runner extension will be uninstalled automatically when the AppFabric extension is uninstalled.

Snippets

The list of all snippets for reference. Following are some examples.

Prefixes

To access any appfabric snippet, just type appf:. There are categories of snippets that can be accessed by appf:<prefix>.

Following are the prefixes:

Run in Local or Remote Dev Server

• Pre-requisite: plugin-cli v3 should be installed

• Open any web plugin.

• Click on Start Server button on the status bar.

• Select Local/Remote server.

  • Local server will host the plugin using webpack dev server.
  • Remote server will deploy assets at the URL and one can use the URL to override plugin config JSON in the associated web app.
  • More info at Plugin CLI Docs

• After the server is up, click on the URL to navigate to local server.

• To stop the server, click on Stop Server

Use Intuit Design System to create UI designs

AppFabric Web extension bundles IDS extension for VSCode. You can click on IDS icon in sidebar to open it. In the tab you can do following:

• Browse the library of IDS components, see their visual representation, install the component, and copy code snippets to use in your Web Plugin.
• Browse and search the asset library for Scalable Vector Graphic (SVG) IDS icons, see their visual representation, install the icon, and copy code snippets to use in your Web Plugin.
• Easily view and copy colors from IDS's color palette as Hex, RGB, CMYK, or token values.

Configuration / Settings

Following settings can be updated by the user in User/Workspace settings:

• Plugin-CLI command
  • This setting can be used to update the plugin-cli command.
  • e.g. yarn plugin-cli if you are installing plugin-cli locally for your repo.
  • If you need to run any scripts required for plugin-cli, you can use something like - sh ./setup.sh | plugin-cli
• Shell
  • By default, VSCode uses /bin/sh for Linux/MacOS and cmd.exe for windows.
  • This shell value will be used for executing all internal commands.
  • e.g. zsh