Skip to content

Commit 1edbb52

Browse files
committed
Rebase/squash
1 parent 5bcb511 commit 1edbb52

File tree

5 files changed

+123
-16
lines changed

5 files changed

+123
-16
lines changed

.env.example

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
API_URL=/api
2-
MONGO_URL=mongodb://localhost:27017/p5js-web-editor
3-
PORT=8000
4-
SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
52
AWS_ACCESS_KEY=<your-aws-access-key>
6-
AWS_SECRET_KEY=<your-aws-secret-key>
73
AWS_REGION=<your-aws-region>
8-
S3_BUCKET=<your-s3-bucket>
4+
AWS_SECRET_KEY=<your-aws-secret-key>
5+
EMAIL_SENDER=<transactional-email-sender>
6+
EMAIL_VERIFY_SECRET_TOKEN=whatever_you_want_this_to_be_it_only_matters_for_production
7+
EXAMPLE_USER_EMAIL=[email protected]
8+
EXAMPLE_USER_PASSWORD=hellop5js
9+
GG_EXAMPLES_EMAIL=[email protected]
10+
GG_EXAMPLES_PASS=generativedesign
11+
GG_EXAMPLES_USERNAME=generative-design
912
GITHUB_ID=<your-github-client-id>
1013
GITHUB_SECRET=<your-github-client-secret>
1114
GOOGLE_ID=<your-google-client-id> (use google+ api)
1215
GOOGLE_SECRET=<your-google-client-secret> (use google+ api)
1316
MAILGUN_DOMAIN=<your-mailgun-domain>
1417
MAILGUN_KEY=<your-mailgun-api-key>
15-
EMAIL_SENDER=<transactional-email-sender>
16-
EMAIL_VERIFY_SECRET_TOKEN=whatever_you_want_this_to_be_it_only_matters_for_production
18+
MONGO_URL=mongodb://localhost:27017/p5js-web-editor
19+
PORT=8000
20+
S3_BUCKET=<your-s3-bucket>
1721
S3_BUCKET_URL_BASE=<alt-for-s3-url>
18-
EXAMPLE_USER_EMAIL=[email protected]
19-
EXAMPLE_USER_PASSWORD=hellop5js
20-
GG_EXAMPLES_USERNAME=generative-design
21-
GG_EXAMPLES_PASS=generativedesign
22-
GG_EXAMPLES_EMAIL=[email protected]
22+
SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production

Procfile

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
web: MONGO_URL=$MONGO_URI MAILGUN_KEY=$MAILGUN_API_KEY npm run start:prod

app.json

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
{
2+
"name": "p5.js Web Editor",
3+
"description": "The p5.js Web Editor is an in-browser editor for creative coding, specifically for writing p5.js sketches.",
4+
"repository": "https://github.com/processing/p5.js-web-editor",
5+
"logo": "https://p5js.org/assets/img/p5js.svg",
6+
"keywords": ["processing", "p5js", "p5.js"],
7+
"addons": [
8+
{
9+
"plan": "mongolab:sandbox",
10+
"as": "MONGO"
11+
},
12+
{
13+
"plan": "mailgun:starter",
14+
"as": "MAILGUN"
15+
}
16+
],
17+
"env": {
18+
"API_URL": {
19+
"value": "/api"
20+
},
21+
"AWS_ACCESS_KEY": {
22+
"description": "AWS Access Key",
23+
"value": "placeholder"
24+
},
25+
"AWS_SECRET_KEY": {
26+
"description": "AWS Secret Key",
27+
"value": "placeholder"
28+
},
29+
"AWS_REGION": {
30+
"description": "AWS Region for the S3_BUCKET",
31+
"value": "placeholder"
32+
},
33+
"EMAIL_SENDER": {
34+
"description": "The sending email address for transactional emails.",
35+
"value": "[email protected]"
36+
},
37+
"EMAIL_VERIFY_SECRET_TOKEN": {
38+
"description": "A secret key for...? Not sure where used.",
39+
"generator": "secret"
40+
},
41+
"EXAMPLE_USER_EMAIL": {
42+
"description": "The email address for the account holding the default Example sketches",
43+
"value": "[email protected]"
44+
},
45+
"EXAMPLE_USER_PASSWORD": {
46+
"value": "hellop5js"
47+
},
48+
"GG_EXAMPLES_EMAIL": {
49+
"description": "The email address for the account holding the Generative Design Example sketches",
50+
"value": "[email protected]"
51+
},
52+
"GG_EXAMPLES_PASS": {
53+
"value": "generativedesign"
54+
},
55+
"GG_EXAMPLES_USERNAME": {
56+
"value": "generative-design"
57+
},
58+
"GITHUB_ID": {
59+
"description": "The GitHub Client Id for sign in with GitHub support",
60+
"value": "placeholder"
61+
},
62+
"GITHUB_SECRET": {
63+
"description": "The GitHub Client Secret",
64+
"value": "placeholder"
65+
},
66+
"GOOGLE_ID": {
67+
"description": "The Google Client Id for sign in with Google support",
68+
"value": "placeholder"
69+
},
70+
"GOOGLE_SECRET": {
71+
"description": "The Google Client Secret",
72+
"value": "placeholder"
73+
},
74+
"NODE_ENV": {
75+
"value": "production"
76+
},
77+
"S3_BUCKET": {
78+
"desription": "Name of the S3 bucket for asset storage",
79+
"value": "placeholder"
80+
},
81+
"S3_BUCKET_URL_BASE": {
82+
"description": "S3 bucket URL base",
83+
"required": false
84+
},
85+
"SESSION_SECRET": {
86+
"description": "A secret key for verifying the integrity of signed cookies.",
87+
"generator": "secret"
88+
}
89+
},
90+
"scripts": {
91+
"postdeploy": "MONGO_URL=$MONGO_URI MAILGUN_KEY=$MAILGUN_API_KEY npm run fetch-examples:prod"
92+
}
93+
}

developer_docs/deployment.md

+13-2
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ These are the steps that happen when you deploy the application.
2323
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.
2424
5. If the tests pass, then Travis CI builds a (production) Docker image of the whole application.
2525
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.
26-
7. The Kubernetes deployment is updated to image just pushed to Docker Hub on the cluster on Google Kubernetes Engine.
26+
7. The Kubernetes deployment is updated to image just pushed to Docker Hub on the cluster on Google Kubernetes Engine.
2727

2828
## Production Installation
2929

30-
You'll only need to do this if you're testing the production environment locally.
30+
You'll only need to do this if you're testing the production environment locally.
3131

3232
1. Clone this repository and `cd` into it
3333
2. `$ npm install`
@@ -38,3 +38,14 @@ You'll only need to do this if you're testing the production environment locally
3838
7. `$ npm run build`
3939
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).
4040
9. `$ npm run start:prod`
41+
42+
## Heroku Deployment
43+
44+
You can evaluate hosting a complete p5.js Web Editor instance at no cost on Heroku.
45+
46+
1. Sign up for a free account at: [Heroku](https://www.heroku.com/)
47+
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)
48+
3. Enter a unique *App name*, this will become part of the url (i.e. https://app-name.herokuapp.com/)
49+
4. Update any configuration variables, or accept the defaults for a quick evaluation (they can be changed later to enable full functionality)
50+
5. Click on the "Deploy app" button
51+
6. When complete, click on the "View app" button

package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
"fetch-examples": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples.js",
1717
"fetch-examples-gg": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples-gg.js",
1818
"fetch-examples:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples.bundle.js",
19-
"fetch-examples-gg:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples-gg.bundle.js"
19+
"fetch-examples-gg:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples-gg.bundle.js",
20+
"heroku-postbuild": "touch .env; npm run build"
2021
},
2122
"main": "index.js",
2223
"author": "Cassie Tarakajian",
@@ -59,7 +60,8 @@
5960
"webpack-node-externals": "^1.7.2"
6061
},
6162
"engines": {
62-
"node": ">=8.9.0"
63+
"node": "8.11.1",
64+
"npm": "5.6.0"
6365
},
6466
"dependencies": {
6567
"archiver": "^1.1.0",

0 commit comments

Comments
 (0)