Personal Site

Architecture Diagram

React Flow

The goals of this architecture are

  1. Enable a hands-off deployment to prod
  2. Which is gated on an integration test suite
  3. Which is run against a staging enviornment
  4. Which is gated on unit tests and code formatting/linting.

The corresponding tech that supports the above are

  1. Production Environment: Google App Engine (GAE) Flexible Environment
  2. Integration Tests: Cypress
  3. Staging Environment: GAE in a seperate google project
    • Unit tests - Jest
    • Linting - eslint (airbnb config)
    • Formatting - prettier

But why are you using Google Cloud over AWS?

Partially, the full breadth of AWS services makes my head spin. While AWS Amplify could earn my curiousity eventually, Google App Engine has my attention for the following reasons.

  1. Google Auth is very easy to set up. In the most simple case I can simply throw my app behind IAP (Identity-Aware Proxy) and be confident it's not exposed to the entire internet.
  2. If I stick with a modern python or node setup I can completely avoid Docker. Very cool tech, but leads to equally hot Macbooks.
  3. Very easy to integrate Firebase into, which is the easiest way to set up push notifications in my experience.

Why go with Cypress over something like Selenium?

I used selenium briefly at the beginning of my career, and found it way less pleasant and fragile than Cypress. Cypress also recently released component testing, which I'm eager to try out and see if it can free me from writing those dreaded unit tests.

Why do you use a seperate GCP project for your staging environment?

Mostly because it encourages isolation. By default, your test data is seperate from your prod db, ditto for cron jobs, emails, etc.