From 1edbb52f4da5b19986fbc684aaa2c2ff8c9fc786 Mon Sep 17 00:00:00 2001 From: Francis Li Date: Sun, 9 Dec 2018 15:34:15 -0800 Subject: [PATCH] Rebase/squash --- .env.example | 24 +++++----- Procfile | 1 + app.json | 93 ++++++++++++++++++++++++++++++++++++ developer_docs/deployment.md | 15 +++++- package.json | 6 ++- 5 files changed, 123 insertions(+), 16 deletions(-) create mode 100644 Procfile create mode 100644 app.json diff --git a/.env.example b/.env.example index 3bfd7e50..84a14cb5 100644 --- a/.env.example +++ b/.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= -AWS_SECRET_KEY= AWS_REGION= -S3_BUCKET= +AWS_SECRET_KEY= +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= GITHUB_SECRET= GOOGLE_ID= (use google+ api) GOOGLE_SECRET= (use google+ api) MAILGUN_DOMAIN= MAILGUN_KEY= -EMAIL_SENDER= -EMAIL_VERIFY_SECRET_TOKEN=whatever_you_want_this_to_be_it_only_matters_for_production +MONGO_URL=mongodb://localhost:27017/p5js-web-editor +PORT=8000 +S3_BUCKET= S3_BUCKET_URL_BASE= -EXAMPLE_USER_EMAIL=examples@p5js.org -EXAMPLE_USER_PASSWORD=hellop5js -GG_EXAMPLES_USERNAME=generative-design -GG_EXAMPLES_PASS=generativedesign -GG_EXAMPLES_EMAIL=benedikt.gross@generative-gestaltung.de +SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production diff --git a/Procfile b/Procfile new file mode 100644 index 00000000..90267a97 --- /dev/null +++ b/Procfile @@ -0,0 +1 @@ +web: MONGO_URL=$MONGO_URI MAILGUN_KEY=$MAILGUN_API_KEY npm run start:prod diff --git a/app.json b/app.json new file mode 100644 index 00000000..a588258e --- /dev/null +++ b/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" + } +} diff --git a/developer_docs/deployment.md b/developer_docs/deployment.md index a239280d..3fca9cac 100644 --- a/developer_docs/deployment.md +++ b/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 diff --git a/package.json b/package.json index 8c68b1f3..e86980ef 100644 --- a/package.json +++ b/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",