p5.js-web-editor/developer_docs/deployment.md

# Deployment

This document contains information about how to deploy to production, all of the different platforms and tools, and how to configure them.

WIP.
* Production Setup/Installation
* Travis
* Docker Hub
* Kubernetes
* S3
* Mailgun
* Cloudflare
* DNS/Dreamhost
* mLab

## Deployment Process

These are the steps that happen when you deploy the application.

1. Push to `master` branch, or merge in a pull request to the `master` branch.
2. This triggers a build on [Travis CI](https://travis-ci.org/processing/p5.js-web-editor).
3. Travis CI builds a (development) Docker image of the whole 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.

## Production Installation

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`
3. Install MongoDB and make sure it is running
4. `$ cp .env.example .env`
5. (NOT Optional) edit `.env` and fill in all necessary values.
6. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5'
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`

## Self Hosting - Heroku Deployment

If you are interested in hosting and deploying your own p5.js Web Editor instance, you can! It would be the same as the official editor instance at editor.p5js.org, except with a different domain, and you would be in charge of the maintenance. We recommend using Heroku as you can host it for free.

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/processing/p5.js-web-editor/tree/master)
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
Development documentation (#705) * delete unused files, move webpack configs to their own directory * start of improved developer documentation, moving everything to developer_docs/ directory * documentation updates 2018-09-26 20:14:06 +00:00			`# Deployment`

update documentation, change travis to only deploy on master 2018-09-26 21:31:14 +00:00			`This document contains information about how to deploy to production, all of the different platforms and tools, and how to configure them.`

Development documentation (#705) * delete unused files, move webpack configs to their own directory * start of improved developer documentation, moving everything to developer_docs/ directory * documentation updates 2018-09-26 20:14:06 +00:00			`WIP.`
			`* Production Setup/Installation`
			`* Travis`
			`* Docker Hub`
			`* Kubernetes`
			`* S3`
			`* Mailgun`
			`* Cloudflare`
			`* DNS/Dreamhost`
			`* mLab`

update documentation, change travis to only deploy on master 2018-09-26 21:31:14 +00:00			`## Deployment Process`

			`These are the steps that happen when you deploy the application.`

			1. Push to `master` branch, or merge in a pull request to the `master` branch.
			`2. This triggers a build on [Travis CI](https://travis-ci.org/processing/p5.js-web-editor).`
			`3. Travis CI builds a (development) Docker image of the whole 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.
Rebase/squash 2018-12-09 23:34:15 +00:00			`7. The Kubernetes deployment is updated to image just pushed to Docker Hub on the cluster on Google Kubernetes Engine.`
update documentation, change travis to only deploy on master 2018-09-26 21:31:14 +00:00
Development documentation (#705) * delete unused files, move webpack configs to their own directory * start of improved developer documentation, moving everything to developer_docs/ directory * documentation updates 2018-09-26 20:14:06 +00:00			`## Production Installation`
update documentation, change travis to only deploy on master 2018-09-26 21:31:14 +00:00
Rebase/squash 2018-12-09 23:34:15 +00:00			`You'll only need to do this if you're testing the production environment locally.`
update documentation, change travis to only deploy on master 2018-09-26 21:31:14 +00:00
Development documentation (#705) * delete unused files, move webpack configs to their own directory * start of improved developer documentation, moving everything to developer_docs/ directory * documentation updates 2018-09-26 20:14:06 +00:00			1. Clone this repository and `cd` into it
			2. `$ npm install`
			`3. Install MongoDB and make sure it is running`
			4. `$ cp .env.example .env`
update documentation, change travis to only deploy on master 2018-09-26 21:31:14 +00:00			5. (NOT Optional) edit `.env` and fill in all necessary values.
Development documentation (#705) * delete unused files, move webpack configs to their own directory * start of improved developer documentation, moving everything to developer_docs/ directory * documentation updates 2018-09-26 20:14:06 +00:00			6. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5'
			7. `$ npm run build`
update documentation, change travis to only deploy on master 2018-09-26 21:31:14 +00:00			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`
Rebase/squash 2018-12-09 23:34:15 +00:00
Edits as requested. Change template URL to processing repo, master branch to reflect final merge destination. 2019-01-19 23:14:27 +00:00			`## Self Hosting - Heroku Deployment`
Rebase/squash 2018-12-09 23:34:15 +00:00
Edits as requested. Change template URL to processing repo, master branch to reflect final merge destination. 2019-01-19 23:14:27 +00:00			`If you are interested in hosting and deploying your own p5.js Web Editor instance, you can! It would be the same as the official editor instance at editor.p5js.org, except with a different domain, and you would be in charge of the maintenance. We recommend using Heroku as you can host it for free.`
Rebase/squash 2018-12-09 23:34:15 +00:00
			`1. Sign up for a free account at: [Heroku](https://www.heroku.com/)`
Edits as requested. Change template URL to processing repo, master branch to reflect final merge destination. 2019-01-19 23:14:27 +00:00			`2. Click here: [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/processing/p5.js-web-editor/tree/master)`
Rebase/squash 2018-12-09 23:34:15 +00:00			`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`