diff --git a/.env.backend.example b/.env.backend.example new file mode 100644 index 00000000..3b512136 --- /dev/null +++ b/.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 diff --git a/.env.example b/.env.example index b2e039cc..e45cb49b 100644 --- a/.env.example +++ b/.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 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 9ad779c3..9c268915 100644 --- a/CONTRIBUTING.md +++ b/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= +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!) diff --git a/webpack.config.js b/webpack.config.js index 716bd33c..367b971d 100644 --- a/webpack.config.js +++ b/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',