@lwrjs/dev-proxy-server

LWR Development Proxy Server

The LWR Development Proxy Server enables LWR applications to reference resources hosted outside of the LWR runtime.

                                                                            ┌──────────────┐
                                    ┌────────┐                              │              │
                                    │        │                              │              │
                                    │        │                              │ lwr runtime  │
  https://example.com/home          │        │─────────────────────────────▶│              │
     ──────────────────────────────▶│ site   │   /home                      │              │
   /1/bundle/.../bundle_lwc.js      │  proxy │   /1/bundle/.../bundle_lwc.js└──────────────┘
   /1/asset/.../global.css          │        │   /1/asset/.../global.css
   /content/.../logo-salesforce.svg │        │                                     ┌──────────────┐
                                    │        │                                     │              │
                                    │        │────────────────────────────────────▶│   content    │
                                    │        │   /content/.../logo-salesforce.svg  │   origin     │
                                    └────────┘                                     │              │
                                                                                   │              │
                                                                                   └──────────────┘

In production deployments the proxying of distrbuted resources is typically provided by a dedicated service (e.g. Cloudfront, Cloudflare, NginX, etc), seperate from the origin application/UI services.

For local runtime scenarios, the LWR Development Proxy Server provides a simple and integrated local site proxy that can be used when developing, previewing or debugging the site or its built distribution.

Configuration

To configure the Development Proxy Server add another proxy entry to the _proxy runtime configuration file in your projects config directory.

/content https://c1.sfdcstatic.com/

Each entry of the _proxy configuration includes the base path of the requests to be proxied to their associated origin host.

LWR CLI Command support

The Development Proxy Server is integrated into the Lightning Web Runtime CLI commands -- lwr dev, lwr build and lwr preview.

The Development Proxy Server is only started with a site containing a proxy configuration.

Dev

In dev mode, the CLI detects the existence of proxy configuration in your source config directory and starts the local proxy server instance alongside the runtime.

$ lwr dev
Running LWR Proxy at: http://localhost:3000
Running LWR at: http://localhost:3001 | mode: dev
Application site is available at: http://localhost:3000

Build

When building a site with lwr build, the CLI stages any source proxy configuration into the built distribution alongside the other site runtime resources.

Preview

Like Dev, previewing a site containing a proxy configuration starts the local proxy server instance alongside the application runtime.

$ $ lwr preview
Running LWR Proxy at: http://localhost:3000
Running LWR at: http://localhost:3001 | mode: prod-compat
Application site is available at: http://localhost:3000

The development proxy server is also enabled for previewing sites built for a specific target (e.g. mrt).

$ lwr preview --target=mrt --buildDir mrt-preview
Running LWR Proxy at: http://localhost:3000
LWR services have been started on: http://localhost:3000
Starting the DevServer on http://localhost:3001