r
/
p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull Requests Releases 1 Wiki Activity
p5.js-web-editor/developer_docs/deployment.md

2.9 KiB
Raw Blame History

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

Note: The installation steps assume you are using a Unix-like shell. If you are using Windows, you will need to use copy instead of cp.

  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.
  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
  2. Click here: Deploy
  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