Proxy the local dev server to a deployed stage

.env.backend.example

@@ -0,0 +1,2 @@
+# Loaded by `yarn start:backend` (serverless-offline). Bucket of the stage to write to.
+STORAGE_BUCKET=pmdm-projectbucket-dev-391322831368

.env.example

@@ -1,2 +1,5 @@
-S3_BUCKET_PREFIX=pmdm-projectbucket
-AWS_REGION=eu-central-1
+# Deployed stage that the dev server proxies /data and /api to
+PROXY_TARGET=https://dev.maus.metahost.org
+
+# Optional: route /api to a local backend started with `yarn start:backend`
+# API_PROXY_TARGET=http://localhost:3000/dev

CONTRIBUTING.md

@@ -18,6 +18,8 @@ Copy the file `.env.example` to `.env`:
 cp .env.example .env
 ```
 
+`PROXY_TARGET` points the dev server at a deployed stage (default: dev). Requests to `/data` (assets, saved projects) and `/api` (save, share) are proxied there, so no AWS credentials are needed to run the app locally.
+
 Currently, the assets (in `./assets`) are not part of this repository, so you'll have to get them first. For that, you need the AWS CLI and access to the `hackingstudio` AWS profile.
 
 ```sh
@@ -33,14 +35,23 @@ yarn start
 
 Open http://localhost:8601 and wait for the build to finish.
 
-To also use the save functionality, run:
+Saving works against the stage in `PROXY_TARGET`. Asset uploads go from the browser directly to the stage's project bucket, which only works for stages whose bucket CORS rule allows `http://localhost:8601` (currently: dev, see `cdk/lib/cdk-stack.ts`).
+
+### Local backend (optional)
+
+To run the Lambda handlers from `src/backend` locally instead of using the deployed API:
+
+1. Set up an AWS profile with access to the stage's project bucket, e.g. via `aws configure sso`.
+2. Copy `.env.backend.example` to `.env.backend` and set `STORAGE_BUCKET` to that bucket.
+3. In `.env`, set `API_PROXY_TARGET=http://localhost:3000/dev`.
+4. Start the backend:
 
 ```sh
+export AWS_PROFILE=<your profile>
+export AWS_SDK_LOAD_CONFIG=1  # required for SSO profiles with aws-sdk v2
 yarn start:backend
 ```
 
-This will only work if you have a current AWS_PROFILE with access to the buckets.
-
 ## Add a new Game
 
 The games and examples are placed inside `src/lib/edu`. They are loaded automatically as long as the folders have the `game` or `example` prefix. In the frontend, they are ordered alpabetically by the name of their folder. (So you can use numbers to sort them!)

webpack.config.js

@@ -14,12 +14,11 @@ const customHtmlPlugin = require('./scripts/custom-html-plugin')
 const { getAllAssets } = require('./scripts/lib/assets')
 
 const branch = process.env.BRANCH || process.env.TRAVIS_BRANCH
-const bucketSuffix = branch === 'production' ? 'prod' : 'staging'
-const bucketUrl = `https://${
-  process.env.S3_BUCKET_PREFIX
-}-${bucketSuffix}.s3.dualstack.${
-  process.env.FUNCTIONS_AWS_REGION || process.env.AWS_REGION
-}.amazonaws.com`
+
+// Dev server proxies /data and /api to a deployed stage (see .env.example).
+// API_PROXY_TARGET overrides /api, e.g. to use a local serverless-offline.
+const proxyTarget = process.env.PROXY_TARGET
+const apiProxyTarget = process.env.API_PROXY_TARGET || proxyTarget
 
 const enableServiceWorker =
   'ENABLE_SERVICE_WORKER' in process.env ||
@@ -62,16 +61,25 @@ module.exports = {
     port: process.env.PORT || 8601,
     proxy: {
       '/api': {
-        target: 'http://localhost:3000/dev',
+        target: apiProxyTarget,
         changeOrigin: true,
         secure: false,
       },
       '/data': {
-        target: bucketUrl,
+        target: proxyTarget,
         changeOrigin: true,
       },
     },
     historyApiFallback: true,
+    client: {
+      overlay: {
+        // Warnings (e.g. production bundle size hints) stay in the terminal.
+        warnings: false,
+        // Benign browser notice (triggered e.g. by react-tooltip), not an app error.
+        runtimeErrors: (error) =>
+          !/ResizeObserver loop/.test(error?.message ?? ''),
+      },
+    },
   },
   entry: {
     app: './src/entrypoints/index.jsx',