WIP: enable backpack in preview

README.md

@@ -81,14 +81,15 @@ 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                      |
-| `SENTRY_DSN`  | `''`                          | DSN for Sentry                                 |
-| `FALLBACK`    | `''`                          | Pass-through location for old site             |
-| `GA_TRACKER`  | `''`                          | Where to log Google Analytics data             |
-| `NODE_ENV`    | `null`                        | If not `production`, app acts like development |
-| `PORT`        | `8333`                        | Port for devserver (http://localhost:XXXX)     |
+| 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             |
+| `NODE_ENV`      | `null`                             | If not `production`, app acts like development |
+| `PORT`          | `8333`                             | Port for devserver (http://localhost:XXXX)     |
 
 **NOTE:** Because by default `API_HOST=https://api.scratch.mit.edu`, please be aware that, by default, you will be seeing and interacting with real data on the Scratch website.
 

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({