[WIP]: embed GUI in a preview page

package.json

@@ -90,6 +90,7 @@
     "redux-thunk": "2.0.1",
     "sass-lint": "1.5.1",
     "sass-loader": "6.0.6",
+    "scratch-gui": "0.1.0-prerelease.20180207193513",
     "scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master",
     "slick-carousel": "1.5.8",
     "source-map-support": "0.3.2",

src/routes.json

@@ -191,6 +191,13 @@
         "view": "microworldshomepage/microworldshomepage",
         "title": "Microworlds"
     },
+    {
+        "name": "preview",
+        "pattern": "^/preview/?$",
+        "routeAlias": "/preview/?$",
+        "view": "preview/preview",
+        "title": "Scratch 3.0 Preview"
+    },
     {
         "name": "preview-faq",
         "pattern": "^/preview-faq/?$",

src/views/preview/preview.css

@@ -0,0 +1,7 @@
+html, body, #app, .gui {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
+
+.gui * { box-sizing: border-box; }

src/views/preview/preview.jsx

@@ -0,0 +1,22 @@
+const React = require('react');
+const render = require('../../lib/render.jsx');
+
+require('./preview.css');
+const GUI = require('scratch-gui').default;
+
+class Preview extends React.Component {
+    componentDidMount () {
+        // handle project id in URI
+    }
+    render () {
+        return (
+            // will need a container to set 'dir' attribute RTL if lang is rtl.
+            <GUI
+                className="gui"
+                previewInfoVisible="false"
+            />
+        );
+    }
+}
+
+render(<Preview />, document.getElementById('app'));

webpack.config.js

@@ -141,6 +141,24 @@ module.exports = {
             {from: 'static'},
             {from: 'intl', to: 'js'}
         ]),
+        new CopyWebpackPlugin([{
+            from: 'node_modules/scratch-gui/dist/static/blocks-media',
+            to: 'static/blocks-media'
+        }]),
+        new CopyWebpackPlugin([{
+            from: 'node_modules/scratch-gui/dist/static/extension-assets',
+            to: 'static/extension-assets'
+        }]),
+        new CopyWebpackPlugin([{
+            from: 'node_modules/scratch-gui/dist/extension-worker.js'
+        }]),
+        new CopyWebpackPlugin([{
+            from: 'node_modules/scratch-gui/dist/extension-worker.js.map'
+        }]),
+        new CopyWebpackPlugin([{
+            from: 'node_modules/scratch-gui/dist/static/assets',
+            to: 'static/assets'
+        }]),
         new webpack.optimize.UglifyJsPlugin({
             sourceMap: true
         }),