snack-sdk web embedding only works on localhost
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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