AppFabric Web

AppFabric extension provides tools for Web Developers at Intuit to develop Web applications fast and at scale.

• AppFabric Web
  • Features
    • Widget Generator
    • Intellisense code-completion
    • Jest Runner
      • Removing Jest Runner
    • Snippets
      • Prefixes
    • Run in Local or Remote Dev Server
    • 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.

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

• As you type, code will be autocompleted when you use keywords like this, sandbox as shown in the screenshots below.

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

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.

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

• To stop the server, click on Stop Server

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