C2LC-26: Set up hosting of in-development work

Description

Set up a convenient method of hosting in-development c2lc-coding-environment work. For easy sharing of experiments and work that isn’t ready for production yet.

Ideally, on each commit:

• The project is built and tested (as now)
• If the build is successful, it is deployed to a static web host
  • Each personal repo and each branch are hosted independently

For example, at a URL like:

https://c2lc-testing.somehost.com/simonbates/C2LC-19/

Some options:

• Firebase
  • https://github.com/marketplace/actions/github-action-for-firebase
• GitHub Pages
  • https://github.com/marketplace/actions/github-pages-deploy
  • https://github.com/marketplace/actions/github-pages-action
  • https://github.com/marketplace/actions/deploy-to-github-pages
• Netlify
  • https://github.com/netlify/actions

Issue Links

• Related to C2LC-25: Set up deployment of "production" c2lc-coding-environment to build.codelearncreate.org
• Related to C2LC-38: Set up continuous deployment of the dev-0.1 branch

Comments

• Daniel Cho commented 2019-11-19T09:10:36.904-0500

  Here’s some notes about firebase hosting from my experience:

  • Firebase provides free firebaseapp.com domain name with SSL; this is also an important feature for C2LC coding environment because getting sound input from getUserMedia() requires secure connection.
  • Later on, when we decide to get a domain, we can always register on top of firebaseapp.com domain name.
  • It is possible to create multiple projects which can be used for different purpose deployment, dev, stage, and prod … etc.
  • Each project can have its own firebase token for automated deployment, and we can store these tokens on CI’s environment variable.

  I also looked up and free tier covers 10GB/month transferred and 1GB stored, which should be sufficient enough for our use case.

• Daniel Cho commented 2019-11-25T14:30:27.621-0500

  There’s a npm packaged called react-app-rewired https://www.npmjs.com/package/react-app-rewired which allows you to write web pack config files without running “npm run eject”; however, start and build script need to be modified.

  Setting CD pipeline with Firebase:

  Initialize firebase without single page web app config — deploying as single page web app will redirect any subdirectories in urls to /index.html page.

  Run git submodule from master branch to other branches, those are interested in deploying by “git submodule add -b [branch name] [git url]”; the command will create a sub directory with specified name. Later on, update from each branch can be updated by running “git submodule update”, which we can include in CI pipeline.

  Make custom web pack config to specify build for every entry and output point. Each entry point should be direct to each submodule’s directory and output to build directory in a way that it will build a structure like this:

  -build
  --owner1
  -–C2LC-19
  --owner2
  -–C2LC-19
  -–C2LC-22

  Run firebase deploy and you can access subdirectories with app_url/owner1/C2LC-19 or app_url/owner2/C2LC-19.

• Michelle D'Souza commented 2020-02-13T16:53:01.980-0500

  We currently have a working solution that hosts the master branch. We might want to set up Netlify or Zeit to also deploy in development branches and pull requests.