expo / expo/snack

snack-sdk web embedding only works on localhost

Open
#535 7 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
508
Forks
178
Avg merge
5h 7m
Merged PRs (30d)
5

Description

Summary

We're using the expo snack-sdk package to display a preview of expo apps created using a GUI.

We're having success with ios/android expo go apps using the url, as well as web using the webPreviewURL in an iframe on localhost - but unfortunately we can't get the iframe to load in production from a domain other than localhost.

import { Snack } from 'snack-sdk';

function MyComponent() {
  const webPreviewRef = React.useRef(null);

  const [snack] = useState(new Snack({
    online: true,
    files: {
      'App.js': {
        type: 'CODE',
        contents: `
  import * as React from 'react';
  import { View, Text } from 'react-native';
  
  export default () => (
    <View style={{flex: 1, justifyContent: 'center'}}>
      <Text style={{fontSize: 20, textAlign: 'center'}}>
        Hello Snack!
      </Text>
    </View>
  );
`}
    }
  }));

  const { url, webPreviewURL } = snack.getState();

  return (
    <iframe
      ref={(c) => (webPreviewRef.current = c?.contentWindow ?? null)}
      src={webPreviewURL}
      allow="geolocation; camera; microphone"
    />
  );
}

How can we get the webPreviewURL to load in an iframe in a production environment at a url other than localhost?

What platform(s) does this occur on?

Web

SDK Version

49.0.0

Reproducible demo or steps to reproduce from a blank project

https://codesandbox.io/s/snack-sample-ls0zrt

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the snack-sdk webPreviewURL entry point and reproduce the iframe behavior using the linked CodeSandbox example, first on localhost and then from a non-localhost production domain. Trace why the web preview is rejected or fails to load in the latter context; done means the preview loads in an iframe outside localhost while preserving the demonstrated web behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.