From eea0d89971f35a4fd3e5d67ccdd906d397249967 Mon Sep 17 00:00:00 2001 From: KumuPaul <> Date: Mon, 31 Jan 2022 22:45:10 +0000 Subject: [PATCH] Added support for running on Replit.com --- .env.replit | 22 ++++++++ .gitignore | 2 + .replit | 17 ++++++ data/README.md | 1 + developer_docs/replit.md | 47 ++++++++++++++++ index.js | 5 +- package-lock.json | 119 +++++++++++++++++++++++++++++++++++---- package.json | 2 + replit.nix | 7 +++ server/server.js | 13 +++++ webpack/config.dev.js | 3 +- 11 files changed, 224 insertions(+), 14 deletions(-) create mode 100644 .env.replit create mode 100644 .replit create mode 100644 data/README.md create mode 100644 developer_docs/replit.md create mode 100644 replit.nix diff --git a/.env.replit b/.env.replit new file mode 100644 index 0000000000..97cdde3225 --- /dev/null +++ b/.env.replit @@ -0,0 +1,22 @@ +API_URL=/editor +CORS_ALLOW_LOCALHOST=true +EMAIL_VERIFY_SECRET_TOKEN=whatever_you_want_this_to_be_it_only_matters_for_production +EXAMPLE_USER_EMAIL=examples@p5js.org +EXAMPLE_USER_PASSWORD=hellop5js +GG_EXAMPLES_USERNAME=generativedesign +GG_EXAMPLES_EMAIL=benedikt.gross@generative-gestaltung.de +GG_EXAMPLES_PASS=generativedesign +ML5_LIBRARY_USERNAME=ml5 +ML5_LIBRARY_EMAIL=examples@ml5js.org +ML5_LIBRARY_PASS=helloml5 +MOBILE_ENABLED=true +MONGO_URL=mongodb://localhost:27017/p5js-web-editor +PORT=8000 +PREVIEW_PORT=8002 +UNSAFE_PREVIEW_PROXY=true +EDITOR_URL=https://${REPL_SLUG}.${REPL_OWNER}.repl.co +PREVIEW_URL=https://${REPL_SLUG}.${REPL_OWNER}.repl.co/preview +SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production +TRANSLATIONS_ENABLED=true +UI_ACCESS_TOKEN_ENABLED=false +UPLOAD_LIMIT=250000000 diff --git a/.gitignore b/.gitignore index f1fd73f1a9..62395cd7dd 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,8 @@ npm-debug.log dump.rdb static/dist/ static/css/app.min.css +data/* +!data/README.md dist/ alpha_editor_p5js_org.key alpha_editor_p5js_org.ca-bundle diff --git a/.replit b/.replit new file mode 100644 index 0000000000..393344516a --- /dev/null +++ b/.replit @@ -0,0 +1,17 @@ +language = "nodejs" +entrypoint = "index.js" +run = "npm run start:replit" + +[packager] +language = "nodejs" + +[packager.features] +packageSearch = true +guessImports = false + +[languages.javascript] +pattern = "**/*.js" +syntax = "javascript" + +[languages.javascript.languageServer] +start = [ "typescript-language-server", "--stdio" ] diff --git a/data/README.md b/data/README.md new file mode 100644 index 0000000000..355c2a12f9 --- /dev/null +++ b/data/README.md @@ -0,0 +1 @@ +This directory exists as a location to store Mongodb data in environments with a local Mongodb instance. \ No newline at end of file diff --git a/developer_docs/replit.md b/developer_docs/replit.md new file mode 100644 index 0000000000..cc22b77ded --- /dev/null +++ b/developer_docs/replit.md @@ -0,0 +1,47 @@ +A guide to running the P5.js Web Editor on Replit.com + +## What is Replit.com + +Replit.com is a online integrated development environment that makes it possible to write code in a wide array of languages and run it for free in a cloud hosted environment. + +## Replit Configuration Files + +There are number of configuration files in this repository that are explicitly for supporting Replit.com: + + * [.replit](#.replit) - Configuration for the Replit.com interface including type checking in the editor, and how the [▸ Run] button works. + * [replit.nix](#replit.nix) - Configuration for the Nix.os container that the code of this Repl runs in (namely installation of dependencies). + +## Setup Steps + +In order for the P5.js Web Editor to start you need to add certain secret environment variables. You can add these to your Repl one by one in the Secrets tab, or you can use the raw editor to add and modify the following JSON: + +```json +{ + "AWS_ACCESS_KEY": "", + "AWS_REGION": "", + "AWS_SECRET_KEY": "", + "EMAIL_SENDER": "", + "GITHUB_ID": "", + "GITHUB_SECRET": "", + "GOOGLE_ID": " (use google+ api)", + "GOOGLE_SECRET": " (use google+ api)", + "MAILGUN_DOMAIN": "", + "MAILGUN_KEY": "", + "S3_BUCKET": "", + "S3_BUCKET_URL_BASE": "" +} +``` + +You can optionally follow the setup steps for each of these third party services in order to enable to functionality that depends on them. + +## Third Party Services [Optional] + +### Amazon Web Services (AWS) + +### Amazon S3 Storage + +### Github + +### Google+ API + +### Mailgun \ No newline at end of file diff --git a/index.js b/index.js index 2a9edba223..34beaf5cd5 100644 --- a/index.js +++ b/index.js @@ -1,9 +1,11 @@ +const fs = require('fs'); + if (process.env.NODE_ENV === 'production') { process.env.webpackAssets = JSON.stringify(require('./dist/static/manifest.json')); require('./dist/server.bundle.js'); require('./dist/previewServer.bundle.js'); } else { - let parsed = require('dotenv').config(); + let parsed = fs.existsSync('.env') ? require('dotenv').config() : {}; require('@babel/register')({ presets: ["@babel/preset-env"] }); @@ -16,5 +18,4 @@ if (process.env.NODE_ENV === 'production') { // } // } require('./server/server'); - require('./server/previewServer'); } diff --git a/package-lock.json b/package-lock.json index 6a7a301ee6..f6ccf2349c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7083,7 +7083,8 @@ }, "ssri": { "version": "7.1.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ssri/-/ssri-7.1.0.tgz", + "integrity": "sha512-77/WrDZUWocK0mvA5NTRQyveUf+wsrIc6vyrxpS8tVvYBcX215QbafrJR3KtkpskIzoFLqqNuuYQvxaMjXJ/0g==", "dev": true, "requires": { "figgy-pudding": "^3.5.1", @@ -9196,7 +9197,8 @@ }, "browserslist": { "version": "4.16.1", - "resolved": "", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.1.tgz", + "integrity": "sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA==", "dev": true, "requires": { "caniuse-lite": "^1.0.30001173", @@ -12435,7 +12437,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, @@ -12588,7 +12591,8 @@ "dependencies": { "ansi-regex": { "version": "5.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", "dev": true }, "ansi-styles": { @@ -15614,6 +15618,67 @@ "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-2.0.0.tgz", "integrity": "sha1-vXWcNXqqcDZeAclrewvsCKbg2Uk=" }, + "dotenv-cli": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-4.1.1.tgz", + "integrity": "sha512-XvKv1pa+UBrsr3CtLGBsR6NdsoS7znqaHUf4Knj0eZO+gOI/hjj9KgWDP+KjpfEbj6wAba1UpbhaP9VezNkWhg==", + "dev": true, + "requires": { + "cross-spawn": "^7.0.1", + "dotenv": "^8.1.0", + "dotenv-expand": "^5.1.0", + "minimist": "^1.1.3" + }, + "dependencies": { + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, + "dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "dev": true + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + } + } + }, "dotenv-defaults": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz", @@ -18897,7 +18962,8 @@ }, "ini": { "version": "1.3.5", - "resolved": "", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", + "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "optional": true }, "is-fullwidth-code-point": { @@ -27222,6 +27288,12 @@ "package-json": "^6.3.0" } }, + "lazy-cache": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", + "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=", + "dev": true + }, "lazy-universal-dotenv": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/lazy-universal-dotenv/-/lazy-universal-dotenv-3.0.1.tgz", @@ -28451,7 +28523,8 @@ }, "merge-deep": { "version": "3.0.2", - "resolved": "", + "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz", + "integrity": "sha512-T7qC8kg4Zoti1cFd8Cr0M+qaZfOwjlPDEdZIIPPB2JZctjaPM4fX+i7HOId69tAti2fvO6X5ldfYUONDODsrkA==", "dev": true, "requires": { "arr-union": "^3.1.0", @@ -28468,6 +28541,7 @@ "for-own": "^0.1.3", "is-plain-object": "^2.0.1", "kind-of": "^3.0.2", + "lazy-cache": "^1.0.3", "shallow-clone": "^0.1.2" } }, @@ -28479,7 +28553,8 @@ "requires": { "is-extendable": "^0.1.1", "kind-of": "^2.0.1", - "lazy-cache": "^0.2.3" + "lazy-cache": "^0.2.3", + "mixin-object": "^2.0.1" }, "dependencies": { "kind-of": { @@ -28847,6 +28922,24 @@ } } }, + "mixin-object": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz", + "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=", + "dev": true, + "requires": { + "for-in": "^0.1.3", + "is-extendable": "^0.1.1" + }, + "dependencies": { + "for-in": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz", + "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=", + "dev": true + } + } + }, "mjml": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/mjml/-/mjml-3.3.5.tgz", @@ -29963,7 +30056,8 @@ "dependencies": { "ansi-regex": { "version": "5.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", "dev": true }, "ansi-styles": { @@ -38276,7 +38370,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, @@ -39375,7 +39470,8 @@ }, "ansi-regex": { "version": "5.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", "dev": true }, "emoji-regex": { @@ -42653,7 +42749,8 @@ "dependencies": { "ansi-regex": { "version": "5.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", "dev": true }, "emoji-regex": { diff --git a/package.json b/package.json index 563776432d..6b63b47e95 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "clean": "rimraf dist", "start": "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon index.js", "start:prod": "cross-env NODE_ENV=production node index.js", + "start:replit": "mongod --dbpath ./data/ --bind_ip localhost & dotenv -e .env.replit -- npm run start", "lint": "eslint client server --ext .jsx --ext .js", "lint-fix": "eslint client server --ext .jsx --ext .js --fix", "build": "npm run build:client && npm run build:server && npm run build:examples", @@ -104,6 +105,7 @@ "babel-loader": "^8.2.1", "babel-plugin-transform-react-remove-prop-types": "^0.2.12", "css-loader": "^5.0.1", + "dotenv-cli": "^4.1.1", "eslint": "^7.18.0", "eslint-config-airbnb": "^16.1.0", "eslint-config-prettier": "^7.0.0", diff --git a/replit.nix b/replit.nix new file mode 100644 index 0000000000..f38a00f49f --- /dev/null +++ b/replit.nix @@ -0,0 +1,7 @@ +{ pkgs }: { + deps = with pkgs; [ + nodejs-12_x + nodePackages.typescript-language-server + mongodb + ]; +} \ No newline at end of file diff --git a/server/server.js b/server/server.js index cb9244cae3..035936068f 100644 --- a/server/server.js +++ b/server/server.js @@ -180,6 +180,19 @@ app.use('/api', (error, req, res, next) => { next(error); }); +// start the preview server +const previewApp = require('./previewServer').default; + +if (process.env.NODE_ENV === 'development' && + process.env.UNSAFE_PREVIEW_PROXY) { + // Hosting in an environment where you cannot listen on multiple ports or set + // up subdomain mappings? + app.use( + '/preview', + previewApp + ); +} + // Handle missing routes. app.get('*', (req, res) => { res.status(404); diff --git a/webpack/config.dev.js b/webpack/config.dev.js index fd0521d1ed..593d9601a7 100644 --- a/webpack/config.dev.js +++ b/webpack/config.dev.js @@ -1,9 +1,10 @@ const webpack = require('webpack'); +const fs = require('fs'); const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); -if (process.env.NODE_ENV === 'development') { +if (process.env.NODE_ENV === 'development' && fs.existsSync('.env')) { require('dotenv').config(); }