feat(ui): add StackBlitzPreview and migrate examples directory from webpack.js.org - #248
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
documentation
moshams272
changed the title
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
e160d41 to
76b5a11
Compare
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Included review availability: Your plan includes up to 3 reviews per rolling hour; 1 remains after this review. WalkthroughAdded a Webpack getting-started example with Lodash and build scripts. Added a two-application Module Federation example with React, Webpack, Lerna, and runtime remote loading. Added Merge Risk: 🟡 Moderate · up to The migrated getting-started example may not render through its documented serve flow because the required HTML entry remains unresolved; merge should wait for this issue to be fixed or explicitly accepted. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
examples/module-federation/app1/src/App.js (1)
17-19: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winHandle rejected remote loads with an Error Boundary.
The current fallback covers only the pending load. If
remoteEntry.jsor the exposed module fails,React.lazysends the rejection to the nearest Error Boundary instead of thisSuspensefallback. (react.dev)If the application root does not already provide an Error Boundary, add one around
RemoteAppso the preview shows a recoverable error.eslint.config.mjs (1)
32-32: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winKeep runnable examples covered by validation.
The
examples/directory now bypasses the repository's ESLint checks. If the ignore is required for imported example style, add a separate CI smoke check that installs and builds each preview example. Otherwise, narrow the ignore pattern. This prevents the documentation from advertising an example that cannot compile.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 4d49e55d-1f1b-41da-bd83-221202eb10ab
⛔ Files ignored due to path filters (2)
examples/getting-started/dist/index.htmlis excluded by!**/dist/**public/assets/open-in-stackblitz-button.svgis excluded by!**/*.svg
📒 Files selected for processing (25)
components/StackBlitzPreview/index.jsxcomponents/StackBlitzPreview/index.module.csseslint.config.mjsexamples/getting-started/README.mdexamples/getting-started/package.jsonexamples/getting-started/src/index.jsexamples/getting-started/webpack.config.jsexamples/module-federation/README.mdexamples/module-federation/app1/package.jsonexamples/module-federation/app1/public/index.htmlexamples/module-federation/app1/src/App.jsexamples/module-federation/app1/src/bootstrap.jsexamples/module-federation/app1/src/index.jsexamples/module-federation/app1/webpack.config.jsexamples/module-federation/app2/package.jsonexamples/module-federation/app2/public/index.htmlexamples/module-federation/app2/src/App.jsexamples/module-federation/app2/src/bootstrap.jsexamples/module-federation/app2/src/index.jsexamples/module-federation/app2/webpack.config.jsexamples/module-federation/lerna.jsonexamples/module-federation/package.jsonpages/guides/getting-started/concepts/module-federation.mdpages/guides/getting-started/index.mdscripts/html/doc-kit.config.mjs
Included review availability: Your plan includes up to 3 reviews per rolling hour; 2 remain after this review.
| module.exports = { | ||
| entry: './src/index.js', | ||
| output: { | ||
| filename: 'main.js', | ||
| path: path.resolve(__dirname, 'dist'), | ||
| }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Emit an HTML entry for the example.
This configuration emits only main.js. The start script serves dist, but the example contains no HTML document that loads main.js. Following the documented build-and-start flow therefore cannot render the application.
Add an index.html entry and include it in the build, or configure HtmlWebpackPlugin with an HTML template.
| window.app2Url = 'http://localhost:3002'; | ||
|
|
||
| // Use dynamic import here to allow webpack to interface with module federation code | ||
| import('./bootstrap'); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/sh
set -eu
rg -n -C 4 'app2Url|3002|remoteEntry\.js' examples/module-federationRepository: webpack/webpack-doc-kit
Length of output: 3504
🏁 Script executed:
#!/bin/sh
set -eu
printf '%s\n' '--- module-federation files ---'
git ls-files examples/module-federation
printf '%s\n' '--- relevant source and configuration ---'
sed -n '1,80p' examples/module-federation/app1/src/index.js
sed -n '1,100p' examples/module-federation/app1/webpack.config.js
sed -n '1,80p' examples/module-federation/app2/webpack.config.js
sed -n '1,80p' examples/module-federation/README.md
printf '%s\n' '--- hosting and preview configuration references ---'
rg -n -i 'stackblitz|webcontainer|codesandbox|preview|3001|3002|app2Url' \
--glob '!node_modules' --glob '!dist' --glob '!build' .Repository: webpack/webpack-doc-kit
Length of output: 6558
🌐 Web query:
StackBlitz WebContainers browser preview exposed service URL localhost port forwarding runtime domain
💡 Result:
In StackBlitz WebContainers, port forwarding is handled automatically by the runtime [1][2]. When a development server starts inside a WebContainer, it does not bind to the host machine's localhost; instead, the WebContainer runtime detects the port activity and exposes the service through a unique, browser-accessible preview URL [1][2]. Key mechanisms of this system include: 1. Automatic Port Forwarding: When a process inside the container opens a network port (e.g., an Express server on port 3000), the WebContainer runtime captures this event [3][2]. 2. URL Generation: The runtime generates a secure, unique URL in a format similar to https://{unique-id}.webcontainer-api.io [1][2]. These URLs are designed to be used within the browser, typically by injecting them into an iframe for previewing [1][2]. 3. WebContainer API Events: Developers can monitor these services using the WebContainer API's 'server-ready' event, which provides the port number and the corresponding preview URL [3][4]. 4. HostURL Resolution: For applications that need to reference internal services, the @webcontainer/env package provides a HostURL utility [5]. This utility resolves localhost references within the container to the appropriate WebContainer-specific hostname (e.g., http://blitz--1234.local.webcontainer.io), allowing code to function seamlessly regardless of whether it is running inside the container or on a standard local environment [5]. Because these URLs are proxied through StackBlitz infrastructure to ensure browser compatibility and security (including CORS support), they cannot typically be accessed from outside the browser environment where the container is running [2][6]. Accessing services from the parent window or between different iframes is typically handled via standard web messaging, such as window.postMessage [7].
Citations:
- 1: https://deepwiki.com/stackblitz-labs/bolt.diy/6.1-webcontainer-api-and-lifecycle
- 2: https://deepwiki.com/stackblitz-labs/bolt.diy/5.4-live-preview-system
- 3: https://github.com/stackblitz/webcontainer-docs/blob/4770ebe5/docs/api.md
- 4: https://www.npmjs.com/package/@webcontainer/api
- 5: https://registry.npmjs.org/%40webcontainer%2Fenv
- 6: Non-random preview urls stackblitz/webcontainer-core#767
- 7: How to communicate between the host and the container? stackblitz/webcontainer-core#1617
🏁 Script executed:
#!/bin/sh
set -eu
python3 - <<'PY'
from pathlib import Path
import re
app1 = Path("examples/module-federation/app1/src/index.js").read_text()
app1_config = Path("examples/module-federation/app1/webpack.config.js").read_text()
app2_config = Path("examples/module-federation/app2/webpack.config.js").read_text()
url = re.search(r"window\.app2Url\s*=\s*['\"]([^'\"]+)", app1).group(1)
remote = re.search(r"app2:\s*['\"]app2@\[app2Url\]([^'\"]+)", app1_config).group(1)
app2_port = re.search(r"\bport:\s*(\d+)", app2_config).group(1)
filename = re.search(r"filename:\s*['\"]([^'\"]+)", app2_config).group(1)
constructed = url.rstrip("/") + remote
print(f"app2Url={url}")
print(f"remotePath={remote}")
print(f"app2Port={app2_port}")
print(f"remoteFilename={filename}")
print(f"constructedRemote={constructed}")
print(f"matchesConfiguredPort={url.endswith(':' + app2_port)}")
print(f"matchesRemoteFilename=({remote.rsplit('/', 1)[-1]} == {filename})")
PYRepository: webpack/webpack-doc-kit
Length of output: 401
🌐 Web query:
site:developer.stackblitz.com WebContainers server-ready event url localhost ports browser preview
💡 Result:
In WebContainers, there is no direct "server-ready" event that provides a static URL for localhost ports, because the preview URL is determined dynamically by the runtime environment [1]. Key points regarding WebContainers, server ports, and browser previews: 1. Dynamic Preview URL: In a WebContainers environment, you cannot predict the preview URL ahead of time [1]. If you are using the StackBlitz JavaScript SDK to control a virtual machine, the property vm.preview.origin will return null until a web server is actually running [1]. You should use the method vm.preview.getUrl to retrieve the active preview URL once the server has started [1]. 2. Browser Preview Behavior: When a project starts a web server (e.g., via npm start), WebContainers automatically exposes the server to a browser preview [2][3]. If the preview fails to connect or appears unresponsive, the recommended troubleshooting step is to check the terminal for an active dev server process [2]. If you accidentally close the preview panel, you can reopen it by clicking the Ports in Use icon (represented by a plug) in the editor's left-hand navigation bar [2][3]. 3. Localhost Handling: WebContainers do not map servers to standard localhost ports on your machine [1][4]. Instead, they use dynamic subdomains (e.g., xyz.local.webcontainer.io) [2][4]. Because these environments rely on specific browser features like SharedArrayBuffer and cross-origin isolation, you may encounter connectivity issues in certain browsers if proper cookie or popup permissions are not configured [4][5]. If a preview fails to connect in a split-screen view, opening it in a separate browser window is often a recommended workaround [5]. 4. Configuration: You can control how scripts run on load using the startScript URL parameter (e.g.,?startScript=dev) [6][7], which helps ensure your server starts automatically when the project environment is initialized [6].
Citations:
- 1: https://developer.stackblitz.com/platform/api/javascript-sdk-vm
- 2: https://developer.stackblitz.com/codeflow/working-in-codeflow-ide
- 3: https://developer.stackblitz.com/guides/user-guide/ide-whats-on-your-screen
- 4: https://developer.stackblitz.com/platform/webcontainers/browser-config
- 5: https://developer.stackblitz.com/platform/webcontainers/browser-support
- 6: https://developer.stackblitz.com/platform/webcontainers/project-config
- 7: https://developer.stackblitz.com/guides/integration/embedding
Use the exposed app2 URL in StackBlitz. window.app2Url always constructs http://localhost:3002/remoteEntry.js, but WebContainers expose ports through dynamic preview URLs. Keep the localhost URL as the local-development fallback.
Source: MCP tools
Trying to understand why Socket believes we use |
|
@ovflowd socket probably thinks that all the dependencies from the examples are added, but they aren't |
That adds quite the noise :/ |
Yeah, I just investgated it and found that in |
Before pushing this PR, I actually thought about why we should add examples dir in our repo. The So, WDUT?! |
|
I'm not sure if we need examples in this repo, or at all, nothing reads then, right? |
Just the const url = `https://stackblitz.com/github/webpack/webpack-doc-kit/tree/main/examples/${example}`;to |
3 participants
Summary
This PR replaces TODOs that related to
StackBlitzPreviewafter adding it as component with the same design from webpack.js.org with our colors and migrates the examples directory from webpack.js.orgSummary by CodeRabbit
New Features
Documentation