Add WebContainer-based branch preview deployments#5475
Open
dimitrieh wants to merge 2 commits intonode-red:masterfrom
Open
Add WebContainer-based branch preview deployments#5475dimitrieh wants to merge 2 commits intonode-red:masterfrom
dimitrieh wants to merge 2 commits intonode-red:masterfrom
Conversation
Deploy branch previews to Netlify with a WebContainer-powered loader that boots Node-RED in the browser. Includes GitHub deployment status integration for PR visibility.
dimitrieh
force-pushed
the
preview-deploy
branch
from
9ea33c9 to
041ea5d
Compare
Contributor
Author
|
@knolleary please have a look here. This enabled deployment previews using webcontainers: https://preview-deploy--deft-genie-456e79.netlify.app/ All details to set this up right for this repo in the PR body. Also, no pollution of the repository by keeping everything in the GitHub workflow file. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed changes
Adds a GitHub Actions workflow that deploys live branch previews to Netlify. Each branch gets a URL where Node-RED boots and runs entirely in the browser using WebContainer. Deployments surface natively in the PR UI via GitHub's Deployments API — no bot comments.
How it works
@webcontainer/snapshotnpm ci → build → start, and loads the Node-RED editor in an iframeThe workflow triggers on every push, so each commit gets its own deployment. This could be scoped to only deploy the latest commit per branch, or per PR, depending on preference.
External dependencies
@webcontainer/api@1.6.1loaded from unpkg CDN at runtime in the browser (https://unpkg.com/@webcontainer/api@1.6.1?module)@webcontainer/snapshotinstalled during CI to generate the filesystem snapshotnetlify-cliinstalled during CI for deploymentDemo
Working example on my fork:
Setup required
To enable this on the
node-redorg, two repository secrets are needed:NETLIFY_AUTH_TOKENNETLIFY_SITE_IDBranch URL structure
With the current Netlify CLI deploy approach:
site-name.netlify.app, or custom domain if configured)branch-name--site-name.netlify.appTo use a custom Node-RED domain with per-branch subdomains (e.g.,
feature-x.preview.nodered.org), switch from CLI deploys to Netlify's Git-based branch deploy integration and add a wildcard DNS record (*.preview.nodered.org→ Netlify).Fork PR considerations
Workflows triggered by
pull_requestfrom forks don't have access to repository secrets. To support external contributor previews, either:pull_request_targettrigger (runs with base repo secrets, requires security review)Checklist
npm run testto verify the unit tests pass