WIP: enable backpack in preview

README.md

@@ -82,8 +82,9 @@ To stop the process that is making the site available to your web browser (creat
 `npm start` can be configured with the following environment variables
 
 | Variable        | Default                            | Description                                    |
-| ------------- | ----------------------------- | ---------------------------------------------- |
+| --------------- | ---------------------------------- | ---------------------------------------------- |
 | `API_HOST`      | `https://api.scratch.mit.edu`      | Hostname for API requests                      |
+| `BACKPACK_HOST` | `https://backpack.scratch.mit.edu` | Hostname for backpack requests                 |
 | `SENTRY_DSN`    | `''`                               | DSN for Sentry                                 |
 | `FALLBACK`      | `''`                               | Pass-through location for old site             |
 | `GA_TRACKER`    | `''`                               | Where to log Google Analytics data             |

src/views/preview/presentation.jsx

@@ -28,6 +28,7 @@ const projectShape = require('./projectshape.jsx').projectShape;
 require('./preview.scss');
 
 const PreviewPresentation = ({
+    backpackOptions,
     comments,
     editable,
     extensions,
@@ -124,6 +125,7 @@ const PreviewPresentation = ({
                             <div className="guiPlayer">
                                 <IntlGUI
                                     isPlayerOnly
+                                    backpackOptions={backpackOptions}
                                     basePath="/"
                                     className="guiPlayer"
                                     isFullScreen={isFullScreen}
@@ -349,6 +351,10 @@ const PreviewPresentation = ({
 
 PreviewPresentation.propTypes = {
     addToStudioOpen: PropTypes.bool,
+    backpackOptions: PropTypes.shape({
+        host: PropTypes.string,
+        visible: PropTypes.bool
+    }),
     comments: PropTypes.arrayOf(PropTypes.object),
     editable: PropTypes.bool,
     extensions: PropTypes.arrayOf(PropTypes.object),

src/views/preview/preview.jsx

@@ -288,11 +288,16 @@ class Preview extends React.Component {
         );
     }
     render () {
+        const backpackOptions = {
+            host: process.env.BACKPACK_HOST,
+            visible: true
+        };
         return (
             this.props.playerMode ?
                 <Page>
                     <PreviewPresentation
                         addToStudioOpen={this.state.addToStudioOpen}
+                        backpackOptions={backpackOptions}
                         comments={this.props.comments}
                         editable={this.state.editable}
                         extensions={this.state.extensions}
@@ -330,6 +335,7 @@ class Preview extends React.Component {
                 <IntlGUI
                     enableCommunity
                     hideIntro
+                    backpackOptions={backpackOptions}
                     basePath="/"
                     className="gui"
                     projectId={this.state.projectId}

webpack.config.js

@@ -165,6 +165,7 @@ module.exports = {
                 'process.env.NODE_ENV': '"' + (process.env.NODE_ENV || 'development') + '"',
                 'process.env.SENTRY_DSN': '"' + (process.env.SENTRY_DSN || '') + '"',
                 'process.env.API_HOST': '"' + (process.env.API_HOST || 'https://api.scratch.mit.edu') + '"',
+                'process.env.BACKPACK_HOST': '"' + (process.env.BACKPACK_HOST || 'https://backpack.scratch.mit.edu') + '"',
                 'process.env.SCRATCH_ENV': '"' + (process.env.SCRATCH_ENV || 'development') + '"'
             }),
             new webpack.optimize.CommonsChunkPlugin({