WIP/RFC: Added support for running on Replit.com

.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
+[email protected]
+EXAMPLE_USER_PASSWORD=hellop5js
+GG_EXAMPLES_USERNAME=generativedesign
+[email protected]
+GG_EXAMPLES_PASS=generativedesign
+ML5_LIBRARY_USERNAME=ml5
+[email protected]
+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

.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

.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" ]

data/README.md

@@ -0,0 +1 @@
+This directory exists as a location to store Mongodb data in environments with a local Mongodb instance.

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": "<your-aws-key>",
+  "AWS_REGION": "<your-aws-region>",
+  "AWS_SECRET_KEY": "<your-aws-secret-key>",
+  "EMAIL_SENDER": "<transactional-email-sender>",
+  "GITHUB_ID": "<your-github-client-id>",
+  "GITHUB_SECRET": "<your-github-client-secret>",
+  "GOOGLE_ID": "<your-google-client-id> (use google+ api)",
+  "GOOGLE_SECRET": "<your-google-client-secret> (use google+ api)",
+  "MAILGUN_DOMAIN": "<your-mailgun-domain>",
+  "MAILGUN_KEY": "<your-mailgun-api-key>",
+  "S3_BUCKET": "<your-s3-bucket>",
+  "S3_BUCKET_URL_BASE": "<alt-for-s3-url>"
+}
+```
+
+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

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');
 }

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",

replit.nix

@@ -0,0 +1,7 @@
+{ pkgs }: {
+	deps = with pkgs; [
+		nodejs-12_x
+		nodePackages.typescript-language-server
+    mongodb
+	];
+}

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);