Web Static Web Apps field-manual-complete

Preview environment

A preview environment is a temporary copy of a Static Web Apps site used to review changes before they become production. When a pull request is opened, Azure can build the branch and publish it to a unique URL. Reviewers, testers, designers, and product owners can click through the changed site, run checks, and compare behavior against production. It is not a secret sandbox by default. Anyone who has the preview URL may be able to open it, so sensitive content and test credentials need careful handling.

Aliases
No aliases mapped yet
Difficulty
intermediate
CLI mappings
5
Last verified
2026-05-20

Microsoft Learn

An Azure Static Web Apps preview environment is a temporary, fully functional staging environment created from a pull request or named environment. It lets teams review site changes, API behavior, configuration, and tests before merging to production, and pull-request environments are deleted when the pull request closes.

Microsoft Learn: Review pull requests in pre-production environments2026-05-20

Technical context

In Azure architecture, preview environments live inside Azure Static Web Apps as pre-production environments tied to pull requests or named deployment targets. They connect source control, GitHub Actions or Azure DevOps workflows, build configuration, environment variables, optional managed Functions APIs, authentication settings, and staticwebapp.config.json behavior. The environment has its own URL and lifecycle, but it still belongs to the same static web app resource and subscription. Operators inspect it through Static Web Apps environment commands, portal environment views, deployment logs, and repository workflow output.

Why it matters

Preview environments matter because front-end and API changes often look safe in code review but fail when built, routed, authenticated, or tested as a real hosted site. They give teams a working URL for design review, accessibility checks, acceptance tests, link validation, configuration verification, and stakeholder signoff before production. They also reduce pressure to use production as the first realistic test. The tradeoff is exposure and sprawl. Pull-request environments can be reachable by URL, may inherit staging settings, and can accumulate if workflows are mismanaged. Teams should treat preview environments as production-adjacent review spaces, not private storage for secrets or unfinished sensitive content.

Where you see it

Signals, screens, and Azure surfaces where this term usually becomes operational.

Signal 01

A GitHub pull request comment includes the generated Static Web Apps preview URL, letting reviewers open the staged branch, confirm content, and run checks before merge.

Signal 02

The Static Web Apps Environments blade lists production and preview environments, their names, hostnames, source branch references, deployment state, and cleanup targets for operators after reviews.

Signal 03

Azure CLI output from az staticwebapp environment list shows environment names, default hostnames, linked branches, creation details, and the preview instance selected for deletion during cleanup.

When this becomes relevant

Specific situations where this term helps solve real Azure design, operations, migration, security, reliability, cost, or governance problems.

  • Review visual, routing, and content changes from a pull request using a real hosted URL before production merge.
  • Run automated end-to-end tests against the generated preview URL instead of testing only local builds.
  • Validate Static Web Apps authentication, fallback routes, and API configuration changes before users see them.
  • Give product, design, legal, or accessibility reviewers a stable link for signoff without sharing local developer machines.
  • Clean up stale named environments that consume preview capacity or confuse release owners.

Real-world case studies

Different enterprise-style examples that show the term being used to hit measurable objectives.

Case study 01

EdTech team reviews course-launch pages safely

Scenario, objectives, solution, measured impact, and takeaway.

Scenario

An EdTech provider updated hundreds of landing pages before a university semester began. Designers and faculty reviewers needed to see the real hosted site, but the team did not want draft course content pushed to production.

Business/Technical Objectives
  • Give reviewers a stable URL for each course-content pull request.
  • Run accessibility and link checks before publishing.
  • Keep production API credentials out of review environments.
  • Reduce last-minute content defects during launch week.
Solution Using Preview environment

The delivery team configured Azure Static Web Apps pull-request preview environments for the documentation site. Each pull request generated a preview URL through the repository workflow. Nonproduction API settings were configured for the Static Web Apps backend, and the team used Azure CLI to list environments, confirm hostnames, and clean stale previews after review. Accessibility tests, broken-link scans, and visual comparisons ran against the preview URL. Faculty reviewers approved pages from the pull-request comment rather than relying on screenshots or local builds.

Results & Business Impact
  • Broken links found after production publishing dropped by 72 percent.
  • Accessibility fixes were completed two days earlier than the prior semester launch.
  • No production API keys were exposed in preview configuration.
  • Reviewer signoff time fell from five business days to two business days.
Key Takeaway for Glossary Readers

Preview environments turn a pull request into a real reviewable site, which catches content, routing, and accessibility issues before production.

Case study 02

Museum campaign site validates sponsor pages

Scenario, objectives, solution, measured impact, and takeaway.

Scenario

A national museum built a seasonal campaign site with sponsor logos, ticket links, and timed content. External sponsors needed to approve pages, but the marketing team could not expose unfinished production pages on the main site.

Business/Technical Objectives
  • Provide campaign reviewers with controlled nonproduction URLs.
  • Verify ticketing links and redirect rules before launch.
  • Avoid accidental publication of sponsor pages before approval.
  • Keep stale review environments from confusing the release calendar.
Solution Using Preview environment

The web team used named Azure Static Web Apps preview environments for campaign branches. The workflow deployed each branch into a separate preview environment with staging ticketing endpoints and a staticwebapp.config.json file matching production routes. Azure CLI checks listed active environments each morning and exported hostnames to the release tracker. When sponsors finished review, operators deleted the named preview after confirming the pull request and approval record were complete. The final production merge used the same reviewed branch.

Results & Business Impact
  • Sponsor approval cycles shortened from nine days to four days.
  • Redirect defects were found in preview instead of after ticket sales opened.
  • Four stale campaign environments were cleaned up before launch week.
  • Marketing avoided an emergency rollback during the public campaign announcement.
Key Takeaway for Glossary Readers

Named preview environments are useful when review ownership, branch naming, and cleanup are deliberately built into the release process.

Case study 03

Industrial IoT dashboard tests role-based routes

Scenario, objectives, solution, measured impact, and takeaway.

Scenario

An industrial IoT vendor shipped dashboard updates for factory supervisors. A route change accidentally hid device-alert pages in local testing, so the team needed hosted previews that exercised authentication and API behavior.

Business/Technical Objectives
  • Validate route fallback and authentication rules before merge.
  • Run smoke tests against backend API settings in each preview.
  • Give sales engineers a safe demo link for pending dashboard changes.
  • Prevent stale previews from using outdated device-simulator endpoints.
Solution Using Preview environment

Engineering configured Static Web Apps preview environments for pull requests and added end-to-end tests that consumed the generated preview URL. The staticwebapp.config.json file was reviewed in every routing-related pull request. API application settings used a device simulator instead of production telemetry. Operators used Azure CLI to show environment hostnames, list active previews, and remove stale named environments after demo windows closed. Application Insights tracked API failures and route errors during preview test runs.

Results & Business Impact
  • Route-related production incidents fell from three per quarter to zero in the next release cycle.
  • Automated preview smoke tests caught two authentication regressions before merge.
  • Demo preparation time dropped by 40 percent because sales engineers used stable preview URLs.
  • Stale simulator endpoints were removed from all active previews before customer demonstrations.
Key Takeaway for Glossary Readers

Preview environments are strongest when they validate hosted routing, API settings, and authentication behavior that local builds often miss.

Why use Azure CLI for this?

As an Azure engineer with ten years of web delivery experience, I use Azure CLI for preview environments because review links and portal screenshots are not enough operational evidence. CLI lets me list environments, show the exact preview name and hostname, compare production and staging state, and delete stale environments during cleanup. That matters when multiple pull requests are open and a tester says the wrong build is being reviewed. CLI also keeps environment checks scriptable in release gates, so teams can verify preview existence, deployment state, and app settings without manually clicking through every Static Web Apps resource. It prevents stale reviews.

CLI use cases

  • List all production and preview environments for a Static Web Apps resource before triaging a missing pull-request link.
  • Show one preview environment and capture its hostname, environment name, status, and branch reference for release evidence.
  • Delete a stale named preview environment after confirming the pull request, test window, and review record are closed.
  • List API application settings for the static app before investigating why preview backend calls fail.
  • Inspect the Static Web Apps resource and repository metadata when deployment workflow routing points to the wrong app.

Before you run CLI

  • Confirm tenant, subscription, resource group, static app name, repository, branch, pull request, and expected preview environment name.
  • Use read-only list or show commands before deleting a preview environment because deletion can remove an active review target.
  • Check hosting plan limits so stale preview environments do not block new pull-request environments from being created.
  • Avoid printing secrets from app settings in shared logs, especially when preview APIs use staging connection strings.
  • Capture JSON output for environment name, hostname, status, source branch, and timestamps when documenting release evidence.

What output tells you

  • Environment name and hostname identify which preview URL belongs to a pull request, named environment, or production deployment.
  • Status fields show whether the environment is available, still deploying, failed, or missing from the Static Web Apps resource.
  • Source branch or deployment metadata helps detect when reviewers are testing the wrong branch or stale commit.
  • App settings output confirms whether preview APIs have the expected nonproduction values without exposing them unnecessarily.
  • Environment counts help operators determine whether plan limits or stale previews are blocking new review environments.

Mapped Azure CLI commands

Preview environment CLI operations

direct
az staticwebapp environment list --name <static-app-name> --resource-group <resource-group>
az staticwebapp environmentdiscoverWeb
az staticwebapp environment show --name <static-app-name> --environment-name <environment-name> --resource-group <resource-group>
az staticwebapp environmentdiscoverWeb
az staticwebapp environment delete --name <static-app-name> --environment-name <environment-name> --resource-group <resource-group> --yes
az staticwebapp environmentremoveWeb
az staticwebapp appsettings list --name <static-app-name> --resource-group <resource-group>
az staticwebapp appsettingsdiscoverWeb
az staticwebapp show --name <static-app-name> --resource-group <resource-group> --query "{name:name,defaultHostname:defaultHostname,repositoryUrl:repositoryUrl,branch:branch}"
az staticwebappdiscoverWeb

Architecture context

I design preview environments as part of the delivery architecture, not as a casual developer convenience. The source branch, workflow file, build output path, API settings, authentication rules, and configuration file all determine what reviewers actually see. For GitHub pull requests, the environment lifecycle is naturally tied to the pull request; for Azure DevOps, named environments often need more deliberate workflow design. The architecture should define who may open preview URLs, which variables are safe for staging, how automated tests consume the preview URL, and when cleanup happens. Good teams make preview review a release gate with clear evidence. Treat it as release infrastructure.

Security

Security impact is direct because preview environments can expose staged content through a URL even when the source repository is private. A preview site should never contain production secrets, unreleased customer data, embargoed pages, or privileged API settings unless access controls and risk are explicitly reviewed. Environment variables for Static Web Apps APIs are encrypted at rest, but they still need least-privilege values and separation from production credentials. Authentication and authorization rules in staticwebapp.config.json must be tested in the preview URL. Teams should also control who can trigger workflows, view deployment logs, and delete or promote environments. Review public previews deliberately.

Cost

Cost impact is usually indirect but still worth governing. Preview environments consume plan capacity and have limits based on the Static Web Apps hosting plan. On Free plans, the number of pre-production environments is limited, so abandoned previews can block new reviews. On paid plans, preview workflows can increase build minutes, API execution, storage, and operations effort. The bigger cost is release friction: broken previews, stale branches, and unclear ownership waste reviewer time. FinOps and platform teams should track environment counts, workflow frequency, test duration, and whether paid plan features are needed for reliable parallel previews. Review limits during planning.

Reliability

Reliability impact is indirect but practical. A preview environment does not make production more resilient by itself, but it catches build, routing, configuration, authentication, and API integration failures before they reach users. It also gives automated tests a stable URL for each pull request, which reduces release surprises. Reliability problems appear when previews differ too much from production, use missing environment variables, or skip API paths that matter. Operators should verify that workflow triggers, build artifacts, Functions APIs, fallback routes, and configuration files match the intended production behavior. Pull-request cleanup also matters so stale environments do not confuse testing. Verify cleanup after review.

Performance

Performance impact is indirect because a preview environment is mainly a release-validation surface, not a production scale feature. It helps teams test route loading, asset size, API latency, authentication redirects, and front-end bundle changes before production. Results should be interpreted carefully because preview traffic, cache state, custom domains, and backend configuration may not match production exactly. Still, performance regressions are easier to catch when every pull request gets a hosted URL. Teams should run Lighthouse, synthetic checks, API smoke tests, and dependency timing against the preview URL, then compare results with production baselines before merging. Record useful baselines before merge.

Operations

Operators manage preview environments by listing Static Web Apps environments, checking deployment workflow status, reviewing generated URLs, validating environment variables, and cleaning up stale named environments. Daily work often includes confirming why a pull-request preview did not appear, whether a URL points to the expected branch, and whether backend API settings are present. CLI is useful for inventory and evidence, while repository logs explain build and deploy failures. Runbooks should define safe deletion, naming patterns, maximum environment counts per hosting plan, review ownership, and what tests must pass before a preview change can be merged. Assign cleanup owners before merge.

Common mistakes

  • Putting sensitive draft content or production secrets in a preview environment because the repository itself is private.
  • Assuming Azure DevOps pull requests automatically behave like GitHub previews without configuring named environments correctly.
  • Deleting a preview environment while testers, accessibility reviewers, or product owners are still using its URL.
  • Testing only static pages and forgetting that backend API application settings may differ by environment.
  • Letting stale named environments consume plan limits and then misdiagnosing new pull-request deployment failures.