Skip to content

README.md

Latest commit

 

History

History
198 lines (142 loc) · 6.64 KB

README.md

File metadata and controls

198 lines (142 loc) · 6.64 KB

plugin-app-dev

NPM Downloads/week License

Salesforce CLI App Dev Plugin

A Salesforce CLI plugin for building web applications that integrate with Salesforce. This plugin provides tools for local development, packaging, and deployment of webapps with built-in Salesforce authentication.

This plugin is bundled with the Salesforce CLI. For more information on the CLI, read the getting started guide.

We always recommend using the latest version of these commands bundled with the CLI, however, you can install a specific version or tag if needed.

Features

  • 🔐 Local Development Proxy - Run webapps locally with automatic Salesforce authentication
  • 🌐 Intelligent Request Routing - Automatically routes requests between Salesforce APIs and dev servers
  • 🔄 Dev Server Management - Spawns and monitors dev servers (Vite, CRA, Next.js)
  • 🎨 Beautiful Error Handling - HTML error pages with auto-refresh and diagnostics
  • 💚 Health Monitoring - Periodic health checks with status updates
  • 🔧 Hot Config Reload - Detects webapplication.json changes automatically

Quick Start

  1. Install the plugin:

    sf plugins install @salesforce/plugin-app-dev

  2. Authenticate with Salesforce:

    sf org login web --alias myorg

  3. Create webapplication.json:

    {
  "name": "myapp",
  "label": "My Web App",
  "version": "1.0.0",
  "apiVersion": "60.0",
  "outputDir": "dist",
  "dev": {
    "command": "npm run dev"
  }
}

  4. Start development:

    sf webapp dev --name myapp --target-org myorg --open

Documentation

📚 Complete Guide - Comprehensive documentation covering:

  • Overview and architecture
  • Getting started (5-minute quick start)
  • Building the plugin
  • Command usage and options
  • File structure and components
  • VSCode integration
  • Advanced features (hot reload, error capture, etc.)
  • Troubleshooting and FAQ

Install

sf plugins install @salesforce/plugin-app-dev@x.y.z

Issues

Please report any issues at https://github.com/forcedotcom/cli/issues

Contributing

  1. Please read our Code of Conduct
  2. Create a new issue before starting your project so that we can keep track of what you are trying to add/fix. That way, we can also offer suggestions or let you know if there is already an effort in progress.
  3. Fork this repository.
  4. Build the plugin locally
  5. Create a topic branch in your fork. Note, this step is recommended but technically not required if contributing using a fork.
  6. Edit the code in your fork.
  7. Write appropriate tests for your changes. Try to achieve at least 95% code coverage on any new code. No pull request will be accepted without unit tests.
  8. Sign CLA (see CLA below).
  9. Send us a pull request when you are done. We'll review your code, suggest any needed changes, and merge it in.

CLA

External contributors will be required to sign a Contributor's License Agreement. You can do so by going to https://cla.salesforce.com/sign-cla.

Build

To build the plugin locally, make sure to have yarn installed and run the following commands:

# Clone the repository
git clone git@github.com:salesforcecli/plugin-app-dev

# Install the dependencies and compile
yarn && yarn build

To use your plugin, run using the local ./bin/dev or ./bin/dev.cmd file.

# Run using local run file.
./bin/dev hello world

There should be no differences when running via the Salesforce CLI or using the local run file. However, it can be useful to link the plugin to do some additional testing or run your commands from anywhere on your machine.

# Link your plugin to the sf cli
sf plugins link .
# To verify
sf plugins

Build when nested in another repo (e.g. monorepo): If yarn build or npm run compile fails with workspace name conflicts, compile manually. The error page template is consumed from @salesforce/webapp-experimental at runtime (W-21111977); no copy step needed.

./node_modules/.bin/tsc -p . --pretty
sf plugins link .

See CODE_MAP.md for where AC1–AC4 and the iframe/postMessage flow live.

Commands

sf webapp dev

Start a local development proxy server for webapp development with Salesforce authentication.

USAGE
  $ sf webapp dev --name <webapp-name> --target-org <org-alias> [options]

REQUIRED FLAGS
  -n, --name=<value>         Name of the webapp (must match webapplication.json)
  -o, --target-org=<value>   Salesforce org to authenticate against

OPTIONAL FLAGS
  -u, --url=<value>          Dev server URL (overrides webapplication.json)
  -p, --port=<value>         Proxy server port (default: 4545)
  --open                     Open browser automatically

GLOBAL FLAGS
  --flags-dir=<value>        Import flag values from a directory
  --json                     Format output as json

DESCRIPTION
  Start a local development proxy server for webapp development.

  This command starts a local HTTP proxy server that handles Salesforce
  authentication and routes requests between your local dev server and
  Salesforce APIs. It automatically spawns and monitors your dev server,
  detects the URL, and provides health monitoring.

EXAMPLES
  Start proxy with automatic dev server management:

    $ sf webapp dev --name myapp --target-org myorg --open

  Use existing dev server:

    $ sf webapp dev --name myapp --target-org myorg --url http://localhost:5173 --open

  Use custom proxy port:

    $ sf webapp dev --name myapp --target-org myorg --port 8080 --open

SUPPORTED DEV SERVERS
  - Vite
  - Create React App (Webpack)
  - Next.js
  - Any server that outputs http://localhost:PORT

FEATURES
  - Automatic Salesforce authentication injection
  - Intelligent request routing (Salesforce vs dev server)
  - WebSocket support for Hot Module Replacement (HMR)
  - Beautiful HTML error pages with auto-refresh
  - Periodic health monitoring (every 5s)
  - Configuration file watching (webapplication.json)
  - Graceful shutdown on Ctrl+C

SEE ALSO
  - Complete Guide: SF_WEBAPP_DEV_GUIDE.md