diff --git a/embark-ui/src/components/FiddleLayout.js b/embark-ui/src/components/FiddleLayout.js
index aeb0d4b66..fc95306b0 100644
--- a/embark-ui/src/components/FiddleLayout.js
+++ b/embark-ui/src/components/FiddleLayout.js
@@ -4,21 +4,25 @@ import {
Grid
} from "tabler-react";
+import ApplicationPreviewContainer from '../containers/ApplicationPreviewContainer';
import TextEditorContainer from '../containers/TextEditorContainer';
import FileExplorerContainer from '../containers/FileExplorerContainer';
class FiddleLayout extends React.Component {
render() {
return (
-
-
- Fiddle
-
-
-
-
-
-
+
+
+
+ Fiddle
+
+
+
+
+
+
+
+
);
}
}
diff --git a/embark-ui/src/containers/ApplicationPreviewContainer.js b/embark-ui/src/containers/ApplicationPreviewContainer.js
new file mode 100644
index 000000000..443e41810
--- /dev/null
+++ b/embark-ui/src/containers/ApplicationPreviewContainer.js
@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+class ApplicationPreviewContainer extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ previewUrl: props.previewUrl || 'http://localhost:8000'
+ };
+ }
+
+ render() {
+ return (
+
+
+
this.locationInput = input} value={this.props.previewUrl} />
+
+
+
+
+
+
+ );
+ }
+
+ handlePreviewChange(ev) {
+ try {
+ let url = ev.target.contentWindow.location.toString();
+ this.setState({previewUrl: url});
+ } catch(e) {
+ // Nothing here.
+ }
+ }
+
+ handlePreviewGo() {
+ this.previewIframe.src = this.locationInput.value;
+ }
+}
+
+ApplicationPreviewContainer.propTypes = {
+ previewUrl: PropTypes.string
+};
+
+export default ApplicationPreviewContainer;
+