Much of the code & tooling for Treasure Chess has been generalized for any RedwoodJS project, and made into open sauce so everyone can build a production Redwood app. We hope you find these resources useful. Happy hacking!

Not everything here will be relevant if you are just starting a redwood project, however You'll need it as you grow. P.S. We're hiring: https://github.com/treasure-chess/jobs

The demo here loads the most recent games for a particular chess member.

Our Redwood Stack

🧑‍💻 Click to watch a presentation for the Redwood v1 launch. (view source)

The Redwood Framework is a solid foundation that works all the way to production. Almost every core component we use is "out-of-the-box", or slightly modified.

	Tooling
Web styling	TailwindCSS, node-sass-glob-importer, etc.
Prerender	#
Router	#
Graphql	#
Login	"Extended" dBAuth
Devops/CI	Github Actions
Preview deploy	Vercel
Production deploy	Docker GCP Kubernetes

"#" = default settings

Devops

Managing a team of developers can be difficult. Here's some of things we wouldn't have survived without. These are all supplemental to the existing Redwood flow. Maybe you can help adopt them into the framework!

• Releases and Versioning (see section below)
• Docker containers https://community.redwoodjs.com/t/containerize-redwood-sides-with-docker-compose/2706/2?u=pi0neerpat
• Encrypted environment variables (also includes CI Actions) https://community.redwoodjs.com/t/encyrpted-environment-variables/2691?u=pi0neerpat.

Frontend

The list here is short, because redwood *solved* web development.

• State Store & React Context https://community.redwoodjs.com/t/react-context-in-redwoodjs/2572?u=pi0neerpat

Other Tooling

Here are some powerful tools

• "Extended" dbAuth / OAuth https://community.redwoodjs.com/t/combining-dbauth-oauth2/2452?u=pi0neerpat
  • LIVE production example using eth-auth: https://github.com/pi0neerpat/swordy-bot-v2/
  • Attempt at using Passport.js, but it was rather cumbersome https://github.com/pi0neerpat/oauth-2-passport-redwood
• OAuth general-purpose code (released soon)
• Headless rendering (for screenshots + image generation)
  • LIVE Hackathon example https://github.com/pi0neerpat/dao-preview
  • Fork-able example https://github.com/pi0neerpat/headless-screenshot. See example here (refresh if times out): https://headless-screenshot.vercel.app/api?url=https://grubhub.com

Releases and versioning

No project is complete without a proper release. The example here is for a RedwoodJS project using Docker images for deployment, but you can replace the resulting action with anything (eg. trigger an external service, build something in /packages, etc.).

Usage

1. Merge to staging or main. This will create a new release draft for you to complete.
2. Publish the draft release, which triggers a new Docker publish
3. When finished you'll get a Discord notification

You can also manually trigger deployments using the workflow dispatch trigger.

Setup

Follow these steps to add this to an existing project:

1. Update your repo's secrets with DISCORD_WEBHOOK_DEVOPS from your Discord channel settings.

2. Add lerna to your project.

yarn add lerna -W -D && yarn lerna init

3. Copy ci.yml and publish-ghcr.yml into your repo Github Actions. You'll need to make updates to these files, depending on your deployment strategy (see Docker below).

NOTE: If you have branch protection on, you will need to use a Github Personal Access Token to enable lerna to push commits. Expand for more instructions.

See related comment.

In ci.yml you'll need to use a PAT. Also a check is added to skip creating a release when lerna commits the new version.

create-release-draft:
  name: Create Release Draft
  needs: runCI
  if: needs.runCI.outputs.SKIP_RELEASE == 0
  runs-on: ubuntu-20.04
  steps:
    - name: Checkout
      uses: actions/checkout@v2
      with:
        token: ${{ secrets.PAT_GITHUB }}
    - name: Use Node.js 12.x
      uses: actions/setup-node@v1
      with:
        node-version: 12.x
        registry-url: https://registry.npmjs.org/
    - name: Update version
      id: update_version
      env:
        GH_TOKEN: ${{ secrets.PAT_GITHUB }}
      run: |

Docker

If your deployment strategy is Docker, as in the example here, you'll need to copy over some additional files.

/web/Dockerfile
/api/Dockerfile
/web/config/nginx/default.conf
.dockerignore

To build docker locally, use the following commands.

# web
docker build . -t pi0neerpat/redwood-devops-example-web -f web/Dockerfile \
--build-arg ENVIRONMENT=local \
--build-arg VERSION=v0.0.1-dev \
--build-arg REDWOOD_API_URL=http://0.0.0.0:8911 \
--build-arg APP_DOMAIN=http://0.0.0.0:8910

# api
docker build . -t pi0neerpat/redwood-devops-example-api -f api/Dockerfile --build-arg ENVIRONMENT=local

Explore an image using bash:

docker run --rm -it --entrypoint=/bin/bash <imageId>

Run an image:

docker run -it --rm \
      -p 8911:8911 \
      --network=host \
      -e REDWOOD_API_URL=http://0.0.0.0:8911 \
      --env-file .env \
      pi0neerpat/redwood-devops-example-api:latest
# For database connection issues see https://stackoverflow.com/questions/31249112/allow-docker-container-to-connect-to-a-local-host-postgres-database

docker run -it --rm \
       -p 8910:8910 \
        pi0neerpat/redwood-devops-example-web:latest

Notes on Docker

Here is some of the rationale behind my docker setup

• Migrations cannot be run during the build. They can only be run when the container started within the production environment
• node-alpine is missing python and node-gyp, which are required for packages such as node-canvas
• "At that point all you need is the api-server package". I don't think this is true, since I encountered missing deps for @graphql/server

Earthly

Key benefits for https://earthly.dev/get-earthly with Redwood:

• Instant(!!) Docker builds, once tests pass (previously 15+ min)
• Testing & building done in parallel
• Run docker images side-by-side before publishing
• Run migrations

Gotchas when using Earthly:

• Any command with output, or uses --push will only produce output if called directly, earthly --push +target-with-push or via a BUILD command

Test with:

# Just build an image
earthly +docker-web
# Test the images
earthly -P +test-images
# Perform production migration
earthly +migrate
# Everything
earthly +all

TODO

• Update test to use Github service container for test database https://docs.github.com/en/actions/using-containerized-services/creating-postgresql-service-containers

Author

👤 Patrick Gallagher

• Website: https://patrickgallagher.dev
• Twitter: @pi0neerpat
• GitHub: @pi0neerpat

👤 Treasure Chess Community [email protected]

• Website: https://treasurechess.com
• Twitter: @treasurechess_
• GitHub: @Treasure-Chess

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator