WebContainers

https://github.com/stackblitz/webcontainer-core
Admin
WebContainers is a revolutionary technology that allows running Node.js environments and other...
Tokens:3,704
Snippets:13
Trust Score:9.5
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### WebContainer .stackblitzrc Configuration for Auto-Execution

Source: https://context7.com/stackblitz/webcontainer-core/llms.txt

This markdown snippet explains how to configure a `.stackblitzrc` file to automatically execute a command when a StackBlitz project starts. This is useful for creating minimal reproducible examples by ensuring the erroneous command is run automatically, simplifying the debugging process for WebContainer compatibility issues.

```markdown
# Useful Bug Reports for WebContainer issues

## Try Locally
If a project is not working as expected, it might be due to an incompatibility with WebContainer. However, please do check that the project runs as expected in your local machine, with your Node installation. If it does run without issue locally, we are much more certain that we might be after a WebContainer compat issue.

For some types of issues, it might not make sense to perform this verification, e.g. if you have an issue with the editor.

## Auto-execute Erroneous Command
We always ask you to include a link to a blitz that shows the erroneous behavior. You can make things even easier to reproduce if you configure it so the command that triggers the error is run automatically on start. You can do that by including a [custom `.stackblitzrc` configuration file](https://developer.stackblitz.com/docs/platform/project-config).
```

--------------------------------

### Bug Report YAML Template for WebContainer Issues

Source: https://context7.com/stackblitz/webcontainer-core/llms.txt

A structured YAML template designed for GitHub issues to collect comprehensive bug report information for the WebContainer project. It enforces mandatory fields like description, reproduction link, steps to reproduce, expected behavior, and local verification, ensuring high-quality issue submissions.

```yaml
name: "Bug report"
description: Create a report to help us improve
body:
  - type: markdown
    attributes:
      value: |
        Thank you for reporting an issue :pray:.

        Please read our [guidelines to report issues](https://github.com/stackblitz/webcontainer-core/blob/main/repro.md).

        This issue tracker is for bugs and issues found within WebContainer.
        If you experience issues unrelated to WebContainer, please file an issue in our StackBlitz core repo. https://github.com/stackblitz/core

        The more information you fill in, the better we can help you.
  - type: textarea
    id: description
    attributes:
      label: Describe the bug
      description: Provide a clear and concise description of what you're running into.
    validations:
      required: true
  - type: input
    id: link
    attributes:
      label: Link to the blitz that caused the error
      description: Please make sure the blitz is not private. Do not delete it after reporting!
    validations:
      required: true
  - type: textarea
    id: steps
    attributes:
      label: Steps to reproduce
      description: Describe the steps we have to take to reproduce the behavior.
      placeholder: |
        1. Go to '...'
        2. Click on '....'
        3. Scroll down to '....'
        4. See error
    validations:
      required: true
  - type: textarea
    id: expected
    attributes:
      label: Expected behavior
      description: Provide a clear and concise description of what you expected to happen.
    validations:
      required: true
  - type: checkboxes
    id: local-verification
    attributes:
      label: Parity with Local
      description: Does the issue appear only when running the WebContainer project? Or does it also appear locally?
      options:
        - label: I have [run the project in my local machine](https://github.com/stackblitz/webcontainer-core/blob/main/repro.md#try-locally) and I could not reproduce the issue.
          required: true
  - type: textarea
    id: screenshots
    attributes:
      label: Screenshots
      description: If applicable, add screenshots to help explain your problem.
  - type: textarea
    id: platform
    attributes:
      label: Platform
      value: |
        - OS: [e.g. macOS, Windows, Linux]
        - Browser: [e.g. Chrome, Safari, Firefox]
        - Version: [e.g. 91.1]
  - type: textarea
    id: additional
    attributes:
      label: Additional context
      description: Add any other context about the problem here.

```

--------------------------------

### Check StackBlitz Project Accessibility via REST API

Source: https://context7.com/stackblitz/webcontainer-core/llms.txt

Demonstrates how to use a HEAD request to the StackBlitz API to check if a project is public and accessible. This is useful for validating reproduction links in bug reports. The response indicates success with HTTP 200 OK or failure with HTTP 404 Not Found.

```bash
# Check if a StackBlitz project exists and is public
curl -I https://stackblitz.com/api/projects/my-project-slug

# Expected response for public project:
# HTTP/2 200 OK
# content-type: application/json
# ...

# Expected response for private/non-existent project:
# HTTP/2 404 Not Found
# ...
```

```javascript
// Example usage in JavaScript
const checkProject = async (slug) => {
  const response = await fetch(`https://stackblitz.com/api/projects/${slug}`, {
    method: 'HEAD',
  });

  if (response.ok) {
    console.log(`Project ${slug} is public and accessible`);
    return true;
  } else {
    console.log(`Project ${slug} is not accessible (private or doesn't exist)`);
    return false;
  }
};

// Test with a project slug
checkProject('angular-ivy-example').then(exists => {
  console.log('Project exists:', exists);
});
```

--------------------------------

### GitHub Actions Workflow: Validate Project Links

Source: https://context7.com/stackblitz/webcontainer-core/llms.txt

This YAML workflow defines a GitHub Action that runs on issue events ('opened', 'edited'). It uses the 'actions/github-script' action to execute JavaScript code that parses the issue body for StackBlitz or Bolt project links, checks their accessibility, and adds/removes a 'needs reproduction' label accordingly. It handles both direct StackBlitz links and GitHub repository links for StackBlitz.

```yaml
on:
  issues:
    types: [opened, edited]
jobs:
  checkProject:
    if: "${{ contains(github.event.issue.body, 'Describe the bug') }}"
    runs-on: ubuntu-latest
    steps:
      - uses: actions/github-script@v7
        name: Check for StackBlitz or Bolt reproduction link
        with:
          script: |
            const issue = await github.rest.issues.get({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
            });

            const projectInfo = parseProjectInfo(issue.data.body ?? '');

            if (!projectInfo) {
              await comment(issue.data, 'We noticed that you did not provide a StackBlitz or Bolt reproduction link. Please update the issue and add a link to a public project.');
              return;
            }

            const projectExists = await checkProject(projectInfo);

            if (!projectExists) {
              await comment(issue.data, 'We noticed that the project you shared is not public. Please change the visibility of the project to either secret or public.');
              return;
            }

            await removeLabel();

            function parseProjectInfo(comment) {
              const reproRegex = /https:\/\/(?:stackblitz\.com|bolt\.new)/(?:(?:~|c)/)?(?:edit/)?(?<slug>[a-zA-Z0-9-]+)/i;
              const { slug } = comment.match(reproRegex)?.groups || {};

              if (!slug) {
                return null;
              }

              if (slug === 'github') {
                const githubRegex = /https:\/\/stackblitz\.com\/(?:~\/(?:github\.com|github_project)|github)\/(?<owner>[\w\-_]+)\/(?<repo>[\w\-_]+)/i;
                const { owner, repo } = comment.match(githubRegex)?.groups || {};

                if (owner && repo) {
                  return { type: 'github', owner, repo };
                }
              }

              return { type: 'stackblitz', slug };
            }

            async function checkProject(projectInfo) {
              if (projectInfo.type === 'github') {
                const { owner, repo } = projectInfo;
                try {
                  const response = await github.rest.repos.get({ owner, repo });
                  return response.status === 200;
                } catch {
                  return false;
                }
              }

              if (projectInfo.type === 'stackblitz') {
                const { slug } = projectInfo;
                const response = await fetch(`https://stackblitz.com/api/projects/${slug}`, {
                  method: 'HEAD',
                });
                return response.ok;
              }

              return false;
            }

            async function comment(issue, body) {
              if (issue.labels.some((label) => label.name === 'needs reproduction')) {
                return;
              }

              await Promise.allSettled([
                github.rest.issues.createComment({
                  issue_number: context.issue.number,
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  body,
                }),
                github.rest.issues.addLabels({
                  issue_number: context.issue.number,
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  labels: ['needs reproduction'],
                })
              ]);
            }

            async function removeLabel() {
              await github.rest.issues.removeLabel({
                issue_number: context.issue.number,
                owner: context.repo.owner,
                repo: context.repo.repo,
                name: 'needs reproduction',
              });
            }

```

--------------------------------

### Check StackBlitz Project Accessibility

Source: https://context7.com/stackblitz/webcontainer-core/llms.txt

This endpoint allows you to programmatically check if a StackBlitz project exists and is publicly accessible. It uses the HTTP HEAD method, which is efficient as it only retrieves the headers of the response, not the full content.

```APIDOC
## HEAD /api/projects/{slug}

### Description
Checks if a StackBlitz project with the given slug exists and is publicly accessible. This is useful for validating reproduction links.

### Method
HEAD

### Endpoint
`https://stackblitz.com/api/projects/{slug}`

### Parameters
#### Path Parameters
- **slug** (string) - Required - The unique identifier (slug) of the StackBlitz project.

### Request Example
```bash
curl -I https://stackblitz.com/api/projects/my-project-slug
```

### Response
#### Success Response (200 OK)
Indicates the project exists and is public.
- **content-type** (string) - Typically `application/json`.

#### Error Response (404 Not Found)
Indicates the project is private or does not exist.

#### Response Example (Success)
```
HTTP/2 200 OK
content-type: application/json
...
```

#### Response Example (Not Found)
```
HTTP/2 404 Not Found
...
```

### Usage in JavaScript
```javascript
const checkProject = async (slug) => {
  const response = await fetch(`https://stackblitz.com/api/projects/${slug}`, {
    method: 'HEAD',
  });

  if (response.ok) {
    console.log(`Project ${slug} is public and accessible`);
    return true;
  } else {
    console.log(`Project ${slug} is not accessible (private or doesn't exist)`);
    return false;
  }
};

// Test with a project slug
checkProject('angular-ivy-example').then(exists => {
  console.log('Project exists:', exists);
});
```
```
Tokens:
Raw