Merge pull request #2026 from LLK/enable-backpack

Configure backpack, project, and asset hosts for dev/staging/production

.travis.yml

@@ -18,11 +18,26 @@ env:
   - API_HOST_VAR=API_HOST_$TRAVIS_BRANCH
   - API_HOST=${!API_HOST_VAR}
   - API_HOST=${API_HOST:-$API_HOST_STAGING}
+  - ASSET_HOST_master=https://assets.scratch.mit.edu
+  - ASSET_HOST_STAGING=https://assets.scratch.ly
+  - ASSET_HOST_VAR=ASSET_HOST_$TRAVIS_BRANCH
+  - ASSET_HOST=${!ASSET_HOST_VAR}
+  - ASSET_HOST=${ASSET_HOST:-$ASSET_HOST_STAGING}
+  - BACKPACK_HOST_master=https://backpack.scratch.mit.edu
+  - BACKPACK_HOST_STAGING=https://backpack.scratch.ly
+  - BACKPACK_HOST_VAR=BACKPACK_HOST_$TRAVIS_BRANCH
+  - BACKPACK_HOST=${!BACKPACK_HOST_VAR}
+  - BACKPACK_HOST=${BACKPACK_HOST:-$BACKPACK_HOST_STAGING}
   - ROOT_URL_master=https://scratch.mit.edu
   - ROOT_URL_STAGING=https://scratch.ly
   - ROOT_URL_VAR=ROOT_URL_$TRAVIS_BRANCH
   - ROOT_URL=${!ROOT_URL_VAR}
   - ROOT_URL=${ROOT_URL:-$ROOT_URL_STAGING}
+  - PROJECT_HOST_master=https://projects.scratch.mit.edu
+  - PROJECT_HOST_STAGING=https://projects.scratch.ly
+  - PROJECT_HOST_VAR=PROJECT_HOST_$TRAVIS_BRANCH
+  - PROJECT_HOST=${!PROJECT_HOST_VAR}
+  - PROJECT_HOST=${PROJECT_HOST:-$PROJECT_HOST_STAGING}
   - PATH=$PATH:$PWD/test/integration/node_modules/chromedriver/bin
   - AWS_ACCESS_KEY_ID=$EB_AWS_ACCESS_KEY_ID
   - AWS_SECRET_ACCESS_KEY=$EB_AWS_SECRET_ACCESS_KEY

README.md

@@ -81,14 +81,17 @@ 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                                    |
+| Variable        | Default                            | Description                                    |
-| ------------- | ----------------------------- | ---------------------------------------------- |
+| --------------- | ---------------------------------- | ---------------------------------------------- |
-| `API_HOST`    | `https://api.scratch.mit.edu` | Hostname for API requests                      |
+| `API_HOST`      | `https://api.scratch.mit.edu`      | Hostname for API requests                      |
-| `SENTRY_DSN`  | `''`                          | DSN for Sentry                                 |
+| `ASSETS_HOST`   | `https://assets.scratch.mit.edu`   | Hostname for asset requests                    |
-| `FALLBACK`    | `''`                          | Pass-through location for old site             |
+| `BACKPACK_HOST` | `https://backpack.scratch.mit.edu` | Hostname for backpack requests                 |
-| `GA_TRACKER`  | `''`                          | Where to log Google Analytics data             |
+| `PROJECTS_HOST` | `https://projects.scratch.mit.edu` | Hostname for project requests                  |
-| `NODE_ENV`    | `null`                        | If not `production`, app acts like development |
+| `SENTRY_DSN`    | `''`                               | DSN for Sentry                                 |
-| `PORT`        | `8333`                        | Port for devserver (http://localhost:XXXX)     |
+| `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,8 @@ const projectShape = require('./projectshape.jsx').projectShape;
 require('./preview.scss');
 
 const PreviewPresentation = ({
+    assetHost,
+    backpackOptions,
     comments,
     editable,
     extensions,
@@ -40,6 +42,7 @@ const PreviewPresentation = ({
     loveCount,
     originalInfo,
     parentInfo,
+    projectHost,
     projectId,
     projectInfo,
     remixes,
@@ -124,10 +127,13 @@ const PreviewPresentation = ({
                             <div className="guiPlayer">
                                 <IntlGUI
                                     isPlayerOnly
+                                    assetHost={assetHost}
+                                    backpackOptions={backpackOptions}
                                     basePath="/"
                                     className="guiPlayer"
                                     isFullScreen={isFullScreen}
                                     previewInfoVisible="false"
+                                    projectHost={projectHost}
                                     projectId={projectId}
                                 />
                             </div>
@@ -349,6 +355,11 @@ const PreviewPresentation = ({
 
 PreviewPresentation.propTypes = {
     addToStudioOpen: PropTypes.bool,
+    assetHost: PropTypes.string,
+    backpackOptions: PropTypes.shape({
+        host: PropTypes.string,
+        visible: PropTypes.bool
+    }),
     comments: PropTypes.arrayOf(PropTypes.object),
     editable: PropTypes.bool,
     extensions: PropTypes.arrayOf(PropTypes.object),
@@ -372,6 +383,7 @@ PreviewPresentation.propTypes = {
     onUpdate: PropTypes.func,
     originalInfo: projectShape,
     parentInfo: projectShape,
+    projectHost: PropTypes.string,
     projectId: PropTypes.string,
     projectInfo: projectShape,
     projectStudios: PropTypes.arrayOf(PropTypes.object),

src/views/preview/preview.jsx

@@ -293,6 +293,8 @@ class Preview extends React.Component {
                 <Page>
                     <PreviewPresentation
                         addToStudioOpen={this.state.addToStudioOpen}
+                        assetHost={this.props.assetHost}
+                        backpackOptions={this.props.backpackOptions}
                         comments={this.props.comments}
                         editable={this.state.editable}
                         extensions={this.state.extensions}
@@ -305,6 +307,7 @@ class Preview extends React.Component {
                         loved={this.props.loved}
                         originalInfo={this.props.original}
                         parentInfo={this.props.parent}
+                        projectHost={this.props.projectHost}
                         projectId={this.state.projectId}
                         projectInfo={this.props.projectInfo}
                         projectStudios={this.props.projectStudios}
@@ -330,8 +333,11 @@ class Preview extends React.Component {
                 <IntlGUI
                     enableCommunity
                     hideIntro
+                    assetHost={this.props.assetHost}
+                    backpackOptions={this.props.backpackOptions}
                     basePath="/"
                     className="gui"
+                    projectHost={this.props.projectHost}
                     projectId={this.state.projectId}
                 />
         );
@@ -339,6 +345,11 @@ class Preview extends React.Component {
 }
 
 Preview.propTypes = {
+    assetHost: PropTypes.string.isRequired,
+    backpackOptions: PropTypes.shape({
+        host: PropTypes.string,
+        visible: PropTypes.bool
+    }),
     comments: PropTypes.arrayOf(PropTypes.object),
     faved: PropTypes.bool,
     fullScreen: PropTypes.bool,
@@ -355,6 +366,7 @@ Preview.propTypes = {
     original: projectShape,
     parent: projectShape,
     playerMode: PropTypes.bool,
+    projectHost: PropTypes.string.isRequired,
     projectInfo: projectShape,
     projectStudios: PropTypes.arrayOf(PropTypes.object),
     remixes: PropTypes.arrayOf(PropTypes.object),
@@ -381,6 +393,12 @@ Preview.propTypes = {
 };
 
 Preview.defaultProps = {
+    assetHost: process.env.ASSET_HOST,
+    backpackOptions: {
+        host: process.env.BACKPACK_HOST,
+        visible: true
+    },
+    projectHost: process.env.PROJECT_HOST,
     sessionStatus: sessionActions.Status.NOT_FETCHED,
     user: {}
 };

webpack.config.js

@@ -165,6 +165,9 @@ 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.ASSET_HOST': '"' + (process.env.ASSET_HOST || 'https://assets.scratch.mit.edu') + '"',
+                'process.env.BACKPACK_HOST': '"' + (process.env.BACKPACK_HOST || 'https://backpack.scratch.mit.edu') + '"',
+                'process.env.PROJECT_HOST': '"' + (process.env.PROJECT_HOST || 'https://projects.scratch.mit.edu') + '"',
                 'process.env.SCRATCH_ENV': '"' + (process.env.SCRATCH_ENV || 'development') + '"'
             }),
             new webpack.optimize.CommonsChunkPlugin({