Rebase/squash

.env.example

@@ -1,22 +1,22 @@
 API_URL=/api
-MONGO_URL=mongodb://localhost:27017/p5js-web-editor
-PORT=8000
-SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
 AWS_ACCESS_KEY=<your-aws-access-key>
-AWS_SECRET_KEY=<your-aws-secret-key>
 AWS_REGION=<your-aws-region>
-S3_BUCKET=<your-s3-bucket>
+AWS_SECRET_KEY=<your-aws-secret-key>
+EMAIL_SENDER=<transactional-email-sender>
+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_EMAIL=benedikt.gross@generative-gestaltung.de
+GG_EXAMPLES_PASS=generativedesign
+GG_EXAMPLES_USERNAME=generative-design
 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>
-EMAIL_SENDER=<transactional-email-sender>
+MONGO_URL=mongodb://localhost:27017/p5js-web-editor
-EMAIL_VERIFY_SECRET_TOKEN=whatever_you_want_this_to_be_it_only_matters_for_production
+PORT=8000
+S3_BUCKET=<your-s3-bucket>
 S3_BUCKET_URL_BASE=<alt-for-s3-url>
-EXAMPLE_USER_EMAIL=examples@p5js.org
+SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
-EXAMPLE_USER_PASSWORD=hellop5js
-GG_EXAMPLES_USERNAME=generative-design
-GG_EXAMPLES_PASS=generativedesign
-GG_EXAMPLES_EMAIL=benedikt.gross@generative-gestaltung.de

Procfile

@@ -0,0 +1 @@
+web: MONGO_URL=$MONGO_URI MAILGUN_KEY=$MAILGUN_API_KEY npm run start:prod

app.json

@@ -0,0 +1,93 @@
+{
+  "name": "p5.js Web Editor",
+  "description": "The p5.js Web Editor is an in-browser editor for creative coding, specifically for writing p5.js sketches.",
+  "repository": "https://github.com/processing/p5.js-web-editor",
+  "logo": "https://p5js.org/assets/img/p5js.svg",
+  "keywords": ["processing", "p5js", "p5.js"],
+  "addons": [
+    {
+      "plan": "mongolab:sandbox",
+      "as": "MONGO"
+    },
+    {
+      "plan": "mailgun:starter",
+      "as": "MAILGUN"
+    }
+  ],
+  "env": {
+    "API_URL": {
+      "value": "/api"
+    },
+    "AWS_ACCESS_KEY": {
+      "description": "AWS Access Key",
+      "value": "placeholder"
+    },
+    "AWS_SECRET_KEY": {
+      "description": "AWS Secret Key",
+      "value": "placeholder"
+    },
+    "AWS_REGION": {
+      "description": "AWS Region for the S3_BUCKET",
+      "value": "placeholder"
+    },
+    "EMAIL_SENDER": {
+      "description": "The sending email address for transactional emails.",
+      "value": "no-reply@mydomain.com"
+    },
+    "EMAIL_VERIFY_SECRET_TOKEN": {
+      "description": "A secret key for...? Not sure where used.",
+      "generator": "secret"
+    },
+    "EXAMPLE_USER_EMAIL": {
+      "description": "The email address for the account holding the default Example sketches",
+      "value": "examples@p5js.org"
+    },
+    "EXAMPLE_USER_PASSWORD": {
+      "value": "hellop5js"
+    },
+    "GG_EXAMPLES_EMAIL": {
+      "description": "The email address for the account holding the Generative Design Example sketches",
+      "value": "benedikt.gross@generative-gestaltung.de"
+    },
+    "GG_EXAMPLES_PASS": {
+      "value": "generativedesign"
+    },
+    "GG_EXAMPLES_USERNAME": {
+      "value": "generative-design"
+    },
+    "GITHUB_ID": {
+      "description": "The GitHub Client Id for sign in with GitHub support",
+      "value": "placeholder"
+    },
+    "GITHUB_SECRET": {
+      "description": "The GitHub Client Secret",
+      "value": "placeholder"
+    },
+    "GOOGLE_ID": {
+      "description": "The Google Client Id for sign in with Google support",
+      "value": "placeholder"
+    },
+    "GOOGLE_SECRET": {
+      "description": "The Google Client Secret",
+      "value": "placeholder"
+    },
+    "NODE_ENV": {
+      "value": "production"
+    },
+    "S3_BUCKET": {
+      "desription": "Name of the S3 bucket for asset storage",
+      "value": "placeholder"
+    },
+    "S3_BUCKET_URL_BASE": {
+      "description": "S3 bucket URL base",
+      "required": false
+    },
+    "SESSION_SECRET": {
+      "description": "A secret key for verifying the integrity of signed cookies.",
+      "generator": "secret"
+    }
+  },
+  "scripts": {
+    "postdeploy": "MONGO_URL=$MONGO_URI MAILGUN_KEY=$MAILGUN_API_KEY npm run fetch-examples:prod"
+  }
+}

developer_docs/deployment.md

@@ -23,11 +23,11 @@ These are the steps that happen when you deploy the application.
 4. Travis CI runs some tests, which in this case, is just `npm run lint`. This could be updated in the future to include more extensive tests. If the tests fail, the build stops here.
 5. If the tests pass, then Travis CI builds a (production) Docker image of the whole application.
 6. This image is pushed to [Docker Hub](https://hub.docker.com/r/catarak/p5.js-web-editor/) with a unique tag name (the Travis commit) and also to the `latest` tag.
-7. The Kubernetes deployment is updated to image just pushed to Docker Hub on the cluster on Google Kubernetes Engine. 
+7. The Kubernetes deployment is updated to image just pushed to Docker Hub on the cluster on Google Kubernetes Engine.
 
 ## Production Installation
 
-You'll only need to do this if you're testing the production environment locally. 
+You'll only need to do this if you're testing the production environment locally.
 
 1. Clone this repository and `cd` into it
 2. `$ npm install`
@@ -38,3 +38,14 @@ You'll only need to do this if you're testing the production environment locally
 7. `$ npm run build`
 8. Since production assumes your environment variables are in the shell environment, and not in a `.env` file, you will have to run `export $(grep -v '^#' .env | xargs)` or a similar command, see this [Stack Overflow answer](https://stackoverflow.com/a/20909045/4086967).
 9. `$ npm run start:prod`
+
+## Heroku Deployment
+
+You can evaluate hosting a complete p5.js Web Editor instance at no cost on Heroku.
+
+1. Sign up for a free account at: [Heroku](https://www.heroku.com/)
+2. Click here: [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/passion-for-coding/p5.js-web-editor/tree/heroku-deployment)
+3. Enter a unique *App name*, this will become part of the url (i.e. https://app-name.herokuapp.com/)
+4. Update any configuration variables, or accept the defaults for a quick evaluation (they can be changed later to enable full functionality)
+5. Click on the "Deploy app" button
+6. When complete, click on the "View app" button

package.json

@@ -16,7 +16,8 @@
     "fetch-examples": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples.js",
     "fetch-examples-gg": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples-gg.js",
     "fetch-examples:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples.bundle.js",
-    "fetch-examples-gg:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples-gg.bundle.js"
+    "fetch-examples-gg:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples-gg.bundle.js",
+    "heroku-postbuild": "touch .env; npm run build"
   },
   "main": "index.js",
   "author": "Cassie Tarakajian",
@@ -59,7 +60,8 @@
     "webpack-node-externals": "^1.7.2"
   },
   "engines": {
-    "node": ">=8.9.0"
+    "node": "8.11.1",
+    "npm": "5.6.0"
   },
   "dependencies": {
     "archiver": "^1.1.0",